解读Bootstrap v4 sass设计

第一关于bootstrap从v3的less转到v4的sass的100000个为何,这里一时不表(安排会另起一篇文章相比较less,sass,postcss)。

关键词:Bootstrap v4  flex  栅格化   Bootstrap 插件

上次牵线了 Bootstrap 2 中附带的
typeahead,作用庞大,不过采用起来不太有利,作者 Terry 罗斯n
已经升任了二个新本子 v1.2.2,作出了异常的大的立异。

源码解读Bootstrap排版

源码解读Bootstrap导航

同台走进bootstrap v4 sass

近日看了下bootstrap 最新版本bootstrap-4.0.0-阿尔法.6 和此前Boostrap 3
牢固版变化有一点大,确实惊叹葡萄牙人的立异速度快,相同的时候作为前端开辟来讲,始终要保证节奏,这么些时代,变化太快了.

下载地址

粗体

基本功样式

1、bootstrap的sass文件都位居scss目录,为何名字是scss实际不是sass呢?首要涉及到sass与scss三种语法的界别,scss语法更类似css,所以更受我们爱护,使用更广泛。具体可参看
sass 语法

来讲说新本子首要的扭转:

动用意况

  • Twitter Bootstrap 2.0+
  • jQuery 1.7+

能够应用<b>和<strong>标签让文本间接加粗。
例如:

成立导航条主要透过“.nav”样式。暗中认可的“.nav”样式不提供暗中认可的导航样式,必需叠合其余二个体制才会使得,比如“nav-tabs”、“nav-pills”之类。譬如:

2、scss文件分为二种,一种是以下划线开头的如 _variables.scss
,一种是未曾下划线的如 bootstrap.scss
,那八个的分别是前面一个表示被导入的文本,暗中同意不会编写翻译成对应的css文件,而前者会编写翻译对应的css文件。所以如若有多少个文件
_a.scss , b.scss 私下认可编写翻译结果是独有 b.css 文件,纵然b要选择 _a.scss
中的样式,那么能够行使导入功效 @import a
(导入的文本是能够简单下划线及文件后缀名的)。具体也可参考 sass 语法

单位的转移,初步字体大小的转移 B4大略使用REM
(对于根成分的字体大小的单位), 与EM
(相对于父成分字体单位)有比不小分化.用REM近些日子任重(Ren Zhong)而道远适配Computer 手机 大屏手提式有线电话机.

页面计划

<link href="/path/to/bootstrap.css" rel="stylesheet">  <script src="/path/to/jquery.js" type="text/javascript"></script>  <script src="/path/to/bootstrap-typeahead.js" type="text/javascript"></script>

<p>笔者在念书<strong>Bootstrap</strong></p>

<ul class="nav">
  <li><a href="##">1</a></li>
  <li><a href="##">2</a></li>
  <li><a href="##">3</a></li>
</ul>

3、假设编译整个scss目录,大家可以拿到八个css文件,分为是 bootstrap.css ,
bootstrap-flex.css , bootstrap-reboot.css , bootstrap-grid.css
,那五个css样式分别由上边的多少个scss文件生成。

栅格化的变动

从V3版本的col- 起头, 它的珊格化是靠dispaly:float
;在通过数字分明占用一行的比重,很方便的布局

到了V4版本,改用display:flex
;弹性布局,那么些东西好,他能设置子块级成分对齐情势,子块级元素的排列格局.还是能够在同一行只设置一列的小幅度,别的自由填充,那是FLex的魅力.能够说比在此以前的V3版本更兼具灵活性..提及那,近年来非常的红的小程序,它的CSS布局教程也是使用Flex,看来Twiteer
Tencent 才能人士都从头放弃Float了. 新增一换行类”w-100″

脚本

$(myElement).typeahead(options);

源码

落实源码:

威尼斯娱乐城 1

视图断点的增添与名称改动

威尼斯娱乐城 2

视图断点(多了个Small device)

B4 抛弃了B3中的 hidden-xs, visibile-xs  改为 up  down 格局,
新添大荧屏手提式有线电话机方式

事件

事件 说明
grepper Filters relevant results from the source.
highlighter Highlights any matching results in the list.
itemSelected 当选中一个项目时的回调函数.

  • item: 选中的 HTML 元素
  • val: *val* 属性的值
  • text: *display* 属性的值
