bootstrap学习

• 1.引入jar的方法

<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>

• 2.下拉列表的使用？

<div class="dropdown">
         <!--data-toggle="dropdown" 是关联列表-->
         <button class="btn btn-default dropdown-toggle"data-toggle="dropdown">
             下拉列表
             <span class="caret"></span> <!--下拉菜单角标-->
         </button>
         <ul class="dropdown-menu"> <!--下拉菜单列表内容-->
             <li><a>测试</a></li>
             <li><a>测试</a></li>
         </ul>
     </div>

• 3.导航栏的设置？

<ul class="nav nav-tabs">
          <li class="active"><a>导航1</a></li>
          <li><a>导航1</a></li>
</ul>
其中：
<ul class="nav nav-pills"> 代表点击样式
<ul class="nav nav-stacked"> 代表竖直的样式

• 4.分页处理？

<div>
      <ul class="pagination">
          <li class="active"><a>1</a></li>
          <li><a>2</a></li>
          <li><a>3</a></li>
          <li><a>4</a></li>
          <li><a>5</a></li>
      </ul>
  </div>

• 5.进度条的设置？

<div>
      <div class="progress-bar" style="width: 60%;">
          60%
      </div>
  </div>

• 6.列表的设置

<div>
      <ul class="list-group">
          <li class="list-group-item ">列表1<span class="badge">3</span></li>
          <li class="list-group-item active">列表2</li>
          <li class="list-group-item ">列表3<span class="badge">3</span></li>
      </ul>
  </div>

• 7.面板的设置？

<div>
      <div class="panel panel-primary">
          <div class="panel-heading">
              弹出层
          </div>
          <div class="panel-body">
              具体内容
          </div>
          <div class="panel-footer">
              脚注
          </div>
      </div>
  </div>

• 8.什么是响应式布局？

布局根据屏幕的宽高进行相应的改变。
bootstrap就是网页相应式布局开发设计的第三方框架。
用户体验更好。