bootstrap 初体验

Bootstrap介绍

Bootstrap 是stwitter公司的两名前端设计师设计的，基于html css javascript的超强的前端框架。是一移动设备为优先，同时应用于pc机、平板、手机。同时可以解决浏览器兼容问题。

可以通过http://v3.bootcss.com/下载。包含三个文件夹

css.存放了各种控件的css样式
fonts 字体库
js 相关的js，已经包含了压缩版本的jquery。

包含min的都是压缩版本的文件。

引入Bootstrap

1.本地方式

<!--屏幕和设备的屏幕一致，初始缩放为1:1，禁止用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <!--引入外部的bootstrap中的css文件-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!--再引入bootstrap.min.js文件-->
    <script src="bootstrap/js/bootstrap.min.js"></script>

网络方式

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

案例

bootstrap提供了大量的css类，直接调用这些类就可以很容易的美化UI，同时可以决定UI是否是响应式的，响应式可以根据屏幕的大小自动的改变UI尺寸，适配设备,只需要合适的标签添加tagname-responsive类.
适配移动设备应加入

<!--屏幕和设备的屏幕一致，初始缩放为1:1，禁止用户缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

3.1 表格
响应式适配移动设备。

<h1 class="page-header">书籍价格</h1>
    <span>价格表</span>
    <!--给table添加响应式要在父视图上添加-->
    <div class="table-responsive">
        <!--使用 table样式 带边框 划过有选中效果 奇数带颜色 -->
        <table class="table table-bordered table-hover table-striped">
            <!--单独为每行指定颜色样式-->
            <tr class="success"><td>swift语言实战教程</td><td>56.0元</td></tr>
            <tr class="alert-danger"><td>疯狂swift讲义</td><td>50.0元</td></tr>
            <tr class="alert-link"><td>iOS实战教程</td><td>56.0元</td></tr>
            <tr class="alert-warning"><td>算法导论</td><td>86.0元</td></tr>
            <tr class=""><td>图解tcp/ip协议</td><td>86.0元</td></tr>
        </table>
    </div>

图片

<div class="container-fluid" style="background:#ffffff;">
        <!-img-responsive图片设置为响应式的--->
        ![](../images/1.jpg)
        ![](../images/1.jpg)
    </div>

iphone5s.png

3.2 栅格

<div class="container" style="background:#ffffff;">
    <div class="row">
      <div class="col-md-4">
         ![](images/1.jpg)
          <h3 class="page-header">从堆叠到水平排列</h3>
          <p>
            栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水
          </p>
      </div>

      <div class="col-md-4">
        ![](images/2.jpg)
        <h3 class="page-header">从堆叠到水平排列</h3>
         <p>
           栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围）幕到小屏幕这一范围）
         </p>
      </div>
      <div class="col-md-4">
        ![](images/3.jpg)
        <h3 class="page-header">从堆叠到水平排列</h3>
         <p>
           栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围）幕到小屏幕这一范围）
         </p>
      </div>
    </div>
  </div>

以下来自百度:https://zhidao.baidu.com/question/583480796435093365.html

col-xs-超小屏幕手机 (<768px),.col-sm-小屏幕平板 (≥768px),.col-md-中等屏幕桌面显示器 (≥992px)(栅格参数).不管在哪种屏幕上，栅格系统都会自动的分12列 col-xs-和col-sm- 和col-md-*后面跟的参数表示在当前的屏幕中 div占的宽度。例如 <div class="col-xs-6 col-md-3"> 这个div在屏幕中占的位置是：1在超小屏幕中占6列也就是屏幕的一半（6/12） 2.在中单屏幕中占3列也就是1/4（3/12）。如果我们要在小屏幕上并排显示3个div(12/3=4)，在大屏幕上显示6个则col-xs-4 col-md-2这样我们就可以控制我们自己想要的什么排版了.

栅格手机.png

栅格电脑.png

<!--pc机大屏幕显示四张图片，pc机中等屏幕显示三张图片，平板显示两张图片 ，手机端显示一张图片-->
     <div class="container" style="background:#e6e6e6;">
       <div class="row">
              <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                  ![](images/1.jpg)
                   <p>
                   格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局
                   </p>
              </div>
              <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                  ![](images/1.jpg)
                   <p>
                   格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局
                   </p>
              </div>
              <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
              ![](images/1.jpg)
               <p>
               格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局
               </p>
              </div>
              <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
              ![](images/1.jpg)
               <p>
               格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局
               </p>
              </div>
       </div>
       <div class="row">
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
          <div class="col-md-1">1</div>
       </div>
       <div class="row">
         <div class="col-md-4">4444</div>
         <div class="col-md-2 col-md-offset-5">222</div>
       </div>

       <div class="row">
          <div class="col-md-4">444</div>
          <div class="col-md-8">88888</div>
       </div>
        <div class="row">
          <div class="col-md-4 col-md-push-8">444</div>
          <div class="col-md-8 col-md-pull-4">88888</div>
       </div>
     </div>

3.3 下拉列表

 <h2 class="page-header">下拉列表</h2>
   <div class="dropdown ">
        <button class="btn btn-default" data-toggle="dropdown">
          登录 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">qq登录</a></li>
          <li><a href="#">微信登录</a></li>
          <li class="divider"></li>
          <li><a href="#">邮箱登录</a></li>
          <li><a href="#">手机登录</a></li>
          <li><a href="#">微博登录</a></li>
        </ul>
   </div>
</div>

Paste_Image.png