首先在这里我先开始学习bootstrap3的使用
首先有个前提 我默认大家都已经熟悉html、css、JavaScript以及其中用到的html5和css3的知识了，这里学习的bootstrap具相当于只是为了学习一个工具用于快速开发项目
有一点就是 能使用bootstrap的就尽量不用自己写的样式和js
下载地址
生产环境上的这个是用于上线是后使用的版本 这个是经过压缩的
https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
源码 未经过压缩 可以用来学习使用
https://github.com/twbs/bootstrap/archive/v3.3.7.zip
为了在上线后为了减轻访问服务器频繁调用这些js css文件带来的服务器压力我建议在上线时候可以使用bootcdn加速
在需要使用bootstrap的文件当中加入以下代码
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
可以直接将模板文件套进去
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
栅格系统通过行列布局
行row必须包含在.container(有外边距15px)或者.container-fluid(100%宽度)当中
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
row有外边距为-15px可以消掉.container的内边距
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 基本用不上col-lg-*
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> 使用列偏移 <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
使用.col-md-offset-*类可以将列向右侧偏移
通过使用 .col-md-push-* 和 .col-md-pull-*
一个是推到右边
标题以及副标题
标题为1到6
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
全局变量
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body>
元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）
添加.head让段落突出
<p class="lead">...</p>内联文本
<mark>highlight</mark> text.
被删除
<del>asdf</del>
无用文本
<s></s>
插入文本
<ins></ins>
带下划线
<u></u>
小号文本
<small></small>
着重
<strong></strong>
斜体
<em></em>
文本对齐
<p class="text-center"></p>
改变大小写
<p class="text-lowercase"></p> uppercase capitalize
缩略语
<abbr title="hello">显示hello</abbr>
地址使用
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
引用
<blockquote></blockquote>
风格
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
列表
ul>li 在ul上添加类
list-unstyled无样式列表
list-inline 内敛列表
表格：
table 添加类
.table 少量的内补和水平分割线
.table-striped 斑马条纹 给tbody内的行添加条纹 使用到nth-child实现 IE8无法使用
.table-bordered 带边框的表格
.table-hover鼠标悬停效果
.table-condensed让表格更加紧凑
.table-responsive响应式表格 小屏幕显示滚动条大屏幕滚动条消失
tr上添加类
.success
.danger
.warning
.info
.active
表单使用
所有用到form-control类的空间都是以100%宽度显示
将label和控件一起放在一个表单组当中是最好的排列div.form-group
如下
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
不要将表单组合输入框混合使用锦衣将输入框放在表单组当中（这里意思是除了输入框要这样其他的不规定）
form添加类
form-inline水平显示 使用左头部的搜索框 当宽度为手机屏幕时候 折叠显示
<form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
建议使用到label 如果没有就不方便阅读得加placeholder 或者可以设置label的class为sr-only
特殊使用
<div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> <div class="input-group-addon">.00</div> </div> </div>
form上添加
form-horizontal水平排列表单
水平排列表单
<div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div>
输入框的样式还与type属性相关
text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
文本域
<textarea class="form-control" rows="3"></textarea>
单选框
<div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> Option two is disabled </label> </div>
显示在一行上面
<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label>
不带文本的label
<div class="checkbox"> <label> <input type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> </label> </div> 需要添加aria-label
<select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 显示多项
静态控件
<p class="form-control-static">email@example.com</p>
禁止状态
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
使用fieldset包含所有控件为fieldset添加disabled 应用 ：用户为登录状态不可评论表单
只读状态
readonly
帮助文字
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
控件添加样式
应用在JavaScript验证时候动态添加类
<div class="form-group has-success">
输入框图标
<div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> </div>
设置控件form-control的高度input-lg和和宽度col-sm-*
快速设置form-horizental尺寸可以在form-group上添加 form-group-sm
<div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div>
按钮
btn btn-info btn-danger
导航栏和导航只支持buttjon元素
btn-block叨叨父级元素的100%而且为块级标签
激活状态
active 类
disabled = "disabled"禁用状态
链接a添加disabled类达到禁用状态
响应式图片
image-responsive再添加img-block使居中
辅助类 文本样式
p.text-danger 改变文本的颜色
p.bg-danger改变文本的背景颜色
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
<span class="caret"></span>
快速浮动
<div class="pull-left">...</div> <div class="pull-right">...</div>
清除浮动
<!-- Usage as a class --> <div class="clearfix">...</div>
显示或者隐藏内容
<div class="show">...</div> <div class="hidden">...</div>
响应式类
.visible-sm-*
.visible-sm
.hidden-sm-*
.hiddem-sm
