Bootstrap——栅格系统

2020-09-28 11:57:12

Bootstrap——栅格系统栅格系统格式自适应屏幕尺寸--分配12列对齐方式垂直对齐水平对齐排序： order-*偏移： offset-{breakpoint}-*间距嵌套栅格系统不管在多大的屏下，一行都是分12列(逻辑上把整个页面当成表格...


Bootstrap——栅格系统
栅格系统
格式
自适应屏幕尺寸--分配12列
对齐方式
垂直对齐
水平对齐
排序： order-*
偏移 ： offset-{breakpoint}-*
间距
嵌套

栅格系统
不管在多大的屏下，一行都是分12列(逻辑上把整个页面当成表格来布局)

container-fluid ：width是100%

container： width是固定的
格式
在head标签里引入bootstrapCDN css
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
 <style>
        div{
            height:150px;
            background-color: grey;
            border: 1px solid black;
        }
        hr{
            border-top: 4px solid rgba(0,0,0,.5);
        }
        .v-align div{
            height: 100px;
        }       
 </style>

一个container/container-fluid就是一个栅格容器、row是一行，行里分12列；
 <div class="container">
        <!-- 行 相当于表格里的tr-->
        <div class="row">
            <!--列 ： div span  section 相当于表格里的th td-->
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>      
        <hr>

自适应屏幕尺寸–分配12列

*号代表：1~12
Extra small（超小屏 .col-*）：<576px
Small（小屏 .col-sm-*）：≥576px
Medium（中屏.col-md-*)：≥768px
Large(大屏 .col-lg-*)：≥992px
Extra large（超大屏.col-xl-*）：≥1200px

        <!-- 行 相当于表格里的tr-->
        <div class="row">
            <!--列 ： div span  section 相当于表格里的th td-->
            <div class="col-xl-3 col-lg-6 col-md-9 col-sm-5 col-6">超大屏下占3列,大屏下占4列,中屏下占9列,小屏下占5列,超小屏下占6列</div>
            <div class="col-xl-9 col-lg-6 col-md-3 col-sm-7 col-6">超大屏下占9列,大屏下占6列，中屏下占3列，小屏下占8列,超小屏下占6列</div>
        </div>
        <!-- 宽度由内容撑开 -->
        <div class="row mt-5">
            <div class="col">宽度由内容撑开</div>
            <div class="col">宽度由内容撑开</div>
            <div class="col">宽度由内容撑开</div>
        </div>
        <hr>


对齐方式
垂直对齐


父级：  .v-align  子级垂直布局

align-items-() ()可以填start、center、end、


子级： .align-self-()


	 <div class="row mt-5 v-align align-items-start">
            <div class="col">顶对齐</div>
            <div class="col">顶对齐</div>
            <div class="col">顶对齐</div>
        </div>
        <div class="row mt-5 v-align align-items-center">
            <div class="col">居中对齐</div>
            <div class="col">居中对齐</div>
            <div class="col">居中对齐</div>
        </div>
        <div class="row mt-5 v-align align-items-end">
            <div class="col">底对齐</div>
            <div class="col">底对齐</div>
            <div class="col">底对齐</div>
        </div>
        <div class="row mt-5 v-align ">
            <div class="col align-self-start">子级alig-self-()</div>
            <div class="col align-self-start">子级alig-self-()</div>
            <div class="col align-self-start">子级alig-self-()</div>
        </div>
        <hr>


水平对齐

justify-content-start 左对齐
justify-content-center 居中
justify-content-end 	右对齐
justify-content-around  平均排列
justify-content-between 两边对齐中间自适应

 		<div class="row mt-5 v-align justify-content-start">
            <div class="col-md-2">左对齐</div>
            <div class="col-md-3">左对齐</div>
            <div class="col-md-5">左对齐</div>
        </div>
        <div class="row mt-5 v-align justify-content-center">
            <div class="col-md-2">居中</div>
            <div class="col-md-3">居中</div>
            <div class="col-md-5">居中</div>
        </div>
        <div class="row mt-5 v-align justify-content-end">
            <div class="col-md-2">右对齐</div>
            <div class="col-md-3">右对齐</div>
            <div class="col-md-5">右对齐</div>
        </div><div class="row mt-5 v-align justify-content-around">
            <div class="col-md-2">自动分配剩余宽度到margin</div>
            <div class="col-md-3">自动分配剩余宽度到margin</div>
            <div class="col-md-5">自动分配剩余宽度到margin</div>
        </div>
        <div class="row mt-5 v-align justify-content-between">
            <div class="col-md-2">两边对齐中间自适应</div>
            <div class="col-md-3">两边对齐中间自适应</div>
            <div class="col-md-5">两边对齐中间自适应</div>
        </div>
        <hr>


