Bootstrap入门

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>