bootstrap学习笔记（1）

1. 引入

  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

1. bootstrap的栅格系统

   辅助类：

row 用于div定义栅格系统
col-sm-n用于小设备所占多少栅格 ，（手机）
col-lg-n用于大设备所占多少栅格，（桌面显示器）
col-xs-n用于超小小设备所占多少栅格，

 <div class="row">
        <div class="col-md-3 col-lg-3">
            <img src="./image/blog.jpg" alt="" width="100%">
        </div>
        <div class="col-md-3 col-lg-3">
            <img src="./image/blog.jpg" alt="" width="100%">
        </div>
        <div class="col-md-3">
            <img src="./image/blog.jpg" alt="" width="100%">
        </div>
        <div class="col-md-3 col-lg-3">
            <img src="./image/blog.jpg" alt="" width="100%">
        </div>
    </div>

1. 导航栏
   。navbar 主要用于设置导航栏
   .navbar-inverse 对导航栏颜色取饭
   .navbar-header 定义导航栏头部样式
   .navbar-brand 设置导航栏中的每个分类