bootstarp

Posted 2020-10-30 naniandiam

什么是Bootstrap？

bootstrap是一个最受欢迎的 html、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。通俗的讲，bootstrap就是预先定义好了一套优美的CSS样式和一套组件，前端开发者可以直接拿来使用，加速开发效率，并且他是响应式布局的，所以写的一套代码可以在多种设备中进行使用。

如何使用bootstrap？

要使用bootstrap很简单，只要下载源代码，然后把bootstrap.min.css和bootstrap.min.js以及jquery.min.js导入到html文件中即可使用。或者是使用bootcss网站提供的CDN加速服务，把链接导入到HTML文件中即可，要注意的事情是，jquery必须放在bootstrap.min.js之前，因为bootstrap.min.js依赖jquery，那么以下将使用CDN的方式展示样例代码：

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 javascript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

bootstrap中的栅格系统：

bootstrap中最强大也是最核心的一个东西就是响应式，而响应式是通过一个叫做栅格系统的东西实现的。栅格系统把一个页面分成12列，bootstrap会根据媒体查询获取当前的浏览器的宽度，然后再把宽度平均分配给12列，html中一个盒子可以占用多列。要使用栅格系统，需要使用到container/container-fluid和row以及col-xs-/col-sm-/col-md-/col-lg-类。container相当于一个table盒子，装着许许多多的row，每个row里面装着许许多多的col，通过这样一种结构，构成了一个栅格系统，而container和container-fluid的唯一区别是，container-fluid是全屏的，而container不是全屏的，左右两边会有一个间距。

* `col-lg-n`:large,浏览器大于1200px时候的显示方式.
* `col-md-n`:middle,浏览器大于992px时候的显示方式.
* `col-sm-n`:small,浏览器>=768px时候的显示方式.
* `col-xs-n`:xsmall,浏览器小鱼768时候的限时方式.

bootstrap中的表格：

这个用起来相当简单，只要给表格添加一个table类就可以了。然后根据需要再添加其他的类。

1. table-striped：条纹状表格。
2. table-bordered：带边框的表格。
3. table-hover：鼠标放上去有悬停效果。

可以通过css样式来给表格的具体列指定宽度。

30个你必须知道的选择器:

http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/

bootstrap中的表单：

1. form类的种类：

• form：这个类使表单元素填充100%的宽度。
• form-inline：这个类使所有表单元素水平排列，表现出inline-block的样式。
• form-horizontal：这个类使得他的子form-group盒子表现出水平排列的效果。

1. form子盒子的类：

• 直接子类通过form-group来将label和表单元素包裹起来可以获得最好的排列。
• input/textarea/select等元素需要添加form-control类，才能使用bootstrap的定义好的样式。
• checkbox：这个比较特殊，需要使用label进行包裹来获得最好的展示效果。
• form相当于有container的功能，form-group有row的功能，可以直接在form-group中加一层div，然后添加class=‘col-md-10‘这样的代码来设置栅格布局。

按钮：

使用按钮很简单，只需要给button添加一个btn的类就可以了，然后根据需要添加其他的有特殊效果的class。

例如：

<button type="button" class="btn btn-default">Default</button>

带有特殊效果的预定义的类有：

1. btn-default：默认的白色效果。
2. btn-primary：蓝色的效果。
3. btn-success：绿色的表示成功的效果。
4. btn-info：浅蓝色的表示信息的效果。
5. btn-warning：黄色的表示警告的效果。
6. btn-danger： 红色的表示危险的效果。

另外，如果想让一个按钮表现出和父盒子一样的宽度，添加btn-block可以把按钮拉升到100%的宽度。还有一点需要注意的事，为了在所有浏览器中表现一致，官方推荐在input为submit的时候，应该尽量使用button来代替。

辅助类：

1. 具有情景颜色意义的文本：

• text-muted：颜色比较柔和的文本。
• text-primary：蓝色的文本。
• text-success： 代表成功的绿色文本。
• text-info： 表示信息的浅蓝色文本。
• text-warning： 表示警告信息的黄色文本。
• text-danger：表示危险的红色文本。

1. 具有情景颜色意义的文本背景：

• bg-primary：蓝色的背景，字体是白色的。
• bg-success：绿色的背景，字体是黑色的。
• bg-info： 浅蓝色的背景，字体是黑色的。
• bg-warning：黄色的背景，字体是黑色的。
• bg-danger：红色的背景，字体是黑色的。

svg字体图标：

一种矢量字体图标，为什么说是字体，因为它的大小可以随着字体的大小变化而变化，并且放大不会出现锯齿。使用一个span标签包裹起来。

使用方式：

<span class="glyphicon glyphicon-search"></span>

下拉菜单：

下拉菜单的触发器和下拉列表，需要放在一个class为dropdown的盒子里面。

1. 触发器：必须有一个data-toggle=‘dropdown‘的属性，否则bootstrap不能给你收缩。并且为了更好的效果，需要给触发器一个dropdown-toggle的class。
2. 下拉列表：下拉列表需要添加一个dropdown-menu类。

输入框组：

通过在文本输入框前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。使用 .input-group 包裹 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。

基本使用：

<div class="form-group">
    <div class="input-group">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control">
        </div>
    </div>
</div>

注意：

1. 不支持在输入框的单独一侧添加多个额外元素。
2. 不支持在单个输入框组中添加多个表单控件。

导航条：

1. 标签页：使用nav类定义一个标签页。然后使用nav-tabs定义一个普通的标签页，nav-pills来定义一个胶囊式的标签页。示例代码如下：
   普通标签页
   
   
   
   • Home
   
   
   • Profile
   
   
   • Messages
   
   
   
   胶囊式标签页
   
   
   
   • Home
   
   
   • Profile
   
   
   • Messages
   
   
2. 导航条：

• 导航条使用navbar类来作为导航条盒子。
• 然后在里面使用container或者是container-fluid平铺的来作为容器。
• 使用navbar-header来装brand。
• 使用collapse这个盒子包装链接，可以在缩小的时候，有一个弹出按钮。
• 使用nav navbar-nav来包裹真正的链接。
• 使用navbar-fixed-top可以让导航条固定在顶部。
• 使用navbar-static-top来静止在顶部，如果往下面滚动就会消失。
• 使用navbar-inverse改变导航条的外观。

3.分页：
/*
     <nav>
       <ul class="pagination">
         <li><a href="#">&laquo;</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="#">&raquo;</a></li>
       </ul>
     </nav>
*/
active表示当前按钮是选中的，disabled表示当前按钮不可用。

1. 标签：
   使用label类来表示一个标签。
   Default
   Primary
   Success
   Info
   Warning
   Danger

2. 警告框：
   使用alert类来表示一个警告框。

   ...
   • alert-success:绿色的成功的。
   • alert-info：浅蓝色的表示信息。
   • alert-warning：黄色的表示警告。
   • alert-danger：红色的表示危险的，一般是失败的。
3. 面板：

• 通过使用panel类来添加一个面板。
• 通过使用panel-heading来给面板添加一个标题，也可以通过使用panel-title类的h1-h6标签，添加一个预定义样式的标题。