Bootstrap学习笔记

转载请注明原文地址：http://www.cnblogs.com/ygj0930/p/6692706.html 

一：准备

下载：http://getbootstrap.com/

导入： jquery.js、bootstrap.min.js 、 bootstrap.min.css 

二：基本元素

 1：网格

<table>

为表格添加基础样式。

<thead>

表格标题行的容器元素（<tr>），用来标识表格列。

<tbody>

表格主体中的表格行的容器元素（<tr>）。

<tr>

一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。

<td>

默认的表格单元格。

<th>

特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。

1）普通网格

<table class="table">
  <thead>
    <tr>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
    </tr>
    <tr>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

2）条纹网格

<table class="table table-striped">

3）带表框表格

<table class="table table-bordered">

4）悬停表格

<table class="table table-hover">

5）响应式表格

<div class="table-responsive">

2：表单

1）基本表单

• 父 <form> 元素添加 role="form"。
• form中一个<div> 一个小分块，添加class =form-group 属性获得最近行距

2）内联表单

元素是内联的，向左对齐，标签并排。向 <form> 标签添加 class =form-inline属性即可。

3）水平表单

• 向父 <form> 元素添加 class=form-horizontal。
• form中一个<div> 一个小分块，添加class =form-group 属性获得最近行距

表单控件：

1）输入框:input 类型包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

2）文本框：进行多行输入的时，则可以使用文本框 textarea。

3）复选框（Checkbox）和单选框（Radio）：使用 class=checkbox-inline 或 class=radio-inline，控制它们显示在同一行上.

4）选择列表：

    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>

5）纯文本：

 <p class="form-control-static">纯文本</p>

6）帮助文本：

<span class="help-block">帮助文本块</span>

3：按钮

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

4：图片标签<img>

通过指定class属性来进行图片的多种形式显示：

img-rounded	为图片添加圆角 (IE8 不支持)
img-circle	将图片变为圆形 (IE8 不支持)
img-thumbnail	缩略图功能
img-responsive	图片响应式 (将很好地扩展到父元素)

三：布局组件

1：字体图标

如需使用图标，只需要简单地使用下面的代码即可。

<span class="glyphicon glyphicon-图标名"></span>

具体图标样式见：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

2:下拉菜单

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">菜单按钮</button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">//下拉菜单项
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">1</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">2</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">3</a>
        </li>
    </ul>
</div>

3：按钮组

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
 </div>

4：导航菜单

<ul class="nav nav-样式名">
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

主要有：

.nav nav-tabs	标签页
.nav nav-pills	胶囊式标签页
.nav nav-pills nav-stacked	胶囊式标签页以垂直方向堆叠排列的
.nav-justified	两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

 5：面包屑导航栏

<ol class="breadcrumb">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active">3</li>
</ol>

6：分页

.pager	一个简单的分页链接，链接居中对齐。
.previous	.pager 中上一页的按钮样式，左对齐
.next	.pager 中下一页的按钮样式，右对齐
.disabled	禁用链接
.pagination	分页链接
.pagination-lg	更大尺寸的分页链接
.pagination-sm	更小尺寸的分页链接
.disabled	禁用链接
.active	当前访问页面链接样式

7：各种样式标签

.label label-default	默认的灰色标签
.label label-primary	"primary" 类型的蓝色标签
.label label-success	"success" 类型的绿色标签
.label label-info	"info" 类型的浅蓝色标签
.label label-warning	"warning" 类型的黄色标签
.label label-danger	"danger" 类型的红色标签

8：徽章图标

<span class="badge">徽章文字</span>

9：标题

<div class="page-header">

10：警告信息

<div class="alert alert-success">成功！</div>
<div class="alert alert-info">信息！</div>
<div class="alert alert-warning">警告！</div>
<div class="alert alert-danger">错误！</div>

11：进度条：通过style控制进度显示

<div class="progress">
    <div class="progress-bar" role="progressbar"  
        aria-valuemin="0" aria-valuemax="100" style=" 40%;">
    </div>
</div>

12：多媒体

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="多媒体链接">//插入多媒体：视频、音频、图片
    </a>
    <div class="media-body">
        文字介绍信息
    </div>
</div>

13：列表组

<ul class="list-group">
    <li class="list-group-item">1</li>
    <li class="list-group-item">2</li>
    <li class="list-group-item">3</li>
</ul>

14：面板

<div class="panel panel-default">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

15：轮播

<div id="myCarousel" class="carousel slide">
    <!-- 轮播导航栏 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 轮播内容-->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
        </div>
        <div class="item">
            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        </div>
    </div>
    <!-- 轮播翻页：向前、向后-->
    <a class="carousel-control left" href="#myCarousel" 
        data-slide="prev">&lsaquo;
    </a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next">&rsaquo;
    </a>
</div>