bootstrap中导航、导航栏、表单及自定义表单

导航：

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 class="nav nav-tabs nav-pills nav-justified"><!--a标签href属性值指向下面内容锚点值--><li class="nav-item"><a href="#cont1" class="nav-link active" data-toggle="tab">1</a></li><li class="nav-item"><a href="#cont2" class="nav-link" data-toggle="tab">12</a></li><li class="nav-item"><a href="#cont3" class="nav-link" data-toggle="pill">123</a></li><li class="nav-item"><a href="#cont4" class="nav-link" data-toggle="pill">1234</a></li>
</ul>
<!-- 结合上面导航部分构成选项卡模块，以下是选项卡内容部分： -->
<div class="tab-content"><!---tab-content隐藏下面所有的内容，但是有active的内容会显示--><div id="cont1" class="tab-pane active">1</div><div id="cont2" class="tab-pane">12</div><!-- tab-pane隐藏带有此类的div自身 --><div id="cont3" class="tab-pane">123</div><div id="cont4" class="tab-pane">1234</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 class="navbar navbar-expand-sm bg-warning navbar-light"><ul class="navbar-nav"><li class="nav-item"><img src="2.png" class="navbar-brand" width='50px' height='50px'></li><li class="nav-item"><a class="nav-link navbar-brand" href="#">首页</a></li><li class="nav-item"><a class="nav-link active" href="#">设置</a></li><li class="nav-item"><a class="nav-link disabled" href="#">个人中心</a></li></ul>
</nav><!-- 折叠导航栏： -->
<!-- 1.定义按钮：按钮必须有 data-toggle="collapse"实现功能层面、data-target=".navbox"指定需要折叠的对象-->
<button data-toggle="collapse" data-target=".navbox">展示/收起</button><!-- 2.定义一个盒子用于上面按钮折叠，同时将基础导航栏装入此盒子 -->
<div class="navbox show"><!--这里加show解决首次点击出现bug问题--><nav class="navbar navbar-expand-sm bg-warning navbar-light"><ul class="navbar-nav"><li class="nav-item"><img src="2.png" class="navbar-brand" width='50px' height='50px'></li><li class="nav-item"><a class="nav-link navbar-brand" href="#">首页</a></li><li class="nav-item"><a class="nav-link active" href="#">设置</a></li><li class="nav-item"><a class="nav-link disabled" href="#">个人中心</a></li></ul></nav>
</div><!--面包屑导航栏-->
<ul class="breadcrumb"><li class="breadcrumb-item"><a href="#">首页</a></li><li class="breadcrumb-item"><a href="#">设置</a></li><li class="breadcrumb-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="" class="form-inline"><div class="form-group form-check-inline"><span>用户名：</span><input type="url" class="form-control"><span>密码：</span><input type="password" class="form-control"></div><div class="form-group radio-inline"><span>用户名：</span><input type="text" class="form-control"><span>密码：</span><input type="password" class="form-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 method="GET"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox1" name="apple"><label class="custom-control-label" for="checkbox1">apple</label></div><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox2" name="water"><label class="custom-control-label" for="checkbox2">water</label></div><input type="submit" value="提交">
</form><!-- 自定义单选框：原理和复选框一样 -->
<form method="GET"><div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="checkbox1" name="sex" value='1'><label class="custom-control-label" for="checkbox1">男</label></div><div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="checkbox2" name="sex" value='2'><label class="custom-control-label" for="checkbox2">女</label></div><input type="submit" value="提交">
</form><!-- 自定义选择菜单： -->
<form><select name="number" class="custom-select-sm"><option value="0" selected disabled>数字</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="submit" value="提交">
</form><!-- 自定义滑块输入： -->
<form method="GET"><label for="rangebox">自定义滑块</label><input type="range" class="custom-range" id="rangebox" name="values"><input type="submit" value="提交">
</form><!-- 自定义文件域： -->
<form method="POST"><div class="custom-file"><input type="file" class="custom-file-input" id="fileBox"><label class="custom-file-label" for="fileBox">选择文件</label></div><input type="submit" value="提交">
</form>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

bootstrap中导航、导航栏、表单及自定义表单相关推荐

mysql 自定义表单_DedeCMS自定义表单制作和调用办法
在很多建站需求中,需要一些额外的表单供前台用户提交,以便于收集.统计.分析及处理更多的数据,比如:在线订单.在线报名等一些常见的互动应用. dedecms自定义表单调用先说怎么调用自定义表单吧,因为 ...
dedecms 自定义表单html,dedecms自定义表单和自定义表单如何用自己模板教程
dedecms自定义表单和自定义表单如何用自己模板视频教程,无声,但有具体的操作和演示的模板,以及详细的说明. 在线预约一个表单,后台可以直接实现自定义表单功能注意看有个表单的id 其他的不用管, ...
自定义表单mysql_自定义表单，计算答案然后更新mysql DB(Custom form, calculate answer then update mysql DB)...
自定义表单,计算答案然后更新mysql DB(Custom form, calculate answer then update mysql DB) 我想要实现的是用户购买代币时的模拟支付系统. 我坚 ...
(原创)我也玩万能表单（自定义表单）(一)
由于客户需要做自定义表单,在网上找了n久相关文章,没有合适的,一般的添加,修改和现实页面都不能自定义,不能达到客户的要求,所以决定自己来写. 自定义表单主要实现的功能: 1.能添加表,自定义字段,字段 ...
vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
【自定义表单】自定义表单设计
1.后端设计1 diy_field_pool 字段池(我们定义好的字段类型) diy_form 表单表(记录用户自定义的表单) diy_form_field 表单字段表(记录某张表单中有哪些字段) d ...
JAVA动态表单，自定义表单，自定义字段
基于雷劈网的表单设计器扩展,java实现后台解析(插件内容和字段和原版有一定改变).致敬雷劈网. http://formdesign.leipi.org/ 动态表单绘制完毕后由后台解析并存储到数据库, ...
Tableau(9)：计算字段、表计算、自定义表计算
文章目录一.计算字段二.表计算三.自定义表计算参考资料一.计算字段步骤1:导入全球超市订单数据步骤2:创建成本(销售额-利润)字段步骤3:创建盈利标志(若利润大于0盈利,反 ...
自定义表单mysql_自定义表单系统如何设计数据库
问题描述需求是这样的: 1.由客户来根据需求设计表单内容样式点击保存后前端可以生成JSON格式数据,JSON数据如下: { "list": [ { "type&qu ...

bootstrap中导航、导航栏、表单及自定义表单

bootstrap中导航、导航栏、表单及自定义表单相关推荐

最新文章

热门文章