1.Bootstrap使用（布局容器，栅格网格系统,【列组合与列偏移，列排序与列嵌套】）

2021-11-29 14:02:37 阅读：135 来源： 互联网

<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式- ->
<meta http-equiv="X-UA-Compatib1e" content= "IE=edge">
<!--
 viewport表示用户是否可以缩放页面;
 width指定视区的逻辑宽度;
 device-width指示视区宽度应为设备的屏幕宽度;
 initial-scale指令用于设置Web页面的初始缩放比例
 initial-scale=1 则将显示未经缩放的Web文档 
-->
<meta name= "viewport" content= "width=device-width, initial-scale=1">

　　如果要使⽤Bootstrap的js插件，必须先调用 jQuery.js

viewport 标记于指定用户是否可以缩放Web页面
width 和 height 指令分别指定视区的逻辑宽度和宽度。他们的值要么是以像素为单位的数字，要么是个特殊的标记符号。
width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。
height 指令使用 device-height 标记指示视区宽度为设备的屏幕宽度。
initial-scale 指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。

1.布局容器　　.container 类用于固定宽度并支持响应式布局的容器（网页两侧留白）

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

　　.container-fluid 类用于 100% 宽度，占据全部视口 (viewport) 的容器（网页两侧不留白）

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

2.栅格网格系统　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。　　栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。　　Bootstrap框架中的网格系统就是将容器平分成12份

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
</div>

注意：

行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
具体内容应该放置在列容器 (column) 之内
col- 屏幕尺寸-列数，其中屏幕尺寸有

xs(xsmall phones) 超小屏(自动) sm(small tablets) 小屏(750px) md(middle desktops) 中屏(970px) lg(larger desktops) 大屏(1170px)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
 
<body>
    <!-- 布局容器 -->
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值 col-lg-数值-->
            <div class="col-md-4" >4列</div>
            <div class="col-md-8" >8列</div>
        </div>
    </div>
</body>
 
</html>

3.列组合　　列组合简单理解就是更改数字来合并列(原则：列总和数不能超12，大于12则自动换到下一行)，有点类似于表格的 colspan 属性 4.列偏移　　如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移 (offset) 功能来实现。　　使用列偏移也非常简单，只需要在列元素上添加类名 "col-md-offset-*" (星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。　　例如，你在列元素上添加 "col-md-offset-8" ,表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会导致列断行|换行显示) 5.列排序　　* 列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。　　* 在 Bootstrap 框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数) 　　* 左浮动往前 pull ,右浮动往后 push 6.列嵌套　　列嵌套：你可以在一个列中添加一个或者多个行(row) 容器，然后在这个行容器中插入列。

标签：容器,12,嵌套,Bootstrap,md,栅格,宽度,偏移,col
来源： https://www.cnblogs.com/BingBing-Deng/p/15619080.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

1.Bootstrap使用（布局容器，栅格网格系统,【列组合与列偏移，列排序与列嵌套】）