Bootstrap学习笔记
Bootstrap笔记
排版
标题
规则
为了让非标题元素使用相同的样式，还定义了.h1~.h6六个类名。
段落
规则
- 全局文本字号为14px(font-size)
- 行高为1.42857143（line-height），大约是20px
- 字体为”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family）
强调内容
对于元素使用.lead类。
粗体
使用或标签让文本直接加粗。
斜体
或使用斜体
列表
.list-unstyled去除默认的列表样式风格。
.list-inline实现内联列表。
.dl-horizontal给定义列表实现水平显示效果。
代码
.pre-scrollable控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
表单
input、select、textarea有一个定制的类名form-control，效果为：
- 宽度变成了100%
- 设置了一个浅灰色（#ccc）的边框
- 具有4px的圆角
- 设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
- 设置了placeholder的颜色为#999
表单禁用状态
在相应的表单控件上添加属性“disabled”
如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
如果legend中有输入框的话，这个输入框是无法被禁用的。
表单控件状态(验证状态)
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名
显示对号或叉号
要在对应的状态下添加类名“has-feedback”
表单提示信息
help-block提示信息
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的span>
<span class="glyphiconglyphicon-ok form-control-feedback">span>
div>
…
form>
行内提示信息
基础表单
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱：label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
div>
<div class="form-group">
<label for="exampleInputPassword1">密码label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
label>
div>
<button type="submit" class="btn btn-default">进入邮箱button>
form> 
水平表单
实现水平表单效果，要满足以下两个条件：
- 在
元素是使用类名“form-horizontal” - 配合Bootstrap框架的网格系统
form-horizontal作用：
- 设置表单控件padding和margin值
- 改变“form-group”的表现形式，类似于网格系统的“row”
如果表单使用了类名“form-horizontal”，其中“form-group”就相当于网格系统中的“row”。换句话说，如果没有这样做，要通过网格系统来控制表单控件宽度，就需要这样使用：
内联表单
form-inline设置内联表单
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">邮箱label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">密码label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
label>
div>
<button type="submit" class="btn btn-default">进入邮箱button>
form> 
input
input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大
select
<form role="form">
<div class="form-group">
<select class="form-control">
<option>1option>
<option>2option>
<option>3option>
<option>4option>
<option>5option>
select>
div>
<div class="form-group">
<select multiple class="form-control">
<option>足球option>
<option>游泳option>
<option>慢跑option>
<option>跳舞option>
<option>funnyoption>
select>
div>
form> 
textarea
rows定义其高度，cols设置其宽度。
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3">textarea>
div>
form>checkbox和radio
- 不管是checkbox还是radio都使用label包起来了
- checkbox连同label标签放置在一个名为“
.checkbox”的容器内 - radio连同label标签放置在一个名为“
.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。
<form role="form">
<h3>案例1h3>
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
label>
div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
label>
div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
label>
div>
form> 
- 如果checkbox需要水平排列，只需要在label标签上添加类名“
checkbox-inline” - 如果radio需要水平排列，只需要在label标签上添加类名“
radio-inline”
网格系统
基本用法
列偏移
col-md-offset-*实现列偏移
col-md-offset-4，表示该列向右移动4个列的宽度
列排序
col-md-push-*例如col-md-push-8向右移动8个距离
col-md-pull-*例如col-md-pull-4向左移动4个距离
列嵌套
<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6div>
<div class="col-md-6">col-md-6div>
div>
div>
<div class="col-md-4">col-md-4div>
div>
<div class="row">
<div class="col-md-4">.col-md-4div>
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-4">col-md-4div>
<div class="col-md-4">col-md-4div>
<div class="col-md-4">col-md-4div>
div>
div>
div>
div>
下拉菜单
基本用法
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
<div class="dropdown">div>2、使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
data-toggle="dropdown"3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
class="dropdown-menu">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
选择你喜欢的水果
<span class="caret">span>
button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果a>li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉a>li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨a>li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃a>li>
ul>
div>
.divider添加下拉分隔线
.dropdown-header添加下拉菜单的标题
下拉菜单默认是左对齐的，在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类可以右对齐。
在上应用当前状态（.active）和禁用状态（.disabled）
按钮组
将btn-group放在btn-toolbar中可以创建按钮工具栏。
btn-group-vertical创建垂直按钮组。
等分按钮
在按钮组“btn-group”上追加一个“btn-group-justified”类名
在制作等分按钮组时，请尽量使用
标签元素来制作按钮，因为使用标签元素时，使用display:table在部分浏览器下支持并不友好。
<div class="btn-wrap">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">首页a>
<a class="btn btn-default" href="#">产品展示a>
<a class="btn btn-default" href="#">案例分析a>
<a class="btn btn-default" href="#">联系我们a>
div>
div>导航
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。
<ul class="nav nav-tabs">
<li><a href="##">Homea>li>
<li><a href="##">CSS3a>li>
<li><a href="##">Sassa>li>
<li><a href="##">jQuerya>li>
<li><a href="##">Responsivea>li>
ul>效果为：
标签形tab导航
<ul class="nav nav-tabs">
<li class="active"><a href="##">Homea>li>
<li><a href="##">CSS3a>li>
<li><a href="##">Sassa>li>
<li><a href="##">jQuerya>li>
<li class="disabled"><a href="##">Responsivea>li>
ul>效果为：
胶囊形(pills)导航
<ul class="nav nav-pills">
<li class="active"><a href="##">商品介绍a>li>
<li><a href="##">规格参数a>li>
<li><a href="##">商品评价a>li>
<li class="disabled"><a href="##">售后保证a>li>
ul>
自适应导航
nav-justified自适应导航
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="##">Homea>li>
<li><a href="##">CSS3a>li>
<li><a href="##">Sassa>li>
<li><a href="##">jQuerya>li>
<li><a href="##">Responsivea>li>
ul>导航加下拉菜单（二级导航）
将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul
<ul class="nav nav-pills">
<li class="active"><a href="##">首页a>li>
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="##">CSS3a>li>
<li><a href="##">Sassa>li>
<li><a href="##">jQuerya>li>
<li><a href="##">Responsivea>li>
ul>
li>
<li><a href="##">关于我们a>li>
ul>
面包屑式导航
<ol class="breadcrumb">
<li><a href="#">首页a>li>
<li><a href="#">名师简介a>li>
<li class="active">大漠li>
ol> 
导航条
导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式
基础导航条
- 首先在制作导航的列表(
navbar-nav” - 在列表外部添加一个容器（
div），并且使用类名“navbar”和“navbar-default”
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页a>li>
<li><a href="##">系列教程a>li>
<li><a href="##">名师介绍a>li>
<li><a href="##">成功案例a>li>
<li><a href="##">关于我们a>li>
ul>
div>
为导航条添加标题、二级菜单及状态
通过“navbar-header”和“navbar-brand”来添加标题
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网a>
div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页a>li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="##">CSS3a>li>
<li><a href="##">JavaScripta>li>
<li class="disabled"><a href="##">PHPa>li>
ul>
li>
<li><a href="##">名师介绍a>li>
<li><a href="##">成功案例a>li>
<li><a href="##">关于我们a>li>
ul>
div>
带表单的导航条
navbar-form带表单的导航条
navbar-left”让表单左浮动
navbar-right让表单右浮动
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网a>
div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页a>li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret">span>a>
<ul class="dropdown-menu">
<li><a href="##">CSS3a>li>
<li><a href="##">JavaScripta>li>
<li class="disabled"><a href="##">PHPa>li>
ul>
li>
<li><a href="##">名师介绍a>li>
<li><a href="##">成功案例a>li>
<li><a href="##">关于我们a>li>
ul>
<form action="##" class="navbar-form navbar-right" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
div>
<button type="submit" class="btn btn-default">搜索button>
form>
div>效果为：
固定导航条、
.navbar-fixed-top：导航条固定在浏览器窗口顶部.navbar-fixed-bottom：导航条固定在浏览器窗口底部
从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：
body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}响应式导航条
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
2、保证在窄屏时要显示的图标样式（固定写法）
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigationspan>
<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 navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页a>li>
<li><a href="##">系列教程a>li>
<li><a href="##">名师介绍a>li>
<li><a href="##">成功案例a>li>
<li><a href="##">关于我们a>li>
ul>
div>
div>其它内置组件
警示框
警示框的链接
<div class="alert alert-success" role="alert">
<strong>Well done!strong>
You successfully read
<a href="#" class="alert-link">this important alert messagea>
.
div>
<div class="alert alert-info" role="alert">
<strong>Heads up!strong>
This
<a href="#" class="alert-link">alert needs your attentiona>
, but it's not super important.
div>