Bootstrap学习笔记（一）引入环境/布局容器/栅格系统

最新推荐文章于 2024-07-20 15:49:14 发布

Noocl

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量1.5k

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/Noocl/article/details/78516162

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是Bootstrap

Bootstrp是一个目前很流行的前端框架，是基于html5的，当然常用的html与jsp文件也是适用的，它主要提供了对常用标签的样式设定，使你对排版布局更加的方便与美观，它是以移动设备优先，对IE8及以下版本的支持并不友好。

引入环境

Bootstrap的基础文件有三个，分别是bootstrap.css、jquery.js、bootstrap.js；
环境引入分两种，一种是本地引入，另一种是网络引入。

1. 本地引入

首先在官网http://v3.bootcss.com下载，当前是3.3.7版本，文档结构图如下，其中用到的文件就只有bootstrap.min.css与bootstrap.min.js两个文件，当然还需要下载别一个文件即jquery.min.js，可在官网的下载页面找到，链接为https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js，用浏览器打开保存为jquery.min.js然后保存到js文件里面就可以了。

bootstrap.css与bootstrap.min.css的区别，后者是前者的压缩版本，一般只使用压缩版本即可。

bootstrap文件结构图

新建一个demo01.html文件然后引入3个文件，环境就算配制好了。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

这里要注意的是，加上<meta name="viewport" content="width=device-width, initial-scale=1.0">这句是移动设备优先的意思，是html文件自带的；而jquery.min.js文件要写在bootstrap.min.js之前。

2. 网络引入

不需要下载bootstrap文件，直接在下载界面找到相应的链接粘贴到html文件头部即可。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

布局容器

容器分两种，分别是container，container-fluid，容器之间不能嵌套，支付响应式布局。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <title>Document</title>
    </head>
    <body style="background: #aaa;">
        <div class="container" style="background: yellow;">
            这是一个container容器，宽度为1170
        </div>
        <div class="container-fluid" style="background: green;">
            这是一个container-fluid容器，宽度为100%
        </div>

    </body>
</html>

图像显示如下
这里写图片描述

之后再插入代码时不再加入，html头部引入的bootstrap环境，默认是全是引入的。

栅格系统

这个是bootstrap框架的经典部分，用作于界面的布局。

基本属性

栅格系统分成不同的行(row)，第行分成12个基数列(col-xx-num)；
相临的基数列可以组合成一个组合列，随需求而定；
如果当前行放不下组合列，会别起一行；
每两个相临的列之间的间隔是30px，即左右各50px。

因为是响应是布局，所以会根据设备的不同而适配不同的列名

属性/设备	手机	平板	中等屏幕	宽屏幕
宽度	<768px	>=768	>=992	>=1200
列名	col-xs-1	col-sm-1	col-md-1	col-lg-1

不同`col-md-x`的显示

<div class="container">
    <div class="row">
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
    </div>
    <div class="row">
        <div class="col-md-3">3</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">3</div>
    </div>
    <div class="row">
        <div class="col-md-4">4</div>
        <div class="col-md-4">4</div>
        <div class="col-md-4">4</div>
    </div>
    <div class="row">
        <div class="col-md-6">6</div>
        <div class="col-md-6">6</div>
    </div>  
</div>

div
为了能看清col-md-，就加了样式如下

<style type="text/css">
    div[class^="col-"]{
        border: 1px solid blue;
    }
</style>

响应式布局实例

<div class="container">
    <div class="row">
        <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列1</div>
        <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列2</div>
        <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列3</div>
        <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列4</div>
        <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列5</div>
        <div class="col-xs-2 col-sm-3 col-md-4 col-lg-6">组合列6</div>

    </row>
</div>

当缩小浏览器容器时，截图如下
col-xs-2时，显示6列；
这里写图片描述
col-sm-3时，显示4列

col-md-4时，显示3列

col-lg-6时，显示4列

列偏移

col-md-offset-* 整体向右偏移，是指当前与其右边的列组一起偏移；
col-md-pull-* 单体向左偏移；
col-md-push-* 单体向右偏移；

直接看代码与图

    <div class="container" style="background: #ddd;">
        <div style="height: 30px;"></div>
        <div class="row">
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
            <div class="col-md-1">&nbsp;</div>
        </div>
        <div style="height: 4px;"></div>
        <div class="row">
            <div class="col-md-2">1-2</div>
            <div class="col-md-4">3-6</div>
        </div>
        <div style="height: 4px;"></div>
        <div class="row">
            <div class="col-md-2 col-lg-offset-2">整体向右偏移2格</div>
            <div class="col-md-4">整体向右偏移2格</div>
        </div>
        <div style="height: 4px;"></div>
        <div class="row">
            <div class="col-md-2">不变</div>
            <div class="col-md-4 col-md-offset-2">向右偏移2格</div>
        </div>
        <div style="height: 4px;"></div>
        <div class="row">
            <div class="col-md-2 col-md-push-4">向右偏移4格</div>
            <div class="col-md-4 col-md-pull-2">向左偏移2格</div>
        </div>
    </div>

这里写图片描述

列嵌套

列嵌套就如在表格一样，在一个<td>里面加个<table>，看代码就能明白；就是在一个组合列内部加入一个内嵌的组合列。

<body style="background: #eee;">
    <div class="container">
        <div style="height: 30px"></div>
        <div class="row" >
           <div class="col-md-2" style="height: 40px;">A</div> 
           <div class="col-md-4" style="height: 40px;">B
               <div class="col-md-2">1</div>
               <div class="col-md-2">2</div>
               <div class="col-md-2">3</div>
               <div class="col-md-2">4</div>
           </div> 
        </div>
    </div>
</body>