web移动（三）-响应式工具之bootstarp

最新推荐文章于 2021-07-22 18:49:08 发布

yyy_wj

最新推荐文章于 2021-07-22 18:49:08 发布

阅读量191

点赞数 1

本文链接：https://blog.csdn.net/yyy_wj/article/details/103056315

版权

Bootstrap

1、简单介绍

目前最流行的 HTML, CSS 和 JavaScript 框架，用于开发响应式，移动端先行的 web 项目，Bootstrap是当前最流行的前端UI框架(有预制界面组件)
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

Bootstarp所有的插件都基于jquery

2、BootStrap的版本了解

2.x.x:兼容性好 / 代码不够简洁，功能不够完善
3.x.x:稳定性好,放弃了IE6-IE7,对IE8的支持一般 /偏向于响应式布局开发，移动设备优先的web项目开发
4.x.x:测试阶段，偏向于响应式，移动设备

3、Bootstarp的基本模板

<!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明  en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
    <!--文档编码申明-->
    <meta charset="utf-8">
    <!--要求当前网页使用浏览器最高版本的内核来渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 优先加载和浏览器解释 -->

    <title>title</title>

    <!-- Bootstrap 核心样式-->
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!-- html5shiv 和  respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的  不兼容问题-->
    <!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 在 IE 9 一下引入-->
    <!--[if lt IE 9]>
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--TODO-->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>



<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

必须引入Bootstarp中的css文件、js文件和jQuery文件才能基本使用Bootstarp

4、Bootstarp中的布局容器

bootstarp中的css的样式中，有一个有一个支撑着整个页面框架的容器，也要布局容器，类似平常写的版心结构

1、.container 实现固定宽度并支撑响应式布局的容器，跟之前写的媒体查询代码作用是一样的。

在超小屏设备的时候 768px以下当前容器的宽度100%
在小屏设备的时候 768px-992px 当前容器的宽度750px
在中屏设备的时候 992px-1200px 当前容器的宽度970px
在大屏设备的时候 1200px以上当前容器的宽度1170px

2、.container-fluid

    <!--响应式布局容器-->
    <div class="container">

    </div>
    <!--流式布局容器-->
    <div class="container-fluid">

    </div>

5、Bootstarp 栅格系统

概念：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会默认分为12列。通俗来说其实就是行和列的布局，网格状布局
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

行（row）必须包含在.container（固定宽度）或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补（padding），内容应该放在列（column）中，并且只有列（column）可以作为行（row）的直接子元素。可以使用类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）.container容器默认有15px的左右内间距 .row 填充父容器的15px的左右内间距 margin-left,margin-right -15px拉伸

列（column）：col-*-* *不确定（参数）
第一个*：屏幕的大小

大屏设备 lg 大屏设备以上生效包含本身
中屏设备 md 中屏设备以上生效包含本身
小屏设备 sm 小屏设备以上生效包含本身
超小屏设备 xs 超小屏设备以上生效包含本身

第二个*：每一行的分等份，默认分成12等份，数字代表的是占多少份

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

示例：

<!--
大屏设备   让div平均分成6等份
中屏设备   让div平均分成4等份
小屏设备   让div平均分成3等份
超小屏设备 让div平均分成2等份
-->
<div class="container">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"></div>
    </div>
</div>

注意：

1.栅格系统是往上兼容的：意味着小屏幕上的效果在大屏幕上也是可以正常显示的人，但是大屏幕上的设置在小屏幕上却无法正常显示。
2.row可以再次嵌套在列中。如果不能填满整列，则默认从左排列，如果超出，则换行展示。

6、列偏移与排序
col-xs-offset-n：往右偏移 n 个栅格，但是会影响后面所有元素也偏移 n 个栅格。（内部通过 margin-left 实现的）
col-xs-push/pull-n：push 往右推，pull 往左拉。往右偏移 n 个栅格，可能会与后面的元素重叠。（内部实现原理通过定位实现）

 <!--列的偏移-->
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-3"></div>
                <div class="col-xs-6 col-xs-offset-1"></div>
            </div>
        </div>
        <!--列的排序-->
        <div class="col-xs-4">
            <div class="row">
                <!--
                push 往后推
                pull 往前拉
                -->
                <div class="col-xs-3 col-xs-push-9">col-xs-3</div>
                <div class="col-xs-9 col-xs-pull-3">col-xs-9</div>
            </div>
        </div>

7、列嵌套

列嵌套就是列中还可以嵌套行，注意不能嵌套版心 container 和 container-fluid。
因为：如果在外层没有再包含container,那么嵌套列的宽度就是参照当前所在的栅格；如果外层添加了container,那么参照就是核心样式文件所设置的容器宽度。

 <!--栅格嵌套-->
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-6"></div>
                <div class="col-xs-6"></div>
            </div>
        </div>

7、Bootstarp中的响应式工具

visible-lg 大屏显示其他隐藏
visible-md 中屏显示其他隐藏
visible-sm 小屏显示其他隐藏
visible-xs 超小屏显示其他隐藏

3.2版本以后建议使用hidden

hidden-lg 大屏隐藏其他显示
hidden-md 中屏隐藏其他显示
hidden-sm 小屏隐藏其他显示
hidden-xs 超小屏隐藏其他显示

<div class="box hidden-md hidden-xs">内容</div>

注意： visible-lg 或hidden-lg 都只是针对的一种设备而栅格系统是往上兼容的，不要弄混了

https://www.awesomes.cn/ Web前端开发资源库。Web前端开发工程师需要的免费开源的高质量前端库、框架和插件。致力于Github前端框架的深度分析和开放文档，里面有现在用的比较多的框架，可以更好的进行学习。

yyy_wj

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