小技巧
- 如果是input标签，则一般放在label标签内
- checkbox表示多选框，radio表示单选框
基本知识
- container-fluid和container是bootstrap中的两种不同类型的外层容器，
.container属性用于固定宽度并支持响应式布局的容器
_.container-fluid属性用于100%宽度，占据全部视口的容器 - bootsrap中有一个class属性交租well，它的作用是为设定的列创造出一种视觉上的深度感
按钮
- btn属性：凡是按钮均需要添加btn属性
- btn-block属性：表示该按钮为块级元素
- btn-primary属性：表示该按钮的颜色为应用的主要颜色
- btn-info属性：添加了该属性的按钮颜色为浅蓝色，表示用户可能会采取的操作
- btn-danger属性：红色按钮，表示该操作具有“破坏性”。
- btn-default属性：按钮默认属性
bootstrap的响应式网格布局
在bootstrap中对四种屏幕宽度进行媒体查询，
/* 超小屏幕（手机，小于 768px） /
/ 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） /
/ 小屏幕（平板，大于等于 768px） /
@media (min-width: @screen-sm-min) { ... }
/ 中等屏幕（桌面显示器，大于等于 992px） /
@media (min-width: @screen-md-min) { ... }
/ 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
- 用途：可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。
- 注意：bootstrap的网格一行默认是由12个小单元格组成,一行中的元素通过一个带有row属性的div元素包裹，其内部的子元素通过添加col-md-*来指定宽度，*表示数字，md表示该页面在中等屏幕的设备上显示，该值可以根据实际设备的屏幕大小调整
- 使用：实例：用于手机、平板、桌面
Paste_Image.png
代码如下：
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8 column-1">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4 column-2">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
以上代码中以column1为例说明：当为超小屏幕时，column-1占用12列，当为小屏幕时，column-1占用6列，当为中等屏幕时占用8列，这样便实现了根据屏幕的大小来调整宽度
Font Awesome 图标库
- 一般通过i标签添加，如为一个按钮添加一个图标：
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button> - 图标类型
删除意义的图标： <i class = "fa fa-trash></i>"
点赞意义的图标： <i class = "fa fa-thumbs-up"></i>
提交意义的图标： <i class = "fa fa-paper-plane"></i>
表单控件
- 输入框input：在bootstrap中使用input是也必须添加type类型，如果没有指定type类型，将无法得到正确的样式；同时，为了让控件在各种表单风格中样式不出错，需要添加类名"form-control"
如： <input type="text" class="form-control" placeholder="Enter User Name"> - 下拉选择框select控件：
- 文本域textarea控件:
导航元素
- 表格导航菜单：
<ul class="nav nav-tabs"></ul> - 胶囊式导航：
<ul class="nav nav-pills"></ul> - 垂直的胶囊导航：
<ul class="nav nav-pills nav-stacked"></ul> - 两端对齐的导航：
<ul class="nav nav-tabs nav-justified"></ul>
主要起作用的的是nav-justified类名 - 使导航菜单中的一个链接项禁用:hover状态，对该项添加disabled类
<ul class="nav nav-tabs">
<li><a href="#">WEB</a></li>
<li><a href="#">IOS</a></li>
<li class="disabled"><a href="#">JAVA</a></li>
<li><a href="#">Andrion</a></li>
</ul> - 带有下拉菜单的胶囊
<h3>导航下拉菜单：</h3>
<ul class="nav nav-pills">
<li class = "active"><a href="#">HOME</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">IOS</a></li>
<li class="dropdown"> //该 li 标签是下拉菜单的实现
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
WEB <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li class="divider"></li>
<li><a href="#">JQUERY</a></li>
</ul>
</li>
<li><a href="#">ANDRION</a></li>
</ul>
导航栏
-
默认的导航栏
创建一个默认的导航栏的步骤如下：- 向<nav>标签添加 class.navbar、navbar-default属性，并添加 role="navigation，role属性有利于增加可访问性
- 向<div>元素添加class.navbar-header，内部包含带有class.navbar-brand的a元素，会让文本看起来大一号
代码如下：
<h3>默认的导航栏</h3>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand">Brand</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">IOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">JAVA
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
-
响应式的导航栏
- 为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有class.collapse、 .navbar-collapse的<div>中
- 折叠起来的导航栏实际上是一个带有class.navbar-toggle以及两个data-元素的按钮
- 默认的导航与响应式导航主要在与1和2两点中
代码如下：
<h3>响应式的导航栏</h3>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</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="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">IOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
-
bootstrap中的图标
添加方法：
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>- 添加**class.glyphicon **， class.glyphicon-user和class.glyphicon-log-in表示需要使用ICON图标名，具体可以查看各个图标对应的类名，网址：bootstrap图标
-
导航栏的定位
-
将导航栏固定在顶部：给nav标签添加class.navbar-fixed-top
注意：为了防止导航栏与页面主题中的其他内容的顶部相交错，请向<body>标签添加至少50像素的内边距 （padding），内边距的值可以根据需要进行调整
将导航栏固定在底部：给nav标签添加class.navbar-fixed-bottom
使导航栏随着页面一起滚动：给nav标签添加.navbar-static-top，使用该class，不要求向<body>添加内边距
-
倒置的导航栏
创建一个带有黑色背景白色文本的倒置的导航栏，只需要简单的向.navbar class添加.navbar-inverse class即可
