南宁建设职业技术学院招聘信息网站,网站制作成都,电子商务有限公司,南京制作手机网站导航#xff1a;
bootstrap中使用列表封装了水平导航#xff0c;其类样式如#xff1a;
类名描述.nav给ul或ol#xff0c;用于清除列表默认样式#xff0c;并将列表项水平排列.nav-item给li,用于布局.nav-link给li里面的a,用于a布局.justify-content-center用于居中ul或…导航
bootstrap中使用列表封装了水平导航其类样式如
类名描述.nav给ul或ol用于清除列表默认样式并将列表项水平排列.nav-item给li,用于布局.nav-link给li里面的a,用于a布局.justify-content-center用于居中ul或ol使位于屏幕中间.justify-content-end用于靠右ul或ol使位于屏幕右侧.flex-column给ul 或 ol使垂直排列.nav-tabs选项卡式布局对选中的项添加active类来进行标记.nav-pills胶囊导航使有active的选项背景成蓝色.nav-justified使导航的每一项都各自等宽data-toggle“tab”实现选项卡切换功能给链接a标签添加链接中的href指向tab-content中的锚点值;此属性后面的值若是 pill则表示样式为胶囊型.tab-pane控制选项卡内容隐藏给具体的内容.nav-tabs实现选项卡中导航样式
!-- 导航、选项卡导航部分 --
ul classnav nav-tabs nav-pills nav-justified!--a标签href属性值指向下面内容锚点值--li classnav-itema href#cont1 classnav-link active data-toggletab1/a/lili classnav-itema href#cont2 classnav-link data-toggletab12/a/lili classnav-itema href#cont3 classnav-link data-togglepill123/a/lili classnav-itema href#cont4 classnav-link data-togglepill1234/a/li
/ul
!-- 结合上面导航部分构成选项卡模块以下是选项卡内容部分 --
div classtab-content!---tab-content隐藏下面所有的内容但是有active的内容会显示--div idcont1 classtab-pane active1/divdiv idcont2 classtab-pane12/div!-- tab-pane隐藏带有此类的div自身 --div idcont3 classtab-pane123/divdiv idcont4 classtab-pane1234/div
/div导航栏
bootstrap中提供了导航栏功能的封装导航栏一般时放到页面的顶部相关类样式如下:
类名描述.navbar创建一个导航栏后面可跟 navbar-expand-S类实现响应式导航栏默认是垂直排列的.navbar-expand-S根据屏幕尺寸做出响应式的导航栏当屏幕小于指定值时列表会垂直排列S的值可以是 xl、lg、md、sm.navbar-nav给导航栏上元素ul添加此类清除ul默认样式并使ul水平排列.nav-item给navbar-nav中li添加此类修改样式. nav-link给nav-item中的链接a添加此类清除鼠标hover下划线样式并进行了布局.navbar-light此类设置了一个黑色color但是后面有以此为基础的active类有此项active选中的链接会有突显效果.disabled禁用a标签.navbar-brand高亮效果用于突显logo等若此类用于img则图片自适应导航栏.navbar-text设置导航栏非链接文本.fixed-top用于固定导航栏给nav添加此标签将导航栏固定到顶部.fixed-bottom用于固定导航栏给nav添加此标签将导航栏固定到底部.breadcrumb定义面包屑导航栏给父级容器加此类如ul.breadcrumb-item导航栏中每一项中添加的类名此类是一个/符
!-- 基本导航栏 --
nav classnavbar navbar-expand-sm bg-warning navbar-lightul classnavbar-navli classnav-itemimg src2.png classnavbar-brand width50px height50px/lili classnav-itema classnav-link navbar-brand href#首页/a/lili classnav-itema classnav-link active href#设置/a/lili classnav-itema classnav-link disabled href#个人中心/a/li/ul
/nav!-- 折叠导航栏 --
!-- 1.定义按钮按钮必须有 data-togglecollapse实现功能层面、data-target.navbox指定需要折叠的对象--
button data-togglecollapse data-target.navbox展示/收起/button!-- 2.定义一个盒子用于上面按钮折叠同时将基础导航栏装入此盒子 --
div classnavbox show!--这里加show解决首次点击出现bug问题--nav classnavbar navbar-expand-sm bg-warning navbar-lightul classnavbar-navli classnav-itemimg src2.png classnavbar-brand width50px height50px/lili classnav-itema classnav-link navbar-brand href#首页/a/lili classnav-itema classnav-link active href#设置/a/lili classnav-itema classnav-link disabled href#个人中心/a/li/ul/nav
/div!--面包屑导航栏--
ul classbreadcrumbli classbreadcrumb-itema href#首页/a/lili classbreadcrumb-itema href#设置/a/lili classbreadcrumb-item active个人中心/li
/ul表单
bootstrap提供了类样式供创建表单其具体如下
类名描述.form-control定义一个宽度100%的表单元素给input标签.form-inline定义一个水平排列的响应式表单域给form标签当屏幕小到一定程度时表单元素会垂直排列.form-check-inline将一个容器中的选项水平排列.disabled禁用一个表单元素.input-group-prepend用来定义一个给输入框前面添加文本的容器此类给div元素实际没太大作用.input-group将input-group-append和input-group-prepend的其他元素放到一组使在同一行上.input-group-text定义输入框组中的文本,使之有样式.input-group-append用来定义一个给输入框后面添加文本的容器此类给div元素实际没太大作用.input-group-S定义一组输入框的大小此类给input-group容器加其中S值有sm和lg
form action classform-inlinediv classform-group form-check-inlinespan用户名/spaninput typeurl classform-controlspan密码/spaninput typepassword classform-control/divdiv classform-group radio-inlinespan用户名/spaninput typetext classform-controlspan密码/spaninput typepassword classform-control/div
/form自定义表单
bootstrap封装了关于表单的自定义类样式等如下
类名描述.custom-control定义一个选框的容器此类名做样式布局.custom-checkbox定义被选中时方框中的对号.custom-control-input将选框的默认选框隐藏.custom-control-label一个伪元素用于代替隐藏的默认选框.custom-radio定义圆形选框及被选中时选框中的白点.custom-control-inline将自定义控件布局在同一行.custom-select定义选择菜单给select元素设置此类默认是通栏显示但是一般会在后面加限定大小的后缀sm和lg如 custom-select-sm.custom-range自定义滑块输入滑动点仅为一个点在本地测试和默认效果一样.custom-file-label用于label初始化一个自适应通栏的文件域.custom-file-input使元素相对定位且 opacity: 0使用时建议外面套一个容器并给类样式custom-file
!-- 自定义复选框原理将默认的CheckBox选框隐藏掉或将label的伪元素定位到默认CheckBox的位置将其覆盖选中时在修改伪元素样式--
form methodGETdiv classcustom-control custom-checkboxinput typecheckbox classcustom-control-input idcheckbox1 nameapplelabel classcustom-control-label forcheckbox1apple/label/divdiv classcustom-control custom-checkboxinput typecheckbox classcustom-control-input idcheckbox2 namewaterlabel classcustom-control-label forcheckbox2water/label/divinput typesubmit value提交
/form!-- 自定义单选框原理和复选框一样 --
form methodGETdiv classcustom-control custom-radio custom-control-inlineinput typeradio classcustom-control-input idcheckbox1 namesex value1label classcustom-control-label forcheckbox1男/label/divdiv classcustom-control custom-radio custom-control-inlineinput typeradio classcustom-control-input idcheckbox2 namesex value2label classcustom-control-label forcheckbox2女/label/divinput typesubmit value提交
/form!-- 自定义选择菜单 --
formselect namenumber classcustom-select-smoption value0 selected disabled数字/optionoption value11/optionoption value22/optionoption value33/option/selectinput typesubmit value提交
/form!-- 自定义滑块输入 --
form methodGETlabel forrangebox自定义滑块/labelinput typerange classcustom-range idrangebox namevaluesinput typesubmit value提交
/form!-- 自定义文件域 --
form methodPOSTdiv classcustom-fileinput typefile classcustom-file-input idfileBoxlabel classcustom-file-label forfileBox选择文件/label/divinput typesubmit value提交
/form提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者删除。 笔者苦海
