1、什么是Bootstrap:
一句话概述:Bootstrap是一个建立一个页面,可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架
2、为什么用Bootstrap:
①.响应式设计(Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机)
②.移动设备优先
③.浏览器支持
④.容易上手
3、Bootstrap用在哪:
企业网站、博客、网站后台之类的网站
注意:非电商(电商网站分类很多)
Bootstarap的容器分为两种:
固体容器(class=”container”)和流体容器【class="container-fluid"】
下面非别是固体容器和流体容器的运用(固体容器在前):
<div id="d1" class="container">
<button>原生态按钮</button>
<button class="btn btn-success">Bootstrap按钮</button>
<button class="btn btn-warning">
未读消息
<span class="badge">99+</span>
</button>
</div>
<div id="d2" class="container-fluid">
<button>原生态按钮</button>
<button class="btn btn-success">Bootstrap按钮</button>
<button class="btn btn-warning">
未读消息
<span class="badge">99+</span>
</button>
</div>
屏幕分为四种:
1、大屏幕(大桌面显示器,大于等于 1200px)
2、中等屏幕(桌面显示器,大于等于 992px)
3、小屏幕(平板,大于等于 768px)
4、超小屏幕(手机,小于 768px)
下面是设置屏幕的代码:(从上到下非别是大、中、小、超小)
<div class="a col-lg-3">盒子</div>
<div class="a col-md-3">盒子</div>
<div class="a col-sm-3">盒子</div>
<div class="a col-xs-3">盒子</div>
栅格系统(Grid System):
列偏移:class="col-lg-offset-1"
<div class="row">
<div class="a col-md-3 col-md-offset-3">单鑫鑫</div>
<div class="a col-md-3">苏柱柱</div>
<div class="a col-md-3">邓卓卓</div>
<div class="a col-md-3">王凯凯</div>
/div>
嵌套:栅格系统可以嵌套
<div class="row">
<div class="a col-md-6">
<div class="row">
<div class="a col-md-4">邓</div>
<div class="a col-md-4">卓</div>
<div class="a col-md-4">卓</div>
</div>
</div>
<div class="a col-md-6">王凯凯</div>
</div>
交换位置(右移动:push、左移动:pull)
<div class="row">
<div class="a col-md-3 col-md-push-3">单鑫鑫</div>
<div class="a col-md-3 col-md-pull-3">苏柱柱</div>
<div class="a col-md-3">邓卓卓</div>
<div class="a col-md-3">王凯凯</div>
</div>