排序： order-*
  		<div class="row mt-5">
            <div class="col-md">第一个</div>
            <div class="col-md order-4">第二个</div>
            <div class="col-md">第三个</div>
        </div>
        <div class="row mt-5">
            <div class="col-md order-last">第一个</div>
            <div class="col-md">第二个</div>
            <div class="col-md order-first">第三个</div>
        </div>
        <hr>


偏移 ： offset-{breakpoint}-*
 		<div class="row mt-5">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>  
        </div>
        <div class="row mt-5">
            <div class="col-md-2 col-lg-3">中屏占2格，大屏占3格</div>
            <div class="col-md-2 offset-lg-3">大屏偏移3格</div>
        </div>
        <hr>


间距
使用margin工具可以让列之间产生间距；

mr-{breakpoint}-auto    往右撑开、使右侧的列到最右边

ml-{breakpoint}-auto    玩左撑开、使左边的列到最左边
		<div class="row mt-5">
            <div class="col-3 mr-lg-auto">在大屏下往右侧撑开，使右侧的列到最右边</div>
            <div class="col-3"></div>
        </div>
        <div class="row mt-5">
            <div class="col-3"></div>
            <div class="col-3 ml-lg-auto">在大屏下往左侧撑开，使左侧的列到最左边</div>
        </div>
        <hr>


嵌套
	<div class="row mt-5">
        <div class="col-md-8">
           <div class="row">
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
           </div>
        </div>
     </div>
</div>

收起

展开全文

Bootstrap3 栅格系统-栅格参数

2016-11-22 15:15:00

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。 —–下面有个“顶”字，你懂得O(∩_∩)O哈哈~ —–乐于分享，共同进步！ —–更多文章请看：...

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

这里写图片描述

—–下面有个“顶”字，你懂得O(∩_∩)O哈哈~
—–乐于分享，共同进步！
—–更多文章请看：http://blog.csdn.net/duruiqi_fx

转载于:https://www.cnblogs.com/hainange/p/6153774.html

收起

展开全文

Bootstrap栅格系统原理

万次阅读 2017-04-03 09:52:33

Bootstrap栅格系统原理 Bootstrap栅格系统布局 1、栅格系统简介 1）响应式设计我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的...

Bootstrap栅格系统原理

Bootstrap栅格系统布局

1、栅格系统简介

1）响应式设计

我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样，也就是分辨率大小不一样。

响应式设计最核心的思想是就一个网站能够兼容多个终端，而不是为每个终端特定的一个版本。

页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸、屏幕定向等）进行相应的响应和调整，具体的实践方式由多方面决定，包括弹性网络布局、图片使用等。

无论有户在平板上还是pc上应该能够自动切换分辨、图片尺寸及相关脚本等，以适应不同设备

2）栅格实现原理

打开www.bootcss.com这个bootstrap的中文网站，点击Bootstrap3中文文档（v3.3.4）

进入以后点击全局CSS样式

找到栅格参数

.col-xs-表示超小屏幕起作用，.col-sm-表示小屏幕起作用，.col-md-表示中等屏幕起作用，.col-lg-表示大屏幕起作用。

栅格实现原理

•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序

•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统

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

下面就介绍一下 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。

•负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

•栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

•如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

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

（原理：把我们的屏幕大小的宽度平分成12个格，每一格的宽度和整个屏幕分辨率是有关系的，如果整个屏幕分辨率越大那么这12格的每一格的宽度就大，是按比例来算出的，而且这12格的layout是水平排列的。）

比如，我们定义一个div，我们不指定这个div的宽度是多少像素或者占多少百分比，我们是指定这个div占12格中的几格，我们这个div占12格中的8格，不同的分辨率底下它始终是占12格中的8格。系统会根据屏幕分辨率的大小，自动拆成12格，每一格大小根据屏幕分辨率自动在变。这样的话在各浏览器或分辨率下都可以兼容我们这个8:4这个比例。

