Vic·Tory
Vic·Tory

使用Bootstrap快速构建页面

1、引入Bootstrap

首先从Bootstrap官网下载代码包，解压后将其中的css、js、fonts中的文件放在对应的静态资源目录中。之后在要使用的页面中引入该css、js文件，或者也可以直接以CDN的方式引入。注意bootstrap.js是基于jQuery，因此也需要引入jquery.js。

接着需要用meta标签设置字符编码为utf-8，并且使用viewpoint固定页面大小以保证页面在不同分辨率的设备上看起来都是一样的

<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../static/css/bootstrap.css">
    <script src="../../static/js/jquery.js">script>
    <script src="../../static/js/bootstrap.js">script>
head>

2、网格系统

Bootstrap中可以根据屏幕的大小动态计算元素的宽度。如下所示，Bootstrap会将父元素默认划分为12等份，我们通过指定占多少份来计算子元素的宽度。例如我们为元素添加类名.col-md-4，则其宽度占整个父元素的4/12。下一个子元素会自动跟在其右边，若总份数超过12之后自动换下一行，例如大小为5的元素后面是一个大小为8的元素，5+8>12该元素会自动换到下一行。
使用Bootstrap快速构建页面_第1张图片
.col-md-4中的md代表medium中等的，即Bootstrap会对页面宽度进行检测，如果宽度复合某个区间，则对应前缀的类名生效

设备 大小 前缀
超小设备（extremely small） <768px .col-xs-
小型设备（small） >768px .col-sm-
中等设备 >992px .col-md-
大型设备 >1200px .col-lg-

如下所示，为网格添加类名col-md-4和col-sm-6，即当页面宽度介于768px~992px时，类名col-sm-6生效，每个网格占用六份，一行有两个网格。当页面宽度大于992px时，col-md-4生效，每个网格占4份，一行三个网格。

<div class="row">
    <div class="col-md-4 col-sm-6">网格1div>
    <div class="col-md-4 col-sm-6">网格2div>
    <div class="col-md-4 col-sm-6">网格3div>
div>

在这里插入图片描述

在这里插入图片描述

3、常用组件

Bootstrap官网提供了网页常用组件的demo样例，我们可以直接复制粘贴并加以简单修改后直接使用。

导航栏

在这里插入图片描述使用Bootstrap快速构建页面_第2张图片

通过