一、bootstrap的安装
1.在bootstrap官网下载安装包bootstrap官网。
2.解压安装包,解压后将jQuery的包放在js目录下。注意:jQuery的包需要另外下载
3.在HTML代码中引用第三方包
<!--引入bootstrap的css样式-->
<link rel="stylesheet" href="bs/css/bootstrap.css">
<!--引入jQuery-->
<script src="bs/js/jquery-1.12.4.js"></script>
<!--引入bootstrap的js文件-->
<script src="bs/js/bootstrap.js"></script>
二、布局容器
bootstrap的网页内容和栅格系统需要包裹在一个容器内。bootstrap有两个布局容器:
.container:用于固定宽度并支持响应式布局的容器。实现效果如下图,距离浏览器左右边框都留有间距
.container-fluid:用于 100% 宽度,占据全部视口(viewport)的容器。距离浏览器左右边框无间距
三、栅格系统
栅格系统是通过一系列的行与列的组合来创建页面布局,网页的内容可以放在这些布局中。
栅格系统的工作原理:
1.“行(row)”必须包含在 .container
(固定宽度)或 .container-fluid
(100% 宽度)中。
2.内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
3.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4
来创建。
4.如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入bootstrap的css样式-->
<link rel="stylesheet" href="bs/css/bootstrap.css">
<!--引入jQuery-->
<script src="bs/js/jquery-1.12.4.js"></script>
<!--引入bootstrap的js文件-->
<script src="bs/js/bootstrap.js"></script>
<!--引入holder.js文件,该文件用于生成占位图片-->
<script src="bs/js/holder.js"></script>
<style>
.row{
margin-bottom: 15px;
}
</style>
</head>
<body>
<!--定义布局容器-->
<div class="container">
<h1>bootstrap前端框架</h1>
<!--定义一行,bootstrap将一行分为12个单元-->
<div class="row">
<!--定义一列,并且该列占用8个单元-->
<div class="col-md-8">
<img src="holder.js/100px200" alt="">
</div>
<!--定义一列,该列占用4个单元-->
<div class="col-md-4">
<!--定义占位图片-->
<img src="holder.js/100px200" alt="">
</div>
</div>
</div>
</body>
</html>
列偏移:使用 .col-md-offset-*
类可以将列向右侧偏移。代码示例
<div class="container">
<h1>bootstrap前端框架</h1>
<!--定义一行,bootstrap将一行分为12个单元-->
<div class="row">
<!--col-md-offset-8向右偏移8个单元-->
<div class="col-md-4 col-md-offset-8">
<!--定义占位图片-->
<img src="holder.js/100px200" alt="">
</div>
</div>
</div>
页面实现效果如下: