Bootstrap 栅格基本模板使用

最新推荐文章于 2024-10-13 17:45:47 发布

Charge8

最新推荐文章于 2024-10-13 17:45:47 发布

阅读量794

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： Bootstrap 栅格 Bootstrap基本模板

本文链接：https://blog.youkuaiyun.com/qq_42402854/article/details/86666674

Bootstrap 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍Bootstrap3框架的使用，包括视口设置、布局容器、栅格系统布局等内容，帮助开发者快速掌握Bootstrap3的布局技巧。

Bootstrap 3 学习使用：官方下载及文档

Bootstrap 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

注意：Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入

一，建立基本模本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--声明浏览器端的字符集编码-->
    <meta charset="utf-8">
    <!--显示地声明如果用ie浏览器的化，要用最新的版本的试图引擎来渲染页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--视口的设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 3 demo</title>

    <!-- 进入Bootstrap的css样式 -->
    <link href="./bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="./css/index.css" rel="stylesheet">
</head>
<body>
    <h4>bootstrap 基本模本</h4>

<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<!-- 引入jQuery  -->
<script src="./jquery/jquery-1.12.4.js"></script>
<!-- 引入Bootstrap 的所有JavaScript 插件。 -->
<script src="./bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="./js/index.js"/>
</body>
</html>

1、视口的设置

1）视口以及视口的作用：

在移动浏览器中（手机基本默认宽度都是980px），当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面装到容器里，然后缩放到设备这么大，然后就可以正常展示出页面上的所有内容。

2）参数说明

<meta name="viewport" content="width=device-width, initial-scale=1">

此meta 为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）

width：视口的宽度

initial-scale：初始化缩放

user-scalable：是否允许用户自行缩放（值：yes/no; 1/0）

minimum-scale：最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放

maximum-scale：最大缩放

二、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

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

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

<div class="container"> 加了边距</div>
<div class="container-fluid"> 100%内容 </div>

三、栅格系统布局

1）介绍

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
把容器总宽度平分为12等份

2）栅格参数

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-lg-6">4/12</div>
            <div class="col-xs-4 col-lg-6">4/12</div>
            <div class="col-xs-4 hidden-lg">4/12</div>
        </div>
    </div>

知识点：

1）多余的列（column）将另起一行排列

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

2）嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）

3）列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

4）大分辨率会兼容小分辨率的样式。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备

栅格布局变化万千，会使用就 OK 啦