bootstrap的一些导航栏和列表

响应式导航栏

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式（固定写法）：

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

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

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

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

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

</button>

    3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。如需要折叠的div代码段：

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

      <ul class="nav navbar-nav">

      …

      </ul>

</div>

    窄屏时显示的图标代码段：

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

  ...

</button>

 

反色导航条

navbar-default类名换成navbar-inverse

分页导航条

Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入类名pagination的方法 。通过“pagination-lg”让分页导航变大；通过“pagination-sm”让分页导航变小：

翻页导航

    分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。ul中加入pager类。li中previous：让“上一步”按钮居左  next：让“下一步”按钮居右

 

标签label样式也提供了多种颜色：

  ☑   label-deafult:默认标签，深灰色

  ☑   label-primary：主要标签，深蓝色

  ☑   label-success：成功标签，绿色

  ☑   label-info：信息标签，浅蓝色

  ☑   label-warning：警告标签，橙色

  ☑   label-danger：错误标签，红色

徽章：

   像标签一样，使用span标签来制作，然后为他加入badge类：

缩略图

   通过“thumbnail”样式配合bootstrap的网格系统来实现。

   还可以让缩略图配合标题、描述内容，按钮等。缩略图下方div采用caption类

警示框

alert类名：再加上alert-success  alert-info  alert-warning  alert-danger代表不同的警示效果

alert-dismissable 代表警示框可以关闭。在button标签中加入class="close"类，实现警示框关闭按钮的样式。

<div class="alert alert-success alert-dismissable" role="alert">

    <button class="close" type="button"data-dismiss="alert">×</button>

    恭喜您操作成功！

</div>

alert-link 警示框链接 <a>标签中

进度条

    两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。设置自容器的style=“width=*%”即可。

    progress-bar-info：表示信息进度条，进度条颜色为蓝色

  ☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

  ☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

  ☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

    条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”

    动态进度条在进度条“progress progress-striped”两个类的基础上再加入“active”类名就能让进度条动起来。

    层叠进度条：多个子容器且和不超过100% progress-bar-striped设置单个子容器是否有条纹

      带Label的进度条：只需要在进度条中添加你需要的值eg：20%

媒体对象：

    媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容

       媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片

       媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容

       媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选。

 常常使用“pull-left”。“pull-right”来控制媒体对象中的对象浮动方式。

嵌套媒体对象

媒体对象列表： ul/li

   ul的类名写为：media-list

   li是一个个单独的media

列表组(active和disabled代表状态)

 基础列表组主要包括两个部分：

  ☑  list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

  ☑  list-group-item：列表项，常用的是li元素，当然也可以是div元素

带徽章的列表组

   徽章组件和基础列表组结合在一起。需要在“list-group-item”中添加徽章组件“badge”。

带链接的列表组

   .1 在“list-group-item”中添加链接a标签

      不足之处，就是链接的点击区域只在文本上有效.希望在列表项的任何区域都具备可点击。这个时候就需要在链接标签上增加额外的样式：“display:block”；

   .2 将ul.list-group使用div.list-group来替换，而li.list-group-item直接用a.list-group-item来替换 

     Bootstrap框加在链接列表组的基础上新增了两个样式（a标签中）：

        ☑  list-group-item-heading：用来定义列表项头部样式

        ☑  list-group-item-text：用来定义列表项主要内容

列表项li或a中

  ☑  list-group-item-success：成功，背景色绿色

  ☑  list-group-item-info：信息，背景色蓝色

  ☑  list-group-item-warning：警告，背景色为黄色

  ☑  list-group-item-danger：错误，背景色为红色

面板  

      div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”。panel-primary：重点蓝    panel-success：成功绿

  panel-info:信息蓝  panel-warning：警告黄   panel-danger：危险红

      另外在里面添加了一个“div.panel-body”来放置面板主体内容。 panel-heading：用来设置面板头部样式。panel-footer：用来设置面板尾部样式

    面板中嵌套表格：在panel-body中添加表格的写法

      面板中嵌套列表组：在panel-body中添加列表组的写法