lookup Determines if source is remote or local and initializes the search.
matcher Looks for a match between the query and a source item.
render Renders the list of results.
select Selects an item from the results list.
sorter 排序结果.
b,
strong {
 font-weight: bold;
}
.nav {
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
}
.nav> li {
 position: relative;
 display: block;
}
.nav> li > a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
 background-color: #eee;
 border-color: #428bca;
}
.nav .nav-divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}
.nav> li > a >img {
 max-width: none;
}

bootstrap-reboot为重新恢复设置样式,bootstrap-grid为网格样式,那三个可以看做赠送的单身样式,固然有个别场景你不想行使成套bootstrap样式,不过又想用它的重新恢复设置或网格系统,那么能够直接行使那四个。

媒体类的充实

传播媒介类–像Tencent相爱的人圈情势这种,只要media   .media-body 就可以落成,
省去一些B3中的media-header  media-left 等
改用media新写法

开头化参数

名称 类型 默认值 说明
ajax object
{      url: null,      timeout: 300,      method: 'post',      triggerLength: 3,      loadingClass: null,      displayField: null,      preDispatch: null,      preProcess: null  }
The object required to use a remote datasource.
See also: ajax as a string (below)
ajax string null Optionally, a simple URL may be used instead of the AJAX object.
See also: ajax as an object (above)
display string ‘name’ The object property to match the query against and highlight in the results.
item string ‘<li><a ></a></li>’ The HTML rendering for a result item.
items integer 8 The maximum number of items to show in the results.
menu string ‘<ul ></ul>’ The HTML rendering for the results list.
source object [] The source to search against.
val string ‘id’ The object property that is returned when an item is selected.

斜体

标签形tab导航

bootstrap和bootstrap-flex的分歧是前边一个接纳守旧的布局方式,后面一个用的是的是flex格局,所以能够依据本人的实际情状选用使用。从下面图上得以见见
bootstrap-flex.scss 在导入 bootstrap.scss 从前,重新初始化了 $enable-flex:
true

细节方面调度

修改了原先段落外发行人20像素改为1rem;标题H1到H5的最上端距离多移

移除全部列表UL OL DL的最上端距离,跟段落相同1REM的底下距离,
内嵌列表移除上边距

未完——–这两日补完

中央选拔

设若利用当地数据的话一贯运用 source

var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];    $('#myElement').typeahead({      source: mySource  });

假设应用 Ajax 的话,可以直接内定url,注意,以往的版本供给必须接纳对象格局的数据源,私下认可呈现文本为对象的
name 属性,能够透过初阶化参数的 display 配置,默许的标志属性为 id
,可以运用 val 实行布署。

$('#myElement').typeahead({      ajax: '/path/to/mySource'  });

 

选取标签<em>或<i>来促成。
例如:

原导航“nav”上加码“nav-tabs”类名就可以,举例:<ul class=”nav
nav-tabs”>…</ul>。
兑现原理是将菜单项(li)按块展现,並且让他们在同样档期的顺序上排列,然后定义非高亮菜单的样式和鼠标悬浮效果。完成源码如下:

4、打开 bootstrap.scss
,能够看出个中程导弹入了各类文件,全体分为6大块,分别为:

使用 Ajax

