Bootstrap 响应式网页

什么是响应式网页
如何编写响应式网页
Bootstrap 起步
全局CSS样式
组件
bootstrap插件函数，less语言

什么是响应式网页：

可以适应用户的使用设备，进行相应的布局，无需编写各种不同的版本。

如何编写

流式网格布局
可伸缩的图片和文字（字体和图片的大小都用相对单位）
CSS3 meida query技术:media queries写法实例/W3Cplus/自己整理

代码演示

 <!doctype html>
<html>
    <head>
        <title></title>
            <meta charset="utf-8">
            <meta name="viewport"  content="width=device-width,initial scale=1,user-scalable=no">
    </head>
   <body>
   </body>
</html>

css部分
          @media screen and (min-width:992px){
               .container {
                      width: 750px;
                      margin: 0 auto;
                      }
               .left {
                       width: 25%;
                      }
               }
          @media screen and (min-width:768px)and(max-width:991px){
            .container {
                    width: 750px;
                    margin: 0 auto;
                   }
            .left {
                     width: 25%;
                   }
            .middle {
                   width: 75%;
                   }
               }
        @media screen and (max-width: 767px){
            .container {
                   width: 100%;
                   }
             .middle {
                   width: 100%;
                   }
               }

bootstrap起步

环境搭建

声明
```
<!DOCTYPE html>
<html lang="zh-cn">
```

元数据和兼容性

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial scale=1'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

引入CSS样式

<link rel="stylesheet"  href="css/bootstrap.css">

脚本

<srcipt src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>

完整代码演示：

  <!DOCTYPE html>
  <html lang="zh-cn">
        <head>
                <meta charset="utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title></title>
                <link href="css/bootstrap.css" rel="stylesheet">
         </head>
         <body>
               <h1>This is TITLE ONE</h1>
               <h1>这是一号标题</h1>
               <br><br><br><br><br><br><br><br><br><br><br><br><br>
               <script src="js/jquery-1.11.3.js"></script>
               <script src="js/bootstrap.js"></script>
         </body>
</html>

CSS全局样式

CSS全局样式（即一些通用样式）按钮，图片，列表，表格，栅格布局系统
```
    - body{
             background:#fff;
        }
```
- 为所有的链接设置了基本颜色@link-color,并且当链接状态处于hover时候，才添加下划线。
按钮
- 按钮的五种颜色
  btn btn-danger:红色，危险色
  btn btn-warning：黄色，警告色
  btn btn-success：绿色，成功色
  btn btn-info：蓝色，提示色
  btn btn-primary：深蓝色，基础色
- 按钮的四种大小
  btn-lg:大号
  btn-sm:小号
  btn-xs:超小号
  综合按钮大小，颜色写法：<a href="#" class="btn btn-danger btn-xs">操作</a>
图片
圆角图片： img-rounded
圆形图片: ing-circle
响应式图片: img-response/垂直分布/
列表
取消项目提示符的列表：<ul class="list-unstyled">/没有前面的小图标/
行内列表：<ul class="list-inline">/列表在一行显示/

表格
基础类：<table class="table">
带边框的：<table class="table table-bordered">
隔行变色：<table class="table table-striped">
带鼠标悬停：<table class="table table-hover">
响应式表格：<div class="table-responsive">/需要在父元素设置/
<table class="table">
- 小知识点：如何给每行每列设置单独的颜色

         <tr class="warning">
             <td class="success">1001</td>
             <td>唐牧</td>
             <td>13501234567</td>
             <td>海淀区万寿西街201号</td>
             <td>
               <a class="btn btn-success btn-xs" href="#">详情</a>
             </td>
         </tr>
- 小知识点：Bootlint 的页面上，它能自动检查某些常见的 HTML、CSS使用方面的错误。  使用方法：

 <script>
   (function () {
   var s = document.createElement("script");
   s.onload = function () {
   bootlint.showLintReportForCurrentDocument([]);
    };
   s.src = "js/bootlint.js";
   document.body.appendChild(s)
   })();
</script>

栅格布局系统
1.最外层需要使用容器 .container .container-fluid
2. 容器中声明行 div.row
3. 行中声明列 div.col
语法解释:

 <h3>一行中不等宽的多列</h3>
  <!--1:2:1的三列-->
  <div class="container">
      <div class="row">
          <div class="col-md-3">MD-3</div>
          <div class="col-md-6">MD-6</div>
          <div class="col-md-3">MD-3</div>
      </div>
  </div>

表单（默认表单，水平表单，内联表单）
默认表单：

![1491481665(1).png](http://upload-images.jianshu.io/upload_images/4167871-b45ae1ea1fd5fa22.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

水平表单