Bootstrap3
Bootstrap3 环境搭建
下载依赖文件
bootstrap-3.4.1
jquery-1.12.4
快速搭建Bootstrap项目
1.将下载好的Bootstrap压缩包解压到项目目录中
2.在index.html中键入如下代码进行引入
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap3环境搭建</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<h1>你好,Bootstrap3</h1>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
Bootstrap3 栅格系统
布局容器
固定宽度并支持响应式布局的容器
类 尺寸说明
.col-xs-* 手机 (<768px)
.col-sm-* 平板 (≥768px)
.col-md-* 桌面 (≥992px)
.col-lg-* 桌面 (≥1200px)
每行有12列，可以通过数字调整列宽
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap3</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.row{margin-bottom: 10px;}
.row div{border: 1px solid red;}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-5">.col-md-5</div>
<div class="col-md-5">.col-md-5</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-7">.col-md-7</div>
<div class="col-md-5">.col-md-5</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-9">.col-md-9</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-10">.col-md-10</div>
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-11">.col-md-11</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-12">.col-md-12</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
如果总列数超出12列，则超出列将进行流式布局，在下一行显示
超小屏幕
手机 (<768px) 小屏幕
平板 (≥768px) 中等屏幕
桌面 (≥992px) 大屏幕
桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏
.visible-md-* 隐藏 隐藏 可见
.visible-lg-* 隐藏 隐藏 隐藏
.hidden-xs 隐藏 可见 可见
.hidden-sm 可见 隐藏 可见
.hidden-md 可见 可见 隐藏
.hidden-lg 可见 可见 可见
Bootstrap3 全局类
排版
文本对齐类
文本左对齐
文本居中对齐
文本右对齐
文本两端对齐
文本不换行
文本的大小写类文本全小写
文本全大写
文本首字母大写，其余字母小写
让引用内容右对齐移除列表默认样式Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- list
- list
- list
- list
- list
- list
- list
- list
- dt-description
- dd-description
...
...
...
...
...
鼠标悬停在行或单元格上时所设置的颜色
标识成功或积极的动作
标识警告或需要用户注意
标识危险或潜在的带来负面影响的动作
标识普通的提示信息或动作
响应式表格
...
...
...
...
...
...
...
情境背景色...
...
...
...
...
关闭按钮 三角符号 快速浮动Inbox 42
按钮中的徽章
Example page header Subtext for header
Media heading
...Media heading
...Media heading
...-
......
-
........................
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
- 14 Cras justo odio
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
Panel title
...
<table class="table"></table>
<ul class="list-group">
...
</ul>
@fat
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
one
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
two
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">1...</div>
<div role="tabpanel" class="tab-pane" id="profile">2...</div>
<div role="tabpanel" class="tab-pane" id="messages">3...</div>
<div role="tabpanel" class="tab-pane" id="settings">4...</div>
</div>
HTML
鼠标悬浮提示
鼠标悬浮提示
鼠标悬浮提示
鼠标悬浮提示
弹出框
点击后弹出/隐藏
脚本
HTML
可消失弹出框
脚本
HTML
可消失的弹出框
鼠标悬浮显示
脚本
HTML
可消失的弹出框
按钮
切换效果
Checkbox效果
