BootStrap
表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
表单控件
.form-control .input-lg（较大） .input-sm（较小）
输入框 text
.form-control
<div class='col-sm-3'> <input type='text' name='' id='' class='form-control' /> <input type='text' name='' id='' class='form-control input-lg' /> <input type='text' name='' id='' class='form-control input-sm' /></div>下拉选择框 select
多行选择设置：multiple="multiple"
<div class='col-sm-3'> <select class='form-control'> <option>北京</option> <option>上海</option> <option>深圳</option> </select> <select class='form-control' multiple='multiple'> <option>北京</option> <option>上海</option> <option>深圳</option> </select></div>文本域 textarea
<div class='col-sm-3'> <textarea class='form-control' rows='3'></textarea></div>复选框 checkbox
垂直显示： .checkbox
水平显示： .checkbox-inline
<!-- 垂直显示 --><div> <div class='checkbox'> <label><input type='checkbox' >游戏</label> </div> <div class='checkbox'> <label><input type='checkbox' >学习</label> </div></div><!-- 水平显示 --><div> <label class='checkbox-inline'> <input type='checkbox' >游戏 </label> <label class='checkbox-inline'> <input type='checkbox' >学习 </label></div>单选框 radio
垂直显示： .radio
水平显示： .radio-inline
<!-- 垂直显示 --><div> <div class='radio'> <label><input type='radio' >男</label> </div> <div class='radio'> <label><input type='radio' >女</label> </div></div><!-- 水平显示 --><div> <label class='radio-inline'> <input type='radio' >男 </label> <label class='radio-inline'> <input type='radio' >女 </label></div>按钮
1）使用 button 实现
基础样式： btn
<button class='btn'>按钮</button> 附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
<button class='btn btn-danger'>按钮</button><button class='btn btn-primary'>按钮</button><button class='btn btn-info'>按钮</button><button class='btn btn-success'>按钮</button><button class='btn btn-default'>按钮</button><button class='btn btn-warning'>按钮</button><button class='btn btn-link'>按钮</button>2）多标签支持：使用 a div 等制作按钮
<a href='##' class='btn btn-info'>a标签按钮</a><span class='btn btn-success'>span标签按钮</span><div class='btn btn-warning'>div标签按钮</div>3）按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
<button class='btn btn-primary btn-xs'>超小按钮.btn-xs</button><button class='btn btn-primary btn-sm'>小型按钮.btn-sm</button><button class='btn btn-primary'>正常按钮</button><button class='btn btn-primary btn-lg'>大型按钮.btn-lg</button> 4）按钮禁用
方法1：在标签中添加disabled属性
<button class='btn btn-danger' disabled='disabled'>禁用按钮</button> 方法2：在元素标签中添加类名"disabled"
<button class='btn btn-danger disabled'>禁用按钮</button> 在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮！
表单布局
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
- 向父 <form> 元素添加 role="form"。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
水平表单
同一行显示form-horizontal
配合Bootstrap框架的网格系统
<form class='form-horizontal' role='form'> <div class='form-group'> <label for='email' class='control-label col-sm-2'>邮箱</label> <div class='col-sm-10'> <input type='email' class='form-control' placeholder='请输入邮箱'/> </div> </div> <div class='form-group'> <label for='pwd' class='control-label col-sm-2'>密码</label> <div class='col-sm-10'> <input type='pwd' class='form-control' placeholder='请输入密码' /> </div> </div> <div class='form-group'> <div class='col-sm-offset-2'> <div class=' checkbox'> <label> <input type='checkbox' />记住密码 </label> </div> </div> </div> <div class='form-group'> <div class='col-sm-offset-2 col-sm-10'> <button class='btn btn-default'>提交</button> </div> </div></form>内联表单
将表单的控件都在一行内显示form-inline
注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。
<form class='form-inline'> <div class='form-group'> <label for='email' >邮箱</label> <input type='email' class='form-control' placeholder='请输入邮箱'/> </div> <div class='form-group'> <label for='pwd' >密码</label> <input type='pwd' class='form-control' placeholder='请输入密码' /> </div> <div class='form-group checkbox'> <label><input type='checkbox' />记住密码</label> </div> <div class='form-group'> <button class='btn btn-default'>提交</button> </div></form>缩略图
缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。
<div class='container'> <div class='row'> <div class='col-md-3'> <div class='thumbnail'> <img src='img/IMG_0131.JPG' alt='...'> <h3>高圆圆</h3> <p>出生于北京市，中国内地影视女演员、模特。</p> <button class='btn btn-default'> <span class='glyphicon glyphicon-heart'></span>喜欢</button> <button class='btn btn-info'> <span class='glyphicon glyphicon-pencil'></span>评论 </button> </div> </div> </div></div>面板
默认的 .panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
.panel-default：默认样式
.panel-heading：面板头
.panel-body：面板主体内容
<div class='panel panel-success'> <div class='panel-heading'> ...... </div> <div class='panel-body'> ...... </div></div>BootStrap 插件
导航
使用下拉与按钮组合可以制作导航
要点:
1、基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航2、分类: 1)、标签型 (nav-tabs)导航 2)、胶囊形(nav-pills)导航 3)、堆栈(nav-stacked)导航 4)、自适应(nav-justified)导航 5)、面包屑式(breadcrumb)导航 ，单独使用样式，不与nav一起使用,直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）3、状态: 1)、选中状态 active 样式 2)、禁用状态: disable4、二级菜单标签式导航
<p>标签式的导航菜单</p><ul class='nav nav-tabs'> <li class='active'><a href='#'>Home</a></li> <li><a href='#'>SVN</a></li> <li><a href='#'>iOS</a></li> <li><a href='#'>VB.Net</a></li> <li><a href='#'>Java</a></li> <li><a href='#'>PHP</a></li></ul>胶囊式导航
<p>基本的胶囊式导航菜单</p><ul class='nav nav-pills'> <li class='active'><a href='#'>Home</a></li> <li><a href='#'>SVN</a></li> <li><a href='#'>iOS</a></li> <li><a href='#'>VB.Net</a></li> <li><a href='#'>Java</a></li> <li><a href='#'>PHP</a></li></ul>分页导航
分页随处可见，分为页码导航和翻页导航
页码导航：ul标签上加pagination [pagination-lg | pagination-sm]
翻页导航：ul标签上加pager
分页
<ul class='pagination'> <li><a href='#'>«</a></li> <li><a href='#'>1</a></li> <li><a href='#'>2</a></li> <li><a href='#'>3</a></li> <li><a href='#'>4</a></li> <li><a href='#'>5</a></li> <li><a href='#'>»</a></li></ul>翻页
<ul class='pager'> <li><a href='#'>Previous</a></li> <li><a href='#'>Next</a></li></ul>下拉菜单
在使用Bootstrap框架的下拉菜单时，必须使用两个js
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --><script src='js/jquery-3.4.1.js'></script><!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 --><script src='js/bootstrap.min.js'></script> 要点：
1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框: <div class='dropdown'></div>2、默认向下dropdown，向上弹起加入 . dropup 即可3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'></button>4、在button中 使用font 制作下拉箭头 <span class='caret'></span>5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能8、对齐方式: 1)、dropdown-menu-left 左对齐 默认样式 2)、dropdown-menu-right 右对齐9、激活状态（.active）和禁用状态（.disabled）<!--使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可--><div class='dropdown '> <!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性--> <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'> 喜欢频道 <span class='caret'></span><!--下拉箭头--> </button> <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu--> <ul class='dropdown-menu'> <!--dropdown-menu-right右对齐--> <!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能--> <li class='dropdown-header'>----科普----</li> <li> <a href='#'>人与自然</a> </li> <!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能--> <li class='divider'></li> <li class='dropdown-header'>----搞笑----</li> <li> <a href='#'>欢乐喜剧人</a> </li> <li> <a href='#'>快乐大本营</a> </li> <li class='divider'></li> <li class='disabled'> <!--禁用状态--> <a href='#'>生活大爆炸</a> </li> </ul></div>模态框
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
用法
- 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
- 通过 JavaScript：使用这种技术，可以通过 JavaScript 来调用带有 id="identifier" 的模态框：
$('#identifier').modal(options);实例
<h2>创建模态框（Modal）</h2><!-- 按钮触发模态框 --><button class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'> 开始演示模态框</button><!-- 模态框（Modal） --><div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> <div class='modal-dialog'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> <h4 class='modal-title' id='myModalLabel'>模态框（Modal）标题</h4> </div> <div class='modal-body'>在这里添加一些文本</div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button> <button type='button' class='btn btn-primary'>提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>方法
| 方法 | 描述 | 实例 |
|---|---|---|
| Toggle: .modal('toggle') | 手动切换模态框。 | $('#identifier').modal('toggle'); |
| Show: .modal('show') | 手动打开模态框。 | $('#identifier').modal('show'); |
| Hide: .modal('hide') | 手动隐藏模态框。 | $('#identifier').modal('hide'); |
想要更多Java，前端，大数据，微服务等资料<a href="https://i.loli.net/2020/06/22/zbPOtKIqDjo45Mw.png'>点我扫码领取</a>;