前端—04：BootStrap

最新推荐文章于 2022-12-03 22:23:15 发布

精致先生

最新推荐文章于 2022-12-03 22:23:15 发布

阅读量235

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/jingzhi111/article/details/93676070

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、概述

什么是响应式页面？

适应不同的分辨率显示不同样式,提高用户的体验。

BootStrap有什么作用？

使用BootStrap能开发一套响应式的页面，让他能够在各种设备上正常显示。

BootStrap包含的部分内容：

全局CSS： BootStrap中已经定义好了一套CSS的样式表
组件： BootStrap定义的一套按钮,导航条等组件
JS插件： BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

二、BootStrap的布局容器

.container 类用于固定宽度并支持响应式布局的容器。

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

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

三、BootStrap的栅格系统

将屏幕划分成12个格子，12列
class='row' 当前是行
行里面放的是列 col-屏幕分辨率-数字 (每一行分辨率的数字总和必须是等于12,如果超过12,另起一行)
col-lg-数字 : 在超宽屏幕上使用
col-md-数字 : 在中等屏幕上,PC电脑
col-sm-数字 : 在平板电脑上
col-xs-数字 : 在手机上

1.BootStrap的栅格系统样式

设备分辨率大于1200 使用 lg样式
设备分辨率大于992 < 1200 使用 md样式
设备分辨率大于768 < 992 使用 sm样式
设备分辨率小于768使用 xs样式

2.Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组 “列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding

3.常用开发步骤：

新建一个HTML页面.引入bootStrap相关的js和CSS
定义一个整体的div（div class = container 支持响应式的布局容器），将整体的div分成几个部分
完成每部分的内容显示

4.栅格系统的示例代码：

<head>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--jQuery文件。务必在bootstrap.min.js 之前引入-->
    <script src="../js/jquery-1.11.0.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">

        <div class="row">
            <div class="col-md-12">
                ...
            </div>
        </div>

        <div class="row">
            <!--左边div-->
            <div class="col-md-2 hidden-sm hidden-xs">
                ...
            </div>
            <!--右边div-->    
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-6">
                        ...
                    </div>
                    <div class="col-md-2 col-xs-4" style="text-align: center;">
                        ...
                    </div>
                    <div class="col-md-2 col-xs-4" style="text-align: center;">
                        ...
                    </div>
                    <div class="col-md-2 col-xs-4" style="text-align: center;">
                        ..
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

精致先生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端—04：BootStrap

一、概述什么是响应式页面？适应不同的分辨率显示不同样式,提高用户的体验。BootStrap有什么作用？使用BootStrap能开发一套响应式的页面，让他能够在各种设备上正常显示。BootStrap包含的部分内容：全局CSS： BootStrap中已经定义好了一套CSS的样式表组件： BootStrap定义的一套按钮,导航条等组件 JS插件： Boo...
复制链接

扫一扫

专栏目录