Bootstrap 简单介绍 下载Bootstrap Bootstrap 浏览器标签 容器标签 Bootstrap 核心 栅格系统 按钮效果 其他的标签

Bootstrap 简单介绍

随着移动互联网发展，越来越多问题出现在浏览器的适配上，如手机端和PC端网页布局解析，以及与此相关的互联网老问题——浏览器的兼容性问题。随着Bootstrap框架的出现，一种非常好的解决solution。Bootstrap是由美国社交平台巨头推特(Twitter)公司开发的，它的主要目标是提供一种跨平台兼容性的响应式互联网前端框架。

下载Bootstrap

有很多不同的Bootstrap版本，目前最新版本的Bootstrap是4.0-beta版本， 它的下载地址是
https://getbootstrap.com/, 点击下载按钮既可以下载了。下载完毕后，解压缩下载包，在主目录下文件夹中，存在3个目录css/ 和js/ /font 目录，这2个目录就是本文所需要的最重要的文件，即Bootstrap core 文件。将这2个文件拷贝你的工程的主目录中，然后下载Jquery文件（关于这一部分，本文省略）。

在html文件中添加如下代码，引入相关的JS和css代码，这样我们就可以使用bootstrap框架。

    // Bootstrap css库
    

Bootstrap 浏览器标签

由于Bootstrap具有跨平台兼容性等特点，所以在html5的头文件中，增加一些标签，以便激活bootstrap的兼容性和跨平台性。

容器标签

bootstrap有多种不同的容器标签，主要使用的是container 和container-fluid,第一种是居中布局整个页面框架，第二是全屏布局整个页面框架

    // 居中布局
    

....

....

Bootstrap 核心

栅格系统

Bootstrap将整个页面栅格成多行多列，我们可以把它想象成一个excel表格。 Bootstrap将整个页面每一行分为12列，即12个栅格，所以我们可以指定每个HTML标签占用多少栅格。在bootstrap3 和bootstrap 4有一点不同。具体如下所示。

    //整个页面分为2列， 即每一列占6个栅格
     

// bootstrap 4 语法

1/2

1/2

// bootstrap 3 语法

1/2

1/2

1/3

1/3

按钮效果

bootstrap封装了很多不同的按钮效果，主要包括default,primary,success,danger,info,warning等。代码如下：

        ...
         abc
         abc
         cde
         cde
         cde
         cde
         ...

其他的标签

bootstrap中还有其他的标签，如 small 缩小字体标签，kbd 加粗标签,img-responsive 响应式图片等等。

table表格，添加 table table-striped table-hover等标签，在bootstarp 4 中，颜色标签包括 alert-success,alert-danger,alert-waring,alert-info等标签

<p class="col-md-10 col-md-offset-1">                    
               <table class="table table-striped">
                    <thead>
                       <tr >
                           <th class="alert-success">header1</th>
                           <th class="alert-info">header2</th>
                           <th class="alert-danger">header3</th>
                       </tr>
                   </thead>
                   <tbody class="table-hover">
                       <tr class="alert-danger">
                           <td>1data1</td>
                           <td>1data2</td>
                           <td>1data3</td>
                       </tr>
                        <tr>
                           <td>2data1</td>
                           <td>2data2</td>
                           <td>2data3</td>
                       </tr>
                        <tr>
                           <td>3data1</td>
                           <td>3data2</td>
                           <td>3data3</td>
                       </tr>
                        <tr class="alert-danger">
                           <td>4data1</td>
                           <td>4data2</td>
                           <td>4data3</td>
                       </tr>
                        <tr>
                           <td class="alert-success">5data1</td>
                           <td class="alert-warning">5data2</td>
                           <td>5data3</td>
                       </tr>
                   </tbody>
               </table>
        </p>

标签 col-md-offset-4 与标签 col-md-pull-4 的区别。前者相当于执行了css 的margin-left , 后者则执相当于执行了css 的position 或 float 。

水平放置表单标签 .form-inline/.form-group/.form-control代码如下：

<form class="form-inline text-center" method="Post"> 
      <p class="form-group">
         <input class="form-control" type="text" placehold="Your name"> 
      </p>
      <p class="form-group">
        <input type="text" class="form-control"/>
      </p>
      <button type="submit" class="btn btn-danger"></button>
</form>

垂直放置表单标签 .form-horizontal / form-group /form-control