新建一个ch02的Web项目

将第一节课中新建的web项目ch01打开将css文件、fonts文件、img文件、js文件复制

将复制内容粘贴到ch02中

回到HBuilder，在ch02项目下新建一个demo01.html

打开demo01.html，引入bootstrap头文件

在body里面定义一个容器，它就会根据屏幕的大小自动设定div的宽度。定义第一行有12列，每一列占一定的自己的小格，第二行第一个占了12格中的8格的位置，相当于占了8列的宽度，第二个占了12格中4格的位置，相当于占了4列的宽度。

<body>

</div>

</div>

</body>

运行效果

第一行有12列，每一列占一定的自己的小格，第二行第一个占了8列的宽度，第二个占了4列的宽度。

我们再在bootstrap头文件中加一个样式style让我们能看出这样的效果

div{ border: 1px #333333 solid;}

}

</style>

现在，我们再来看一下运行的效果

理解：我电脑的分辨率是1280x800的，由于我们之前设置的类前缀是.col-md-的，所以它默认把container设置成970像素。md表示中等分辨率，我们设置的第一行表示把这个屏幕拆分成12等分，这里就占了12列。每一列就占了12等分的一等分。第二行我们给了两列，第一列占了12等分的8等分，第二列占了12等分的4等分。

如果我们把屏幕变小，它就垂直排列了。因为我们设置的md是中等分辨率的参数，在小分辨率底下就垂直排列了。

接着我们修改第二行的分辨率

运行效果

这时，将屏幕变小md8占6等分md4占6等分，是自动的，这样就转到了小屏幕的分辨率区间。

注意： 1）一行(row)必须在.container中

2）使用行在水平方向创建列组

3）具体内容应放置于列(column)内

4）内置像.row和.col-xs-4(占4列)

3）媒体查询

我们可以指定在哪些分辨率底下执行特定的css样式

例如：

div{ border: 1px #333333 solid;}

@media(max-width:767px)

/*在小于767px的屏幕里，这样的样式才生效。*/

{

div{ background: #F0AD4E;}

/*设定一个div的样式*/

}

</style>

运行结果：

（分辨率大于767px）

（分辨率小于767px，此时div的背景就变成了我们自己设定的这个颜色。）

• 媒体查询是进行响应式设计的核心要素，其功能非常强大

• Bootstrap主要用到min-width,max-width以及and语法，用于在不同的分辨率下设置不同的css样式

示例：

@media(max-width:767px){

/*在小于767px的屏幕里，这里的样式才生效*/

}

@media(min-width:768px) and (max-width:991px){

/*768-991px屏幕里，这里的样式才生效*/

}

4）课后练习

自己尝试在body里面加container，然后再做行和列，并且我们可以任意指定这个列占我们12小格中的几格。

收起

展开全文

Bootstrap栅格系统的使用详解
2020-11-27 10:15:20
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类...
收起

提取Bootstrap栅格系统

2018-05-24 22:22:43

Bootstrap带给大家最大的便利莫过于它的栅格系统，栅格系统帮助我们快速构建响应式的网页布局，以适配各种尺寸的屏幕。Bootstrap虽然带给我们很多的便利，但是很多情况下我们只需要用到它提供的栅格系统，其他组件...

Bootstrap带给大家最大的便利莫过于它的栅格系统，栅格系统帮助我们快速构建响应式的网页布局，以适配各种尺寸的屏幕。Bootstrap虽然带给我们很多的便利，但是很多情况下我们只需要用到它提供的栅格系统，其他组件样式我们更倾向于自己实现，为了给网站瘦身，我们往往需要抽取其中的一部分，我们甚至可以把前缀‘col-’去掉以尽量瘦身（在不压缩的情况下该文件9K，删除了col-后为8k，压缩情况下有没有删除col-都为6k）。 

Bootstrap媒体查询了3个尺寸，分别是大于768px，大于992px，大于1200px，即@media screen and (min-width: 768px)、@media screen and (min-width: 992px)、@media screen and (min-width: 1200px)。由于css文件是从上往下渲染网页的，所以渲染了前边的样式之后，若屏幕宽度小于768px，则下边的css样式不起作用，以达到移动设备优先的效果。那么设备宽度大于1200px的时候，3个媒体查询都成立，会执行哪一个呢？比如class=”col-lg-3 col-md-6”的时候。上边已经提到css是从上往下渲染网页的，当遇到相同样式属性时，编写在下边的样式属性会覆盖上边的样式属性。那么当设备宽度大于1200px时，由于col-md-6编写再col-lg-3之前，col-lg-3取缔了col-md-6的样式，所以样式为.col-lg-3{width:25%}。同理若设备宽度小于1200px大于992px那么由于@media screen and (min-width: 1200px)不成立，所以样式为.col-lg-6{width:50%}。如此类推。 

值得注意的时为了兼容ie可以使用bootstrap提供的js，以下出自菜鸟教程

<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

@charset "utf-8";

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,dl, dt, dd, ul, ol, li, form, fieldset, lengend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
}

q:before, q:after {
    content: '';
}

legend {
    color: #000;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

button, textarea {
    font-size: 100%;
    border: 0;
}

fieldset, img {
    border: 0;
}

a:hover {
    -webkit-transition: all .5s;
    transition: all .5s;
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
} /* common    ========================================================================== */
.fl {
    float: left;
    *display: inline;
    _display: inline;
}

.fr {
    float: right;
    *display: inline;
    _display: inline;
}

.clearfix:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
}

.clearfix {
    *zoom: 1;
} /* 栅格系统，移动设备优先    ========================================================================== */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.row:before, .row:after {
    content: "";
    display: table;
    clear: both;
}

.hide-xs {
    display: none!important;
}

.show-xs-block {
    display: block!important;
}

.show-xs-inline {
    display: inline!important;
}

.show-xs-inline-block {
    display: inline-block!important;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
}

.col-xs-1 {
    width: 8.33333333%;
}

.col-xs-2 {
    width: 16.66666667%;
}

.col-xs-3 {
    width: 25%;
}

.col-xs-4 {
    width: 33.33333333%;
}

.col-xs-5 {
    width: 41.66666667%;
}

.col-xs-6 {
    width: 50%;
}

.col-xs-7 {
    width: 58.33333333%;
}

.col-xs-8 {
    width: 66.66666667%;
}

.col-xs-9 {
    width: 75%;
}

.col-xs-10 {
    width: 83.33333333%;
}

.col-xs-11 {
    width: 91.66666667%;
}

.col-xs-12 {
    width: 100%;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.col-xs-offset-12 {
    margin-left: 100%;
}

@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }

    .hide-sm {
        display: none!important;
    }

    .show-sm-block {
        display: block!important;
    }

    .show-sm-inline {
        display: inline!important;
    }

    .show-sm-inline-block {
        display: inline-block!important;
    }

    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,   .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }
}

