前端三剑客-08bootstrap

bootstrap

基于jQuery，也就意味着你在用bootstrap要先导入jQuery文件

布局容器

左右有固定留白

row 独占一行

<div class="container-fluid c1"></div>  全屏展示

栅格系统

一个row就表示一行(这一行默认给你均分成了12份,每一份你还可以均分成12份)

首先使用bootstrap先写一个布局容器

<div class='container'></div>	两边有空间
<div class='container-fluid'></div>		无空间

	<div class="row">  一行
		<div class="col-md-6 col-xs-6"></div>  控制你占当前行的多少份(md通常为正常电脑屏幕)
	col-xs-6	意思为无论多大的显示器, 当前标签都找对应12份的6份

列偏移

col-md-offset-3 以md模式偏移3 常搭配 col-m-6 => 6+ 23=12 col-md-8 col-md-offset-2 => 8+22=12

浮动

pull-left

pull-right	pull-left

文本

text-center 对称居中

表格

按钮

button btn-sm 小型按钮

        <button class="btn btn-info">button</button>
        <button class="btn btn-warning">button</button>
        <button class="btn btn-danger">button</button>
        <button class="btn btn-primary">button</button>
		<a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>

​
btn-block 占父标签100%

导航

复制粘贴吧

inverse 改原本的 default 可以变成黑色