Bootstrap_基础小知识

1、引入在线Bootstrap

• 引入静态样式CSS

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

• 引入动态JavaScript

<!-- 因为bootstrap.min.js对Jquery有依赖，务必在bootstrap.min.js 之前引入jquery -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

2、尺寸

• 按钮 _.btn-group-*

• btn-group-lg——大按钮

• btn-group-sm——中按钮（默认）

• btn-group-xs——小按钮

• 输入框_input-group-*

• input-group-lg——大

• input-group——中（默认）

• input-group-sm——小

• 分页_.pagination-*

<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

####3、颜色
![](http://upload-images.jianshu.io/upload_images/3087126-f6bd40cc97c610ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+ 可用颜色 **primary / success / info / warning / danger **
+ 常用的使用颜色的标签，以上颜色都可以使用
  + 按钮 `btn btn-primary`
 + 标签 `label label-primary`
 + 列表组 `list-group-item-primary`
 + 面板 `panel panel-primary`
 + 进度条 `progress-bar-primary`
 + 警告框 `alert alert-primary`

####4、状态
+ 两种基本状态
 + **禁用 `.disabled`**
 + **激活 `.active`**
+ 常见用法
 + **禁用的菜单项 li** `<li class="disabled">`
为下拉菜单中的 `<li>` 元素添加 `.disabled` 类，从而禁用相应的菜单项
 + **禁用的链接  a ** `<a href="#" class="list-group-item disabled">`
对任何导航组件（标签页、胶囊是标签页），都可以添加 `.disabled`
 类，从而实现**链接为灰色且没有鼠标悬停效果**