Bootstrap入门基础(二)

    xiaoxiao2026-10-03  7

    Bootstrap入门基础(二)

    (网格系统、排版)

    1,网格选项

    后序学习中若遇到  xs , sm , md ,lg  要知道分别表示   手机设备,平板电脑,中型设备电脑,大型台式

    网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如(随便举例,可自己设置),3个 .col-xs-4  ;1个.col-sm-3 和 1个.col-sm-9   ;  2个.col-md-6

     超小设备手机(<768px)小型设备平板电脑(≥768px)中型设备台式电脑(≥992px)大型设备台式电脑(≥1200px)网格行为一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的最大容器宽度None (auto)750px970px1170pxClass 前缀.col-xs-.col-sm-.col-md-.col-lg-列数量和12121212最大列宽Auto60px78px95px间隙宽度30px (一个列的每边分别 15px)30px (一个列的每边分别 15px)30px (一个列的每边分别 15px)30px (一个列的每边分别 15px)可嵌套YesYesYesYes偏移量YesYesYesYes列排序YesYesYesYes 列偏移: .col-md-offset-*

    列嵌套:添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列

    列排序:使用 .col-md-push-* 和 .col-md-pull-*

    2,排版

    内联子标题 <small>

    引导主体副本 <lead>

    强调:<small>(设置文本为父文本大小的 85%)、<strong>(设置文本为更粗的文本)、<em>(设置文本为斜体)

    文本左对齐text-left ,(中、右) ,  文本减弱 text-muted

    缩写 <abbr>  .initialism   如:

    <abbr title="Real Simple Syndication" class="initialism">RSS</abbr> 列表:class .list-unstyled 来移除样式,  class .list-inline 把所有的列表项放在同一行中,    class dl-horizontal 把 <dl> 行中的属于与描述并排

    转载请注明原文地址: https://ju.6miu.com/read-1312567.html
    最新回复(0)