@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }

    .hide-md {
        display: none!important;
    }

    .show-md-block {
        display: block!important;
    }

    .show-md-inline {
        display: inline!important;
    }

    .show-md-inline-block {
        display: inline-block!important;
    }

    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,   .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }

    .col-md-1 {
        width: 8.33333333%;
    }

    .col-md-2 {
        width: 16.66666667%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .col-md-5 {
        width: 41.66666667%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58.33333333%;
    }

    .col-md-8 {
        width: 66.66666667%;
    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-10 {
        width: 83.33333333%;
    }

    .col-md-11 {
        width: 91.66666667%;
    }

    .col-md-12 {
        width: 100%;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-md-offset-12 {
        margin-left: 100%;
    }
}

@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }

    .hide-lg {
        display: none!important;
    }

    .show-lg-block {
        display: block!important;
    }

    .show-lg-inline {
        display: inline!important;
    }

    .show-lg-inline-block {
        display: inline-block!important;
    }

    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,   .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
    }

    .col-lg-1 {
        width: 8.33333333%;
    }

    .col-lg-2 {
        width: 16.66666667%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-4 {
        width: 33.33333333%;
    }

    .col-lg-5 {
        width: 41.66666667%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-7 {
        width: 58.33333333%;
    }

    .col-lg-8 {
        width: 66.66666667%;
    }

    .col-lg-9 {
        width: 75%;
    }

    .col-lg-10 {
        width: 83.33333333%;
    }

    .col-lg-11 {
        width: 91.66666667%;
    }

    .col-lg-12 {
        width: 100%;
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }

    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-lg-offset-9 {
        margin-left: 75%;
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-lg-offset-12 {
        margin-left: 100%;
    }
}
}

收起

展开全文

bootstrap table 不换行_Bootstrap栅格系统（二）
2020-12-05 21:24:21
千万不要说你会Bootstrap框架这个说实话现在是超级基础的框架了，并且偏向于UI界面的一款框架话不多说，让我们来看下栅格系统吧2.1 栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或...
收起
Bootstrap-栅格系统-列偏移
2021-01-27 22:07:32
在利用栅格系统进行开发的时候，我们有时候不想让其中的两列或者多列紧挨，而是列与列之间有一定的距离，所以就可以用列偏移来实现，而且这样实现的间距是动态的，不会像写死的margin那样，不会随屏幕的变化而动态...
收起
html5 css3 设计模式
web前端：bootstrap栅格系统：自适应多屏幕布局，手机设备、ipad、PC三端合一
2021-01-19 15:01:14
1.先看效果图 2.less自定义样式 ...<div class="container"> <div class="jumbotron"> <h1>bootstrap自适应多屏幕布局h1> <p>col-sm：小屏幕768px col-md：中屏幕992px col-lg：大屏幕1200pxp> div> <div class="row"> ...
收起
css html js css3
面试题:bootstrap栅格系统
2018-05-07 09:13:00
Bootstrap是一个支持响应式的Css框架它提供了很多组件，如导航条，面板，菜单，form表单，还有栅格，而且他们这些都是支持响应式的，可以在各种设备上进行完美的展现。这里面我感觉最有价值的就是bootstrap提供的...
收起
初涉Bootstrap —— 栅格系统介绍极其用法
2017-04-21 10:55:54
响应式设计：页面的设计与开发应当根据用户的行为以及设备环境（系统平台，屏幕尺寸、屏幕定向等）进行相应的响应和调整，具体的实践方式由多方面决定，包括弹性网络布局、图片使用等。无论用户在平板上还是pc上...
收起
Bootstrap(二)栅格系统
2019-09-14 15:22:38
页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸、屏幕定向等）进行相应的响应和调整，具体的实践方式由多方面决定，包括弹性网络布局、图片使用等。无论有户在平板上还是pc上应该能够自动切换...
收起
bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
2020-12-13 09:30:26
从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕（包括手机、平板、PC等等）设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。根据我的理解：如果在一个元素上使用多个不同的上面的样式类，那么...
收起
【BootStrap】栅格系统、表单样式与按钮样式-附有源码
千次阅读 2017-01-18 21:03:08
栅格系统1、栅格系统介绍Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。Bootstrap的栅格系统，由一个行(.row)和多个列构成。栅格系统...
收起
表单移动设备响应式
BootStrap栅格系统、表单样式与按钮样式源码解析
2020-11-27 23:21:51
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 Bootstrap的栅格系统，由一个行(.row)和多个列构成。栅格系统用于通过一系列的行（row...
收起
2.Bootstrap栅格系统&媒体查询
千次阅读 2016-08-16 15:32:38
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。如果此行无法容纳12列，多出的列会被移到下一行。栅格系统用于通过一系列的行（row）...
收起
响应式
2016年5月29日晚上（传智Bootstrap笔记四（栅格系统））
2016-05-29 20:48:00
一、栅格系统（网格系统）　1、栅格系统介绍　（1）Bootstrap提供了一套响应式、移动设备优先的...　Bootstrap的栅格系统，由一个行和多个列构成。栅格系统通过行列的形式来创建网页布局，把具体的数据放入列...
收起
Bootstrap学习系列（一）之栅格系统概述
2019-06-27 18:41:55
　这里主要介绍的是Bootstrap的所提供的一套响应式栅格系统，栅格系统故名思义就是把一个系统分成一个个栅格来进行布局，而Bootstrap把一些主流的屏幕或者视口，分成了一行最多12列（例如：col-md-1到col-md-12）来...
收起
响应式布局概念及bootstrap栅格系统简单的简单实现
2020-05-12 21:16:10
概念：对不同屏幕尺寸做出响应，并进行相应布局原理：使用媒体查询设置不同的断点，进行不同css布局响应优点：一个网站可以兼容多种终端，不需要重复开发缺点：工作量大、代码累赘、加载时间长、效率低、冗余代码...
收起
css3 html5
Bootstrap3.0学习第三轮(栅格系统案例)
2017-08-28 11:23:40
从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕（包括手机、平板、PC等等）设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。根据我的理解：如果在一个元素上使用多个不同的
收起
Bootstrap 栅格系统布局 .col-lg- .col-md- .col-sm- .col-xs-
千次阅读 2018-04-12 16:01:47
Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。栅格系统用于通过一系列的行（row）与列...
收起
Bootstrap有多难？
2021-01-08 17:14:15
所谓栅格化布局就是指把网页屏幕分成横向分十二份，在多大的媒体屏幕就分成多少份,使网页内容随着屏幕大小变化而变化，方便在各种媒体浏览网页。栅格化布局的写法 row指的是在网页里的一行，而col则指的是网页中这...
收起
BootStrap概述（一）
2020-09-25 21:57:27
文章目录BootStrap概述（一）1、什么是BootStrap2、BootStrap的好处是什么3、搭建BootStrap的开发环境4、BootStrap布局容器5、栅格系统5.1、BootStrap...BootStrap的栅格系统屏幕尺寸的设置及多个屏幕共同设置尺寸5.5、...
收起
css html java web javascript
Bootstrap学习笔记2--响应式布局与栅格样式
2019-09-26 20:58:28
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很...
收起

Bootstrap——栅格系统

Bootstrap——栅格系统

栅格系统

格式

自适应屏幕尺寸–分配12列

对齐方式

垂直对齐

水平对齐

排序： order-*

偏移 ： offset-{breakpoint}-*

间距

嵌套

Bootstrap3 栅格系统-栅格参数

Bootstrap栅格系统原理

Bootstrap栅格系统原理

Bootstrap栅格系统布局

栅格实现原理

Bootstrap栅格系统的使用详解

提取Bootstrap栅格系统

bootstrap table 不换行_Bootstrap栅格系统（二）

Bootstrap-栅格系统-列偏移

web前端：bootstrap栅格系统：自适应多屏幕布局，手机设备、ipad、PC三端合一

面试题:bootstrap栅格系统

初涉Bootstrap —— 栅格系统介绍极其用法

Bootstrap(二)栅格系统

bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等

【BootStrap】栅格系统、表单样式与按钮样式-附有源码

BootStrap栅格系统、表单样式与按钮样式源码解析

2.Bootstrap栅格系统&媒体查询

2016年5月29日晚上（传智Bootstrap笔记四（栅格系统 ））

Bootstrap学习系列（一）之栅格系统概述

响应式布局概念及bootstrap栅格系统简单的简单实现

Bootstrap3.0学习第三轮(栅格系统案例)

Bootstrap 栅格系统布局 .col-lg- .col-md- .col-sm- .col-xs-

Bootstrap有多难？

BootStrap概述（一）

Bootstrap学习笔记2--响应式布局与栅格样式

bootstrap多屏幕栅格

（三大特性：封装，继承、多态，Java 控制语句，Java容器）Java基础知识点

Windows系统管理

a2a-ip-trust-ip-configuration：用于访问IP音频信任组件的OpenShift构建和部署配置-源码

62-不同路径（矩阵路径）

[源码] Meidapipe框架分析——Packet

使用String存储和分配可用资源

OC.Gen-X.2.9.2.dmg

PPT大神之路高清教程

Unity RUST 逆向安全开发

PyTorch hub 模块

大数据分析关键技术.pptx

谈一谈php://input和php://output

第四章 C语言 PTA数组——作业-答案.html

MySQL 性能优化（思路拓展及实操）

快速幂解斐波那契数列

第五章 C语言 PTA函数——作业-答案.html

Samba 服务配置与管理

scala-intellij-bin-2020.3.20.zip

ELF视频教程

合同证明正版一元付费

偏移： offset-{breakpoint}-*

2016年5月29日晚上（传智Bootstrap笔记四（栅格系统））