BootStrap基础

Bootstrap

Bootstrap是前端开发框架，特点有：

1. 响应式布局，适应多平台（栅格系统）；
2. 定义了许多全局css样式，使页面好看。
3. 定义了许多组件，如：导航、下拉菜单、分页；

下载Bootstrap文件，有三个文件夹js css fonts：

1. fonts是字体、图标；
2. bootstrap.min.css是bootstrap.css的压缩文件

快速入门：

1. 在项目中复制Bootstrap的三个文件夹，并放入JQuery.js文件。
2. 从官网复制Bootstrap页面模板。
3. 从官网复制Bootstrap需要的组件。

响应式布局

栅格系统：一行12个格子，可以指定不同平台 占用不同数量的格子。

步骤：

1. 定义容器：相当于table，容器有两种
   • container：固定宽度，左右有留白
   • container-fluid：100%宽度
2. 定义行：相当于table的tr
3. 定义元素，指定不同设备，所占的格子的数量。
   • xs：手机 <768px
   • sm：平板 >=768px
   • md：普通电脑 >=992px
   • lg：大屏电脑 >=1200px

<div class="container">
	<div class="row">
		<div class="col-lg-4 col-sm-6">栅格1</div>
		<div class="col-lg-4 col-sm-6">栅格2</div>
		<div class="col-lg-4 col-sm-6 ">栅格3</div>
	</div>
</div>

全局CSS样式

1. 按钮，主要是按钮颜色好看了：

<button type="button" class="btn btn-primary">首选项</button>

2. 图片可以随着窗口缩放

<img src="img/banner_1.jpg" class="img-responsive">

组件

1. 导航条
2. 分页条

从官网看

js插件

• 轮播图

从官网看