| Bootstrap 4 栅格 | 您所在的位置：网站首页 › col和iu哪个单位更小 › Bootstrap 4 栅格 |
|
栅格
Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。 机制原理Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，不同于旧版3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。下面的示例，可以让我们深入了解网格如何组合在一起。 三分之一空间占位 三分之一空间占位 三分之一空间占位 三分之一空间占位 三分之一空间占位 三分之一空间占位上面的例子使用BootStrap预定义的栅格系统，演示了在.container容器内建立了三个等宽的列，并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何，这三个列都是恒在呈现的。 让我们来慢慢揭开它的工作原理： 栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container(严格意义上也包括.container-fluid，后文相同不再备注-译者)应答网页宽度，或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。 换一个说法就是：.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐(译者注)。 行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。 网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-*以上添加呈现内容。 这一切都要感谢flexbox流式布局，从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列，比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。更多示例，请参阅本文档 自动布局列部分。 你可能注意到.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的(后文会有详细的介绍)。 .col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。 列具有水平padding定义，用于创建列与列之的间隙。 .row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6 .col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6 沟槽可以通过特定于断点的填充和负边距实用程序类来响应地调整装订线。 要更改给定行中的装订线，请在.row 上配置负边距实用程序，并在.col上配对匹配填充实用程序。 可能需要调整.container或.container-fluid 父级以避免不必要的溢出，再次使用匹配的填充实用程序. 这是一个在大(lg) 断点及以上定制Bootstrap网格的示例。 我们使用.px-lg-5增加了.col填充, 在父.row上使用.mx-lg-n5进行了抵消，然后使用.px-lg-5 调整了.container包装. Custom column padding Custom column padding Custom column padding Custom column padding 对齐使用flexbox对齐实用程序垂直和水平对齐列.Flex容器具有min-height时，Internet Explorer 10-11不支持弹性项目的垂直对齐，如下所示。 有关详细信息，请参阅Flexbugs＃3. 行列布局使用 .row-cols-* 类能够定义一个row空间中可放的列数，并支持不同的断点如.col-*、 .col-md-4，注意需要要写在 .row空间之中。 使用这个方法，你可以快速的进行布局行列. 定义每行显示两列： Column Column Column Column Column Column Column Column定义每行显示三列（多余的则换行排列）： Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column Column你可以在 Sass mixin处理, row-cols(): .element { // Three columns to start @include row-cols(3); // Five columns from medium breakpoint up @include media-breakpoint-up(md) { @include row-cols(5); } } Alignment我们使用 flexbox 布局，. Internet Explorer 10-11 不支持一些高度和垂直定义，因为这些浏览器的 min-height 属性不一定全局兼容flexbox布局. 查看 Flexbugs #3 -flexbox布局在IE浏览器BUG表. 垂直对齐示例 上边贴齐 上边贴齐 上边贴齐s 上下居中对齐 上下居中对齐 上下居中对齐 下边对齐 下边对齐 下边对齐 One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns 上边对齐 上下居中对齐 下边对齐 One of three columns One of three columns One of three columns 水平对齐示例 左贴齐对齐 左贴齐对齐 居中贴齐 居中贴齐 右贴齐对齐 右贴齐对齐 间隔相等对齐帖齐 间隔相等对齐帖齐 两端对齐帖齐 两端对齐帖齐 One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns 间隙沟槽(gutters)清除BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，您可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。 以下是创建这些样式的源代码。注意，列替换仅限于第一个子列，并通过属性选择器进行定位。当这产生一个更具体的选择器时，列填充仍然可以使用间隔实用程序进一步定制。 如果你需要无边缝设计(edge-to-edge design)，则请在父DIV中放弃.container与.container-fluid容器。 .no-gutters { margin-right: 0; margin-left: 0; > .col, > [class*="col-"] { padding-right: 0; padding-left: 0; } }下方为实际效果展示，您可以继续使用所有BootStrap预定义的栅格系统（包括列宽、响应层、属性、排序等）： .col-12 .col-sm-6 .col-md-8 .col-6 .col-md-4 .col-12 .col-sm-6 .col-md-8 .col-6 .col-md-4 列换行如果在一行内子DIV定义的栅格总数超过12列，BootStrap会在保留列完整的前提下，将无法平行布局的多余列，重置到下一行，并占用一个完整的新行。 .col-9 .col-4 Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. .col-6 Subsequent columns continue along the new line. .col-9 .col-4Since 9 + 4 = 13 ; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. .col-6Subsequent columns continue along the new line. 换行一般换行推荐使用添加多个.row来达成，否则你可以使用系统提供的.w-100方法处理，其思路是强行插入一个width:100%的DIV进行隔离切断（前文有两处提到,这是Flexbox流式布局的一个Hack，目前没有更好的方案）。 .col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3 .col-6 .col-sm-3也可以结合响应式实用程序来换行(切割)。 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 .col-6 .col-sm-4 重排序 Class顺序重定义使用 .order-* class选择符，可以对DIV空间进行 可视化排序,系统提供了.order-1到.order-1212个级别的顺序，在五种浏览器和设备宽度上都能生效。 1号空间-未定义序号，位置不变。 2号空间-排最后。 3号空间-放第1但受1号空间不变影响居第2位。 1号空间-未定义序号，位置不变。 2号空间-排最后。 3号空间-放第1但受1号空间不变影响居第2位。还可以使用.order-first，快速更改一个顺序到最前面，同时其它元素也相应的获得了order:-1的属性，这个属性也可以与。.order-*混合使用。 1号空间-未定义顺序。 2号空间-未定义顺序。 3号空间-优先排序，占第1位。 1号空间-未定义顺序。 2号空间-未定义顺序。 3号空间-优先排序，占第1位。 列偏移可以使用两种方式进行列偏应： 1、使用响应式的.offset-*栅格偏移方法。 2、使用边界处理实用程序，它内置了诸如.ml-*、.p-*、.pt-*等实用排工具。 class偏移选择器使用.offset-md-*类可以使列向右偏移，通过定义*的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。 .col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset-md-3 .col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset-md-3除了在响应断点处清除列，您可能需要重置偏移量，下面的栅格示例展示了这一点： .col-sm-5 .col-md-6 .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 .col.col-sm-6.col-md-5.col-lg-6 .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 .col-sm-5 .col-md-6 .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 .col.col-sm-6.col-md-5.col-lg-6 .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0 Margin移动布局在BootStrap V4中，你可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现类水平隔离的效果。 .col-md-4 .col-md-4 .ml-auto .col-md-3 .ml-md-auto .col-md-3 .ml-md-auto .col-auto .mr-auto .col-auto .col-md-4 .col-md-4 .ml-auto .col-md-3 .ml-md-auto .col-md-3 .ml-md-auto .col-auto .mr-auto .col-auto 列嵌套为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）数量推荐不要超过12个（其实，没有要求你必须占满12列-否则应对页面进行重新规划布局）。 Level 1: .col-sm-9 Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6 Level 1: .col-sm-9 Level 2: .col-8 .col-sm-6 Level 2: .col-4 .col-sm-6 Sass mixins用Bootstrap的源Sass文件时，你可以选择使用Sass变量，或者mixins，以创建自定义的、语义化的、响应式的网页布局。我们的预建类使用相同的变量以及mixins，为快速响应布局提供整个现成的套件。 变量变量决定列的数量、缝隙宽度以及切换到浮动列的媒体查询点，们用这些来生成上文提及的预定义网格列，定制出如下所示的自定义mixins： $grid-columns: 12; $grid-gutter-width: 30px; $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone sm: 576px, // Medium screen / tablet md: 768px, // Large screen / desktop lg: 992px, // Extra large screen / wide desktop xl: 1200px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px ); 混合MMixins用来联合网格变量，为每个网格列生成语义化的CSS。 // Creates a wrapper for a series of columns @include make-row(); // Make the element grid-ready (applying everything but the width) @include make-col-ready(); @include make-col($size, $columns: $grid-columns); // Get fancy by offsetting, or changing the sort order @include make-col-offset($size, $columns: $grid-columns); 应用案例你可以将变量修改为你自己定义的值，或者直接使用mixins的默认值。下面例子即使用默认设置创建两列布局以及一个列与列之间的缝隙： .example-container { width: 800px; @include make-container(); } .example-row { @include make-row(); } .example-content-main { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(8); } } .example-content-secondary { @include make-col-ready(); @include media-breakpoint-up(sm) { @include make-col(6); } @include media-breakpoint-up(lg) { @include make-col(4); } } 主要内容 次要内容 主要内容 次要内容 自定义栅格系统使用BootStrap v4内置的栅格系统之Sass变量和 maps文件，可以完全自定义自己的栅格格环境、并可以更改DIV层次、媒体查询维度和container容器宽度，然后重新编译。 自定义列和间隙以通过修改Sass变量、重定义栅格系统列的数量，使用$grid-columns命令可生成每个单独列的宽度（以百分比表示），同时$$grid-gutter-width允许在平行排列$padding-left和$padding-right对于平台间隔均匀分割的断点特定宽度。 $grid-columns: 12 !default; $grid-gutter-width: 30px !default; 自定义栅格超越自我，您还可以自定义网格层数。如果你只想要四个格子层，只要更新$$grid-breakpoints和$$container-max-widths等类参数。 $grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 1024px ); $container-max-widths: ( sm: 420px, md: 720px, lg: 960px );对Sass变量或map文件进行任何更改，都需要保存更改并重新编译。这样做将为列宽度，偏移量和排序输出一组全新的预定义栅格类。响应可见性实用程序也将更新为使用自定义断点，同时濂晨设置网格值时是采用px单位（而不是rem、em或%）。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |