【Boots学习笔记】Bootstrap学习

1、栅格系统：

     行必须包含在container容器中，内容放在列中，padding在列与列中设置间隔，通过为第一和最后一列设置复制的margin来抵消padding的影响。

2、响应式布局

3、Bootstrap 中的js插件

data属性

Tooltips

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

4、导航条

（1）导航条依赖JavaScript，响应式导航条依赖折叠（collapse）插件

（2）为导航条添加 .navvar-fixed-top类可以让导航条固定在顶部。

（3）可以包含一个.container或.container-fluid容器，让导航条居中或者自适应显示

（4）通过添加.navbar-inverse类可以改变导航条的外观，变成黑底显示。

示例：

  <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"  role="navigation">

    <div class="container">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

          <span class="sr-only">Toggle navigation</span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

        </button>

        <a href="#" class="navbar-brand">现代浏览器博物馆</a>

      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav">

          <li class="active"><a href="#">综述</a></li>

          <li><a href="#">简述</a></li>

          <li><a href="#">特点</a></li>

          <li><a href="#">关于</a></li>

        </ul>

      </div>

    </div>

  </nav>

效果：

5、下拉菜单

示例

 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>

            <ul class="dropdown-menu" role="menu">

              <li><a href="#">Chrome</a></li>

              <li><a href="#">Opera</a></li>

              <li><a href="#">FierFox</a></li>

              <li><a href="#">IE</a></li>

            </ul>

 </li>

效果：

6、滚动广告

Carousel是一个用于轮播内容的组件，也就是我们经常用到的滚动广告，或者滚动图片

效果

7、栅格系统布局

一个典型的栅格系统布局：

<div class="container">

     <div class="row">

           <div class="col-md-4">.col-md-4</div>

           <div class="col-md-4">.col-md-4</div>  

           <div class="col-md-4">.col-md-4</div>    

//只要col-md-n，中的n之和为12，便会凑成一整行 

     </div>

</div>

行（row）必须包含在.container（固定宽度）或.container-fluid(100%宽度)中

使用.col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的额，在桌面（>970px）屏幕设备上变为水平排列

8、标签页Tabs

标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间。

基本结构：

无需写任何JavaScript代码，只需简单的为页面元素指定data-toggle=“tab”，为ul添加nav和“nav-tabs class”

9、弹出框（模态框）Modal

弹出框是一个经常使用的组件，一般用于弹出提示消息、确认消息、表单等内容