bootstrap初次使用

最新推荐文章于 2022-09-18 11:36:42 发布

yanglongbin1113

最新推荐文章于 2022-09-18 11:36:42 发布

阅读量197

点赞数 1

本文链接：https://blog.csdn.net/yanglongbin1113/article/details/90301848

版权

响应式布局

根据终端的屏幕尺寸的大小，改变页面的结构, 优点：大大降低了开发成本

实现响应式布局：媒体查询 + 栅格系统

媒体查询

判断页面的大小，显示不同的效果

//当屏幕宽度小于1200px时,执行样式
@media screen and (max-width: 1200px) {
    body {
        background-color: red;
    }
}
//当屏幕宽度大于320px时,执行样式
@media screen and (min-width: 320px) {
    body {
        background-color: red;
    }
}

栅格系统：是一个概念页面布局工整，有行有列

bootstrap的基本模板

<!--h5文档申明-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--编码格式：utf-8-->
    <meta charset="utf-8">
    <!--要求当前页面使用浏览器最高版本的内核进行渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap的基本模板</title>

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shivm 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->

    <style>
       .br {
            border: 10px solid red;
        }
    </style>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg br" 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>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap的布局容器

<div class="container"></div>

<div class="container-fluid"></div>

栅格系统：
1. 必须有一个容器盒子 .container .container-fluid ,里面必须包含 .row
2. .row（行）中有列 column，
3. 内容在列中显示
4. 列的类名 .col-xs-4 .col-sm-4 .col-md-4 .col-lg-4
5. container容器设置了 padding-left=15,padding-right, row填充父容器的15px的左右内间距 margin-left
6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围，例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
7. 当列的占比大于 12 ，最后一列另起一行

列： .col-*-*
大屏设备： .col-lg-*
中屏设备： .col-md-*
小屏设备： .col-sm-*
超小屏设备： .col-xs-*

第三个值：列占了多少分，一行可以分为12分，后面的值为多少就占多分

bootstrap的响应式工具：
visible:可见的--------高版本建议不要使用
3.2.0之前的用法：
visible-lg: 大屏显示，其他屏隐藏
visible-md: 中屏显示，其他屏隐藏
。。。
3.2.0之后的用法：
visible-lg-block: -inline -inline-block
hidden:隐藏的 --------在3.2.0版本之后，建议使用hidden
hidden-lg: 大屏隐藏其他屏显示
hidden-md: 中屏隐藏其他屏显示
hidden-sm: 小屏隐藏其他屏显示
hidden-xs: 超小屏屏隐藏其他屏显示