Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

苦海123

已于 2024-03-19 22:59:20 修改

阅读量1.8k

点赞数 2

分类专栏： Bootstrap 文章标签：前端 bootstrap

于 2021-05-14 19:53:38 首次发布

本文链接：https://blog.csdn.net/weixin_46758988/article/details/116803460

版权

Bootstrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Bootstrap简介：

Bootstrap是Twitter（推特）开发的，目前最受欢迎的前端开源框架，基于jQuery用于开发HTML、CSS、JavaScript，简洁灵活，常用于开发响应式布局及移动端开发。其中文官方文档：http://www.bootcss.com 官网：http://getbootstrap.com 推荐网站：http://bootstrap.css88.com

在这里插入图片描述

下载bootstrap：

拿到bootstrap文件包的方式有很多种，例如：官网下载、npm(后面介绍完node可以使用npm中：npm install bootstrap@4.0.0-beta.2直接download下来4.0版本)、使用在线文档连接等。考虑到某些读者可能没接触到node，这里小编通过官方下载bootstrap来介绍：访问官方网址：http://getbootstrap.com，点击右上角Download选择对应的版本继续点击编译好的（Compiled CSS and JS）bootstrap下载，这里小编采用bootstrap4进行简介，bootstrap4放弃了IE8及iOS6，目前仅支持IE9+及iOS7+，实际开发中需要注意这点。

编译后的bootstrap文件目录结构如下：（只需要拿需要的文件即可）

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

引入资源：

需要注意：bootstrap基于jQuery，但是下拉菜单（dropdown）、弹出框（popover）和工具提示（tooltip）组件依赖Popper(https://popper.js.org/) 开发，bootstrap文件分css文件和js文件，如果只需要样式，可以不需要引入js文件，如：

	<!--将bootstrap文件及依赖文件引入到head靠前位置，便于自己样式层叠-->
    <link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
    
    <!-- 条件注释，第一个是解决html5新标签兼容性的，第二个是解决css媒体查询兼容问题的，且此依赖不能以files方式打开使用-->
    <!--[if lt IE 9]>
        <script src="lib/html5shiv/html5shiv.js"></script>
        <script src="lib/respond/respond.js"></script>
    <![endif]-->
    
    <script src="lib/jquery/jquery.js"></script><!-- 引入jQuer依赖（bootstrap依赖jQuery库） -->
    <script src="lib/popper/popper.js"></script><!-- 用于弹窗、提示、下拉菜单时引入此依赖，但是目前的 bootstrap.bundle.js已经包含了/popper.js，自己判断版本自行增删  -->
    
    <script src="lib/bootstrap/bootstrap.js"></script><!-- 引入bootstrap.js文件-->

基本结构说明：

	<!-- 1.bootstrap要求使用HTML5文档类型，现在最新html5声明如下（可以简写为html）： -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 通常网页开发都会声明编码-->

    <!-- 2.bootstrap常用于移动端开发，如果是移动端开发，记得开启视口，其标准视口书写如下(新增自动适应手机屏幕宽度属性：shrink-to-fit=no，解决iOS9兼容问题)： -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0，user-scalable=no，maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no">

    <!-- 3.引入jQuery插件，因为bootstrap是基于jQuery开发的： -->
    <!-- <scrip src="lib/jquery/dist/jquery.js"></scrip> -->
    <!---jquery本地文件在测试关闭提示框时出现报错，经调试，修改为网络资源可以正常运行-->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- 4.引入bootstrap中样式文件： -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">

    <!-- 5.如果需要做弹窗、提示、下拉菜单等功能，引入如下依赖： -->
    <scrip src="lib/bootstrap/js/bootstrap.bundle.min.js"></scrip>

    <!-- 6.如果需要使用bootstrap中行为，引入bootstrap中js文件: -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>

    <!-- 7.条件注释，第一个是解决html5新标签兼容性的插件，第二个是解决css媒体查询兼容问题的，且此依赖不能以files方式打开文件-->
    <!--[if lt IE 9]>
    <sc src="lib/html5shiv/html5shiv.js"></sc>
    <sc src="lib/respond/respond.js"></sc>
<![endif]-->

    <!-- 8.引入自己编写的css文件层叠掉bootstrap中不符合的样式: -->
    <link rel="stylesheet" href="test.css">
    <title>Document</title>
</head>

<body>
    <div class='container'>配置好此模板，在这里就可以使用bootstrap了</div>
</body>

</html>

使用bootstrap中功能：

bootstrap中的功能使用起来很简单，如果是给自己编写的html骨架添加功能，只需要添加bootstrap中定义好有功能的类名即可，如果需要使用某个定义好的功能块，那么直接将案例代码拷贝到自己的代码中即可。下面将介绍实际开发中常用的功能：

响应式容器：

	<!-- container:定义一个响应式容器，使有此类名的容器在不同尺寸设备下显示不同的尺寸，且水平居中，当小于570px时不再做变小 -->
    <div class='container'></div>

满屏容器：

	<!-- container-fluid:定义一个占据全部视口的容器，无论设备屏幕尺寸多大，总是100%占据视口宽度 -->
    <div class='container-fluid'></div>

栅格系统：

默认把页面内容分成12等份（当然自己可以定制份数），由行和列组合的布局页面,网格状布局，在一个响应式容器中定义行和列。由类名row定义栅格系统的行，由col-x-n定义栅格系统的列。col-x-n中n表示所占栅格12份中的几份，x参数:（xl屏幕尺寸大于1200px）其他如下：

栅格嵌套：每个栅格中是可以嵌套其它栅格的，就像div一样，可以相互嵌套。

栅格偏移：col-(lg/md/sm/xs)-offset-n,给某个栅格添加此类可以使这个栅格向后偏移n份。

栅格排序：col-(lg/md/sm/xs)-push/pull-n,将某个栅格push推后几份或将某个栅格pull拉前几份。

	<div class="container"><!--1.栅格系统要放在固定宽度或全屏容器中，实际开发中会利用bootstrap的响应式容器（媒体查询原理固定的尺寸）-->
        <div class="row"><!--row定义行-->
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div><!--col定义列，其中xs-12表示当在bootstrap中定义的xs屏幕时，此列占一行中的12份，即一行占满；lg-2表示当在bootstrap中定义的尺寸为lg时，此时这列占一行中的2份，即2/12-->
            <!--栅格嵌套开始：-->
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                <div class="row"><!--在一个col中可以继续嵌套row行，row行中可以继续划分列，如：-->
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套a</div>
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套b</div>
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套c</div>
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套d</div>
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套e</div>
                    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套w</div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">3</div>
            <!-- 栅格偏移col-x-offset-n：n表示这列向右偏移n份 -->
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                <div class="row">
                    <div class="col-lg-4 col-md-3 col-sm-2 col-xs-1">栅格偏移</div>
                    <div class="col-lg-4 col-lg-offset-4 col-md-3 col-md-offset-6 col-sm-2 col-sm-offset-8 col-xs-1 col-xs-offset-10">栅格偏移</div><!--col-lg-offset-4表示在lg尺寸下向右偏移4份-->
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">5</div>
            <!-- 栅格排序push推、pull拉 -->
            <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                <div class="row arr">
                    <div class="col-lg-6 col-lg-push-6 col-md-6 col-md-push-6 col-sm-6 col-sm-push-6 col-xs-6 col-xs-push-6">栅格排序-左边</div>
                    <div class="col-lg-6 col-lg-pull-6 col-md-6 col-md-pull-6 col-sm-6 col-sm-pull-6 col-xs-6 col-xs-pull-6">栅格排序-右边</div>
                </div>
            </div>
        </div>
    </div>