Bootstrap的使用方法（一）

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

1. 进入官方网站下载文件
2. 解压文件，放到项目中
3. 引入CSS文件和JS文件

<link rel="stylesheet" type="text/css" href="bootstrap-3.4.1-dist/css/bootstrap.css"/>

<script src="bootstrap-3.4.1-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

1. 使用

容器设置，电脑端

<div class="container">默认效果设置宽度，居中显示</div>

容器设置,手机移动端

<div class="container-fluid"></div>

栅格系统，将网页分为12格，根据情况分配这12格

媒体查询

/* 超小屏幕（手机，小于 768px） */

/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

@media (max-width: @screen-xs-max) { ... }

/* 小屏幕（平板，大于等于 768px） */

@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */

@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */

@media (min-width: @screen-lg-min) { ... }

定义行

<div class=”row”>

<!—在行中定义列-->

<div class=”col-lg-3”></div>

</div>

例子：

<div class="container-fluid">

<div class="row">

<div class="col-lg-3 col-xs-6">1</div>

<div class="col-lg-3 col-xs-6">1</div>

<div class="col-lg-3 col-xs-6">1</div>

<div class="col-lg-3 col-xs-6">1</div>

<div class="col-lg-3 col-xs-6">1</div>

<div class="col-lg-3 col-xs-6">1</div>

<div class="col-lg-3 col-xs-6">1</div>

<div class="col-lg-3 col-xs-6">1</div>

</div>

</div>

偏移

<div class="container-fluid">

<div class="row">

<div class="col-lg-3 col-xs-6 col-lg-offset-1">偏移一个格子的位置，左间距为个格子的位置</div>

<div class="col-lg-3 col-xs-6">1</div>

<div class="col-lg-3 col-xs-6">1</div>

</div>

</div>