$(function () {      $('#product_search').typeahead({          ajax: {              url: '@Url.Action("AjaxService")',              timeout: 300,                   // 延时              method: 'post',              triggerLength: 3,               // 输入几个字符之后,开始请求              loadingClass: null,             // 加载数据时, 元素使用的样式类              preDispatch: null,        // 发出请求之前,调用的预处理方法              preProcess: null         // Ajax 请求完成之后,调用的后处理方法          },          display: "name",     // 默认的对象属性名称为 name 属性          val: "id",           // 默认的标识属性名称为 id 属性          items: 8,            // 最多显示项目数量          itemSelected: function (item, val, text) {      // 当选中一个项目的时候,回调函数              console.info(item);          }      });  });

 如果大家必要在伏乞中,除了拉动搜索的参数之外,增添额外的乞请参数怎么做吧,能够透过
preDispatch
实行额外管理,需求小心的是,必须求回去一个目的,那些指标将用来使用
jQuery 的 Ajax 方法作为参数。

 $(function () {          $('#product_search').typeahead({              ajax: {                  url: '@Url.Action("AjaxService")',                  timeout: 300,                   // 延时                  method: 'post',                  triggerLength: 3,               // 输入几个字符之后,开始请求                  loadingClass: null,             //                  preDispatch: function (query) {                      var para = { other: 'xxxxxxxxx' };                      para.query = query;                      return para;                  },                    preProcess: function (result) {                      return result;                  }              },              display: "name",     // 默认的对象属性名称为 name 属性              val: "id",           // 默认的标识属性名称为 id 属性              items: 8,            // 最多显示项目数量              itemSelected: function (item, val, text) {      // 当选中一个项目的时候,回调函数                  console.info(item);                  // console.info($("#product_search").val());                }          });      });

 

 

 

 

 

威尼斯娱乐城, 

 

 


<p>我在学<i>Bootstrap</i>。</p>

.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}

variable & mixin:引进变量及mixin文件,其中 _mixin.scss
文件中程导弹入了mixin目录中的全部文件
reset:引入normalize 及 print文件
core:引进基础样式文件,如grid,form,table,button等
component:引进组件文件,如nav,card,breadcrumb等
component js:引进须要js调整的机件文件,如modal,tooltips等
utility:引入一些全站的class文件,里面有个别通用的class,如clearfix,center-block等

重申相关的类

要让哪个项是选中项,只必要在其标签上增多类名“class=”active”就可以。
兑现源码如下:

哪些采用并修改bootstrap v4的体制

重申类都以经过颜色来表示着重提出
.text-muted:提示,使用浅深暗黄(#777)
.text-primary:主要,使用石榴红(#428bca)
.text-success:成功,使用淡黄绿(#3c763d)
.text-info:通知音信,使用灰湖金红(#31708f)
.text-warning:警告,使用紫蓝(#8a6d3b)
.text-danger:危急,使用鲜蓝(#a94442)
例如:

.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
 color: #555;
 cursor: default;
 background-color: #fff;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
}

假让你对sass明白的话,能够直接利用其sass;当然倘使您不熟习sass的话,能够到目录dist/css中找到编译好的
bootstrap.css 。

<div
class=”text-primary”>.text-primary效果</div>

要让哪个项禁止使用,只供给在标签项上助长“class=”disabled”就可以。实现源码如下:

上边大家先说下直接行使css的:

源码

.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}

在html中引入 <link href=”bootstrap.css” rel=”stylesheet” />
如需修改bootstrap样式,可另建多个样式表如 style.css
,覆盖bootstrap样式。不建议直接改变开采 bootstrap.css
样式表修改既然是用sass写的,那当然大家能够挑选越来越高逼格的sass了,同样sass也可以有三种修改章程,一种是非破坏性的,一种是破坏性的。

.text-muted {
 color: #777;
}
.text-primary {
 color: #428bca;
}
a.text-primary:hover {
 color: #3071a9;
}
.text-success {
 color: #3c763d;
}
a.text-success:hover {
 color: #2b542c;
}
.text-info {
 color: #31708f;
}
a.text-info:hover {
 color: #245269;
}
.text-warning {
 color: #8a6d3b;
}
a.text-warning:hover {
 color: #66512c;
}
.text-danger {
 color: #a94442;
}
a.text-danger:hover {
 color: #843534;
}

胶囊形pills导航

对此破坏性的,那正是哪个地方不及意就修改哪个地方了,没什么高招。这里说下对于非破坏性的运用修改,大家得以行使如下方法:

文件对齐风格

原导航“nav”上扩充“nav-pills”类名就可以,比如:<ul class=”nav
nav-pills”>…</ul>。
福寿绵绵源码如下:

把bootstrap的有所scss文件放在bootstrap目录

.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
例如:

.nav-pills > li {
 float: left;
}
.nav-pills > li > a {
 border-radius: 4px;
}
.nav-pills > li + li {
 margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
 background-color: #428bca;
}
scss
bootstrap 目录 (原先bootstrap中scss目录所有文件)
bootstrap.scss
...
mixin目录
...
_custom-variables.scss (自定义的变量,或覆盖bootstrap的变量)
_custom-mixin.scss(自定义的mixin)
style.scss

<p
class=”text-left”>我居左</p>

笔直导航

style.scss 代码如下:

源码:

创造垂直堆放导航只需求在“nav-pills”的底蕴上增加贰个“nav-stacked”类名就可以。举个例子:
<ul class=”nav nav-pills nav-stacked”>…</ul>
垂直导航与胶囊形导航比较,主若是让导航项不转变,让其垂直排列,然后给相邻导航项留有一定的间隔。
兑现源码如下:

@charset "UTF-8";
// 导入文件
@import "custom-variables";
@import "custom-mixin";
@import "bootstrap/bootstrap";
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.nav-stacked > li {
 float: none;
}
.nav-stacked > li + li {
 margin-top: 2px;
 margin-left: 0;
}

本来即使有代码洁癖的,那对于毫无的体制总是想砍掉的,于是再度拿起
bootstrap.scss
审视,把那么些无需的样式,直接去掉import不就好了吗。借使虚构到后来晋升什么的,那照旧创设个新文件,想要什么就自身按照bootstrap.scss
中的方法引进就能够了。对于组件样式,必要就引进,无需就不引进,不过一定要注意core与utility的体裁,因为大概你的零部件中就用了这么些基础的体制

方今两端对齐在各浏览器下深入分析各有分裂,特别是利用于国文文本的时候。所以项目中慎用。

要在导航项之间加分隔线,在导航项之间加<li
class=”nav-divider”></li>就可以。
完毕源码如下:

什么改进bootstrap v4的sass设计

列表

.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

从个人实战的经历角度出发,感到bootstrap
v4有如下几点缺欠:(仅为个人观点)

Bootstrap对于列表,只是在margin上做了部分调治
源码:

自适应导航

能够尤其进行目录规划,如把具有的零件文件都投身component目录,utility文件放在utility目录,那样看起来更有组织性,今后有一些零星,看上去某些乱
未曾 % 设计,个人以为 %
的设计是三个升高,对于样式的结合注脚非常实用,特别是一对简单的合营代码什么的。

ul,
ol {
 margin-top: 0;
 margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
 margin-bottom: 0;
}

在“nav”上平添三个“nav-justified”类名就能够。举个例子:<ul class=”nav
nav-justified”>
金玉锦绣原理是,列表<ul>上安装宽度为“百分百”,然后每一个菜单项<li>设置了“display:table-cell”,让列表项以模拟表格单元格的花样显得。实现源码如下:

可提供一个scss文件,整合了variables和mixin的成效,那样就能够方便新起样式文件,直接导入那么些组成的公文,variables和mixin随意用组件的变量评释,能够献身各自的机件scss中,因为独有组件会用,并不是联合放在variables文件,那样显得variables文件相比较臃肿mixin设计有些太多,连size都有三个mixin文件,认为微微过。

去点列表

.nav-justified {
 width: 100%;
}
.nav-justified > li {
 float: none;
}
.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-justified > li {
 display: table-cell;
 width: 1%;
 }
 .nav-justified > li > a {
 margin-bottom: 0;
 }
}

给冬日列表增添叁个类名“.list-unstyled”,那样就足以去除私下认可的列表样式的作风。
例如:

“nav-tabs”和“nav-justified”合营在同步行使正是自适应选项卡导航,实现源码如下:

<ol class="list-unstyled">
 <li>不带项目编号</li>
 <li>不带项目编号</li>
</ol>
.nav-tabs.nav-justified {
 width: 100%;
 border-bottom: 0;
}
.nav-tabs.nav-justified > li {
 float: none;
}
.nav-tabs.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li {
 display: table-cell;
 width: 1%;
 }
.nav-tabs.nav-justified > li > a {
 margin-bottom: 0;
 }
}
.nav-tabs.nav-justified > li > a {
 margin-right: 0;
 border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border: 1px solid #ddd;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li > a {
 border-bottom: 1px solid #ddd;
 border-radius: 4px 4px 0 0;
 }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border-bottom-color: #fff;
 }
}

源码:

“nav-pills”和“nav-justified”协作在一道利用正是自适应胶囊型导航,原理同上。

.list-unstyled {
padding-left: 0;
list-style: none;
}

导航加下拉菜单

内联列表

导航加下拉菜单相当于二级导航,只须求将li当作父容器,使用类名“dropdown”,同一时间在li中嵌套另三个列表ul下拉菜单就能够。举例:

透过丰盛类名“.list-inline”来兑现内联列表,其实就是把垂直列表换来水平列表,并且去掉项目的记,保持水平显得。可以用来做水平导航。
源码:

<ul class="nav nav-pills">
  <li><a href="##">首页</a></li>
  <li class="dropdown">
    <a href="##" class="dropdown-toggle" data-toggle="dropdown">数字</a>
    <ul class="dropdown-menu">
      <li><a href="##">1</a></li>
      <li><a href="##">2</a></li>
    </ul>
  </li>
  <li><a href="##">关于我们</a></li>
</ul>
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

面包屑式Breadcrumb导航

概念列表

面包屑没有需求动用“nav”,一般意义是告诉客户未来所处页面包车型大巴地点。为ol到场“breadcrumb”类名就能够。比方:

Bootstrap只是调解了行间距,外边距和字体加粗效果
源码:

<ol class="breadcrumb">
 <li><a href="#">111</a></li>
 <li><a href="#">222</a></li>
 <li class="active">333</li>
</ol>
dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

落到实处源码如下:

水平定义列表

.breadcrumb {
 padding: 8px 15px;
 margin-bottom: 20px;
 list-style: none;
 background-color: #f5f5f5;
 border-radius: 4px;
}
.breadcrumb > li {
 display: inline-block;
}
.breadcrumb > li + li:before {
 padding: 0 5px;
 color: #ccc;
 content: "/\00a0";
}
.breadcrumb > .active {
 color: #777;
}

水平定义列表如同内联列表同样,加多类名“.dl-horizontal”给定义列表达成程度显得效果。
源码:

上述就是本文的全体内容,希望对我们的就学抱有支持,也期待大家多多协助脚本之家。

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
 }
.dl-horizontal dd {
margin-left: 180px;
 }
}

您大概感兴趣的稿子:

  • Bootstrap每一天必学之导航条
  • Bootstrap完成响应式导航栏效果
  • Bootstrap落成暗中认可导航栏效果
  • Bootstrap天天必学之导航
  • 先是次接触奇妙的Bootstrap菜单和导航
  • Bootstrap导航栏各因素操作方法(表单、按键、文本)
  • Bootstrap天天必学之附加导航(Affix)插件
  • 先是次接触美妙的Bootstrap导航条
  • Bootstrap每一天必学之响应式导航、轮播图
  • Bootstrap多级导航栏(级联导航)的兑当代码

这里增加了三个传媒询问。相当于说,唯有显示屏大于768px的时候,加多类名“.dl-horizontal”技术有水平定义列表效果。当收缩浏览器显示器时,水平定义列表将上涨到原有的情况。

代码

重大提供了三种代码风格:
<code></code>显示单行内联代码,一般是指向于单个单词或单个句子的代码
<pre></pre>来呈现多行块代码,一般是针对于多行代码(也正是成块的代码)
<kbd></kbd>来展现顾客输入代码,一般是意味客商要透过键盘输入的剧情
在pre标签上加多类名“.pre-scrollable”,就足以调节代码块区域最大惊人为340px,一旦当先那些中度,就能够在Y轴现身滚动条。
源码:

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个帮忙响应式的报表。
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的报表
.table-hover:鼠标悬停高亮的报表
.table-condensed:紧密型表格
.table-responsive:响应式表格
举例要利用斑马线表格而且鼠标悬停高亮:

<table class=”table table-striped
table-bordered table-hover”>

响应式表格的用法和另外多少个不等。
Bootstrap提供了一个器皿,而且此容器设置类名“.table-responsive”,此容器就颇具响应式效果,然后将<table
class=”table”>置于这些容器在这之中,那样表格也就全部响应式效果。
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格头部会晤世水平滚动条。当您的浏览器可视区域大于768px时,表格尾巴部分水平滚动条就能够消亡。示举例下:

<div class="table-responsive">
<table class="table table-bordered">
 …
</table>
</div>

表格行的类

tr有各类差别的类名,能够来得行的例外的颜色
.active 代表近期移动的音讯
.success 代表成功照旧正确的行为
.info 代表中立的新闻或行为
.warning 表示警告,需求非常注意
.danger 表示危险也许可能是不当的作为
例如:

<tr class=”active”>

正文系列教程整理到:Bootstrap基础教程
专项论题中,款待点击学习。

以上正是本文的全体内容,希望对大家的读书抱有帮忙,也愿意大家多多扶助脚本之家。

你也许感兴趣的作品:

  • 先是次接触玄妙的Bootstrap基础排版
  • 第五篇Bootstrap 排版
  • 需灵活通晓的Bootstrap预订义排版类
    你明白呢?
  • Bootstrap3.0建站教程(一)之bootstrap表单成分排版
  • Bootstrap3学习笔记(二)之排版
  • 其次章之Bootstrap
    页面排版样式
  • Bootstrap入门汉朝竹简之(一)排版
  • 完美解析Bootstrap排版使用方式(文字样式)
  • 布帆无恙深入分析Bootstrap排版使用方式(标题)
  • Bootstrap天天必学之基础排版

相关文章