Bootstrap学习笔记

一、选项卡

基于<ul>并添加 .nav-tabs 或者是 .nav-pills 类即可创建一个选项卡，为任一导航组件（标签页、pills或列表）添加 .disabled 类，均可让链接变灰并失去鼠标悬停效果。但是链接仍然是可以点击的，除非你将链接的href属性去除，你还可以写JavaScript代码阻止用户点击链接。例如：

<!--设置选项卡的展示样式：.nav-tabs  .nav-pills

如果想创建堆叠式的排列，可以在nav-tabs（nav-pills）的后面添加nav-stacked -->

<ul class="nav nav-tabs">

<!--class="active"表示默认激活第一个选项卡-->

<li class="active"><a href="#tab1" data-toggle="tab">选项一</a></li>

<li><a href="#tab2"  data-toggle="tab">选项二</a></li>

<li><a href="#tab3"  data-toggle="tab">选项三</a></li>

</ul>

 

<div class="tab-content">

<div class="tab-pane active" id="tab1"><p>选项一的内容</p></div>

<div class="tab-pane" id="tab2"><p>选项二的内容</p></div>

<div class="tab-pane" id="tab3"><p>选项三的内容</p></div>

</div>

二、导航条

在页面上添加导航条组件可以用 .navbar 类来定义，然后用 .navbar-inner 类将导航中的条目装载在一起，导航条中条目可以是无序列表,将导航条放入 .container 中就可以限制其宽度。如果想在导航条目中添加分隔符，只需增加一个空白的条目并为其设置一个类即可，如果想要在导航中添加一个表单，需要包含在 .navbar-form 类中，如果是搜索表单可以定义为 .navbar-search 。例如：

<div class="navbar">

  <div class="navbar-inner">

  <!--定义导航的Title-->

    <a class="brand" href="#">Title</a>

    <ul class="nav">

      <li class="active"><a href="#">首页</a></li>

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

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

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

  <!--添加分隔符-->

  <li class="divider-vertical"></li>

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

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

 

   <!--在导航中添加一个普通表单

  <form class="navbar-form pull-right">

        <input type="text" class="span2">

        <button type="submit" class="btn">Submit</button>

      </form>

  -->

 

      <!--在导航中添加一个搜索表单-->

  <form class="navbar-search pull-right">

  <!--为输入框添加.search-query即可获得一个搜索表单-->

       <input type="text" class="search-query" placeholder="Search">

      </form>

    </ul>

  </div>

</div>

如果想在导航条目中加入下拉菜单，只需要在导航条目 <li> 的后面加上：

<!--添加一个下拉菜单-->

  <ul class="nav">

        <li class="dropdown">

         <a href="#" class="dropdown-toggle" data-toggle="dropdown">

          Account

          <b class="caret"></b>

          </a>

          <ul class="dropdown-menu">

             <li><a tabindex="-1" href="#">Action</a></li>

             <li><a tabindex="-1" href="#">Another action</a></li>

          </ul>

         </li>

       </ul>

三、面包屑

面包屑组件可以用 .breadcrumb 类来定义，在页面上可以用于位置（路径）提示。例如：

<ul class="breadcrumb">

<li><a href="#">首页</a> <span class="divider">/</span></li>

<li><a href="#">Library</a> <span class="divider">/</span></li>

<li class="active">Data</li>

</ul>

四、分页

分页用 .pagination 类来定义，定义如下：

<!--.pagination-centered（中间）.pagination-rigth（右边）-->

     <div class="pagination pagination-centered">

 <ul>

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

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

 <li class="active"><a href="#">2</a></li>

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

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

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

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

 </ul>

 </div>

可根据不同情况定制链接。用 .disabled 标明链接不可点击，用 .active 标明当前页。

<div class="pagination">

<ul>

<li class="disabled"><a href="#">«</a></li>

<li class="active"><a href="#">1</a></li>

...

</ul>

</div>

你还可以使用span标签替代a 标签，这样就去除了点击功能，同时又能保留需要的样式。

<div class="pagination">

<ul>

<li class="disabled"><span>«</span></li>

<li class="active"><span>1</span></li>

...

</ul>

</div>

如果需要更改分页器的大小，在class="pagination”里面添加 .pagination-large 、.pagination-small 或 .pagination-mini 就可以改变分页尺寸。如果需要定义“上一页”“下一页”的翻页样式”可以用 .page 类：

  <ul class="pager">

 <li ><a href="#">前一页</a></li>

 <li ><a href="#">后一页</a></li>

 </ul>

 

  <!--将链接放页面两侧-->

 <ul class="pager">

 <li class="previous"><a href="#">前一页</a></li>

 <li class="next"><a href="#">后一页</a></li>

 </ul>

分页也可使用 .disabled 工具类让链接处于禁用状态，添加在<li>的 calss 属性里面。

• （文章来源：http://www.mfqyw.com/）