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

2023-12-12 20:39:46

<!--使用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) 容器，然后在这个行容器中插入列。

码农公寓

相关文章