全局CSS样式之排版,全局css样式之表单

作者:计算机知识

Bootstrap的排版样式差相当的少和html基本要素一样,没什么大的区分,就是对成分加了体制。

独自的表单控件会被电动赋予一些大局样式。全体安装了 .form-control 类的 <input><textarea><select> 成分都将被默许设置宽度属性为 width: 100%;。 将 label 成分和前面提到的控件包裹在 .form-group 中得以获得最棒的排列。

全局 CSS 样式

安装全局 CSS 样式;基本的 HTML 成分均能够经过 class 设置样式并取得升高成效;还应该有先进的栅格系统。

1.“行(row)”必须带有在 .container (固定宽度)或 .container-fluid (百分之百 宽度)中,以便为其予以合适的排列(aligment)和内补(padding)

(1)标题

1,内联表单

概览

深远摸底 Bootstrap 底层结构的首要部分,包含我们让 web 开采变得更加好、越来越快、更加强壮的最好推行。

2.内容应该放置于“列(column)”内,并且,唯有“列(column)”能够当作行(row)”的第一手子成分

HTML 中的全部题指标签,<h1><h6> 均可应用。其它,还提供了 .h1.h6 类,为的是给内联(inline)属性的文本赋予题指标体裁。

全局CSS样式之排版,全局css样式之表单。为 <form> 成分增加 .form-inline 类可使其内容左对齐并且表现为 inline-block 等级的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就能够使表单折叠)。

HTML5 文书档案类型

Bootstrap 使用到的一点 HTML 元素和 CSS 属性必要将页面设置为 HTML5 文书档案类型。在你项目中的种种页面都要参谋下边包车型地铁格式举行设置。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. ...
  4. </html>

 

3.通过为 .row 成分设置负值 margin 从而抵消掉为 .container 成分设置的 padding,也就直接为“行(row)”所富含的“列(column)”抵消掉了padding

代码如下:

(1)或然需求手动设置宽度

活动设备优先

在 Bootstrap 第22中学,大家对框架中的有个别重大部分扩充了对活动设备友好的体制。而在 Bootstrap 3 中,我们重写了百分百框架,使其一初始便是对运动设备友好的。此番不是简轻松单的充实一些可选的针对移动设备的体裁,而是径直融入进了框架的木本中。也正是说,Bootstrap 是活动道具优先的。针对移动设备的体制融入进了框架的每一种角落,而不是加多六个十三分的文本。

为了保证适当的绘图和触屏缩放,需求在 <head> 之中加多 viewport 元数据标签

复制

<meta name="viewport" content="width=device-width, initial-scale=1">

在活动装备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁止使用其缩放(zooming)功用。那样禁止使用缩放成效后,用户只可以滚动显示屏,就能够令你的网址看上去更像原生应用的以为。注意,这种措施大家并不推荐全数网站使用,还是要看您自个儿的图景而定!

复制

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4.装置分歧幅度显示器时分歧呈现, 栅格类适用于与屏幕宽度当先或等于分界点大小的设备

图片 1图片 2Code

在 Bootstrap 中,输入框和单选/多选框控件默许被安装为 width: 100%; 宽度。在内联表单,大家将这个因素的宽窄设置为 width: auto;,由此,多少个控件可以排列在同一行。根据你的布局需要,大概需求部分卓绝的定制化组件。

排版与链接

Bootstrap 排版、链接样式设置了主导的大局样式。分别是:

  • 为 body 成分设置 background-color: #fff;
  • 使用 @font-family-base@font-size-base 和 @line-height-base a变量作为排版的基本参数
  • 为全数链接设置了主题颜色 @link-color ,并且当链接处于 :hover 状态时才增加下划线

这一个样式都能在 scaffolding.less 文件中找到呼应的源码。

<div class="row">      col-md-4      col-md-8  </div>
   <div class="container">          <h1>h1</h1>          <h2>h2</h2>          <h3>h3</h3>          <h4>h4</h4>          <h5>h5</h5>          <h6>h6</h6>               </div>

(2)一定要增添 label 标签

Normalize.css

为了巩固跨浏览器表现的一致性,我们选取了 Normalize.css,这是由 Nicolas Gallagher 和 Jonathan Neal 维护的贰个CSS 重新载入参数样式库。

5.xs:手提式有线话机(<768px), sm:平板(≥768px), md:桌面显示屏(≥992px), lg:大桌面荧屏(≥1200px)

结果如下:

若是你从未为各类输入控件设置 label 标签,显示器阅读器将十分的小概准确识别。对于这一个内联表单,你能够经过为label 设置 .sr-only 类将其隐藏。还大概有部分扶持本事提供label标签的代替方案,比如 aria-labelaria-labelledbytitle 属性。要是那些都不存在,显示屏阅读器只怕会选拔利用 placeholder 属性,假使存在的话,使用占位符来代替别的的标志,但要注意,这种情势是不服帖的。

布局容器

Bootstrap 须要为页面内容和栅格系统包裹多个 .container 容器。我们提供了七个作此用处的类。注意,由于 padding等质量的来头,那二种容器类不能够相互嵌套。

.container 类用于固定宽度并协助响应式布局的容器。

  1. 复制
  2. <div class="container">
  3. ...
  4. </div>

 

.container-fluid 类用于 百分之百 宽度,侵夺全体视口(viewport)的器皿。

  1. 复制
  2. <div class="container-fluid">
  3. ...
  4. </div>

 

6.col-lg|md|sm|xs-* 表示栅格中占几列(左右都有15px的padding)

 

图片 3图片 4Code

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着显示器或视口(viewport)尺寸的充实,系统会活动分成最多12列。它包含了便于使用的预约义类,还恐怕有壮大的mixin 用于转移更具语义的布局。

7.col-lg|md|sm|xs-offset-* 表示栅格中偏移几列

图片 5

<form class="form-inline">    <div class="form-group">      <label class="sr-only" for="exampleInputEmail3">Email address</label>      <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">    </div>    <div class="form-group">      <label class="sr-only" for="exampleInputPassword3">Password</label>      <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">    </div>    <div class="checkbox">      <label>        <input type="checkbox"> Remember me      </label>    </div>    <button type="submit" class="btn btn-default">Sign in</button>  </form>

简介

栅格系统用于通过一多元的行(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-* 不存在, 也影响大显示屏设备。

由此钻研前边的实例,能够将那么些规律应用到你的代码中。

8.col-lg|md|sm|xs-push-* 表示栅格中列向右移动多少列(相对固定 left: 16.6666%)

骨子里正是html成分标签的h1-h6.可是,在标题内还足以包涵 <small> 标签或赋予 .small 类的要素,能够用来标志副标题。

 

传播媒介询问

在栅格系统中,我们在 Less 文件中使用以下媒体询问(media query)来创设关键的分界点阈值。

  1. 复制
  2. /* 超小屏幕(手机,小于 768px) */
  3. /* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
  4. ``
  5. /* 小屏幕(平板,大于等于 768px) */
  6. @media(min-width:@screen-sm-min){...}
  7. ``
  8. /* 中等屏幕(桌面显示器,大于等于 992px) */
  9. @media(min-width:@screen-md-min){...}
  10. ``
  11. /* 大屏幕(大桌面显示器,大于等于 1200px) */
  12. @media(min-width:@screen-lg-min){...}

 

咱俩临时也会在媒体询问代码中包含 max-width 从而将 CSS 的熏陶范围在越来越小范围的显示器尺寸之内。

  1. 复制
  2. @media(max-width:@screen-xs-max){...}
  3. @media(min-width:@screen-sm-min) and (max-width:@screen-sm-max){...}
  4. @media(min-width:@screen-md-min) and (max-width:@screen-md-max){...}
  5. @media(min-width:@screen-lg-min){...}

 

9.col-lg|md|sm|xs-pull-* 表示栅格中列向左移动多少列(相对固定 right: 16.6666%)

图片 6图片 7Code

2,水平排列的表单

栅格参数

透过下表能够详细查看 Bootstrap 的栅格系统是哪些在各样荧屏设备上行事的。

 

超小显示屏 手提式有线话机 (<768px)

小屏幕 平板 (≥768px)

中等荧屏 桌面显示屏 (≥992px)

大显示器 大桌面显示屏 (≥1200px)

栅格系统作为

一而再水平排列

起来是堆集在一齐的,当不仅这一个阈值时将改为水平排列C

.container 最急剧面

None (自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

最大列(column)宽

自动

~62px

~81px

~97px

槽(gutter)宽

30px (每列左右均有 15px)

可嵌套

偏移(Offsets)

列排序

10.hn(n为1-6), 其中1-3的margin: 20px 0px 10px; 4-6的margin:10px 0px; 个中还会有 .h1-.h6 的类

<div class="container">          <h1>h1. Bootstrap heading <small>Secondary text</small></h1>          <h2>h2. Bootstrap heading <small>Secondary text</small></h2>          <h3>h3. Bootstrap heading <small>Secondary text</small></h3>          <h4>h4. Bootstrap heading <small>Secondary text</small></h4>          <h5>h5. Bootstrap heading <small>Secondary text</small></h5>          <h6>h6. Bootstrap heading <small>Secondary text</small></h6>      </div>

经过为表单加多 .form-horizontal 类,并联名利用 Bootstrap 预置的栅格类,能够将 label 标签和控件组水平并排布局。那样做将改动 .form-group 的行为,使其显示为栅格系统中的行(row),因而就无需再额外增添 .row 了。

实例:从堆成堆到水平排列

采纳单一的一组 .col-md-* 栅格类,就能够创造贰个着力的栅格系统,在小叔子大和机械设备上一齐初是堆积在联合的(超小显示屏到小显示屏这一限量),在桌面(中等)荧屏设备上成为水平排列。全数“列(column)必须放在 ” .row 内。

图片 8

 

  1. <divclass="row">
  2. <divclass="col-md-1">.col-md-1</div>
  3. <divclass="col-md-1">.col-md-1</div>
  4. <divclass="col-md-1">.col-md-1</div>
  5. <divclass="col-md-1">.col-md-1</div>
  6. <divclass="col-md-1">.col-md-1</div>
  7. <divclass="col-md-1">.col-md-1</div>
  8. <divclass="col-md-1">.col-md-1</div>
  9. <divclass="col-md-1">.col-md-1</div>
  10. <divclass="col-md-1">.col-md-1</div>
  11. <divclass="col-md-1">.col-md-1</div>
  12. <divclass="col-md-1">.col-md-1</div>
  13. <divclass="col-md-1">.col-md-1</div>
  14. </div>
  15. <divclass="row">
  16. <divclass="col-md-8">.col-md-8</div>
  17. <divclass="col-md-4">.col-md-4</div>
  18. </div>
  19. <divclass="row">
  20. <divclass="col-md-4">.col-md-4</div>
  21. <divclass="col-md-4">.col-md-4</div>
  22. <divclass="col-md-4">.col-md-4</div>
  23. </div>
  24. <divclass="row">
  25. <divclass="col-md-6">.col-md-6</div>
  26. <divclass="col-md-6">.col-md-6</div>
  27. </div>

 

 

11.全局font-size: 14px; line-height: 1.428; 当中p成分还被设置了也就是 55%行高(即 10px)的平底外边距(margin: 0px 0px 10px)

 

图片 9图片 10Code

实例:流式布局容器

将最外侧的布局成分 .container 修改为 .container-fluid,就能够将一定宽度的栅格布局转换为 百分之百 宽度的布局。

  1. <div class="container-fluid">
  2. <div class="row">
  3. ...
  4. </div>
  5. </div>

 

12.

 

<form class="form-horizontal">    <div class="form-group">      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>      <div class="col-sm-10">        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">      </div>    </div>    <div class="form-group">      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>      <div class="col-sm-10">        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">      </div>    </div>    <div class="form-group">      <div class="col-sm-offset-2 col-sm-10">        <div class="checkbox">          <label>            <input type="checkbox"> Remember me          </label>        </div>      </div>    </div>    <div class="form-group">      <div class="col-sm-offset-2 col-sm-10">        <button type="submit" class="btn btn-default">Sign in</button>      </div>    </div>  </form>

实例:移动道具和桌面显示屏

是否不指望在小显示器设备上有着列都堆集在一齐?那就动用针对超小荧屏和高级中学级显示器设备所定义的类吧,即 .col-xs-*和 .col-md-*。请看上边包车型地铁实例,研商一下这么些是怎么着工作的。

图片 11

 

  1. <!--Stack the columns on mobile by making one full-width and the other half-width -->
  2. ``
  3. <div class="row">
  4. <div class="col-xs-12 col-md-8">.col-xs-12.col-md-8</div>
  5. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  6. </div>
  7. ``
  8. <!--Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  9. <div class="row">
  10. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  11. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  12. <div class="col-xs-6 col-md-4">.col-xs-6.col-md-4</div>
  13. </div>
  14. ``
  15. <!--Columns are always 50% wide, on mobile and desktop -->
  16. <div class="row">
  17. <div class="col-xs-6">.col-xs-6</div>
  18. <div class="col-xs-6">.col-xs-6</div>
  19. </div>

 

 

  .pull-left 左浮动

图片 12

 

实例:手机、平板、桌面

在地点案例的根基上,通过动用针对平板设备的 .col-sm-* 类,我们来创设尤其动态和庞大的布局吧。

图片 13

  1. <divclass="row">
  2. <divclass="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  3. <divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  7. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  8. <!-- Optional: clear the XS cols if their content doesn't match in height -->
  9. <divclass="clearfix visible-xs-block"></div>
  10. <divclass="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  11. </div>

 

  .pull-right 右浮动

 

3,被协助的控件

实例:多余的列(column)将另起一行排列

如若在一个 .row 内包罗的列(column)大于10个,包括多余列(column)的成分将用作贰个总体单元被另起一行排列。

 

图片 14

 

  1. <divclass="row">
  2. <divclass="col-xs-9">.col-xs-9</div>
  3. <divclass="col-xs-4">.col-xs-4<br>Since 9 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  4. <divclass="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
  5. </div>

 

 

  .center-block 将此因素左右居中

(2)页面主体

支撑大概具备的表单控件

响应式列重新载入参数

不畏有地点给出的四组栅格class,你也不免会蒙受一些标题,举个例子,在某个阈值时,某个列恐怕会冒出比其余列高的动静。为了克制这一主题材料,提议员联盟合利用 .clearfix 和 响应式工具类。

图片 15

  1. <divclass="row">
  2. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  3. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  4. ``
  5. <!-- Add the extra clearfix for only the required viewport -->
  6. <divclass="clearfix visible-xs-block"></div>
  7. ``
  8. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  9. <divclass="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  10. </div>

 

除去列在分界点清除响应, 您可能必要 重新载入参数偏移, 后推或前拉某些列。请看此栅格实例。

  1. <divclass="row">
  2. <divclass="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  3. <divclass="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
  4. </div>
  5. ``
  6. <divclass="row">
  7. <divclass="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  8. <divclass="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
  9. </div>

 

  .clearfix 清除浮动

Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这几个属性直接赋予 <body> 成分和具有段达成分。其它,<p> (段落)成分还被安装了非常 三分之二 行高(即 10px)的平底外边距(margin)。

 

使用 .col-md-offset-* 类能够将列向左边偏移。这个类实际是由此选择 * 选用器为当前因素增添了右手的边距(margin)。举个例子,.col-md-offset-4 类将 .col-md-4 元素向左侧偏移了4个列(column)的幅度。

  .show, .hidden, .invisible 设置成分显隐

 

现实详细的行使办法,我们能够登陆官方网址查阅补助文书档案

 

  .visible-xs|sm|md|lg-* 设置什么样设备时可知

实例


列偏移

图片 16

 

  1. <divclass="row">
  2. <divclass="col-md-4">.col-md-4</div>
  3. <divclass="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
  4. </div>
  5. <divclass="row">
  6. <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  7. <divclass="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  8. </div>
  9. <divclass="row">
  10. <divclass="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
  11. </div>

 

  .hidden-xs|sm|md|lg 设置哪些设备时隐藏

图片 17图片 18Code

嵌套列

为了利用内置的栅格系统将内容再度嵌套,能够因而抬高八个新的 .row 成分和一五种 .col-sm-* 成分到已经存在的.col-sm-* 成分内。被嵌套的行(row)所富含的列(column)的个数不可能凌驾12(其实,没有须求您不能够不占满12列)。

图片 19

 

  1. <divclass="row">
  2. <divclass="col-sm-9">
  3. Level 1: .col-sm-9
  4. <divclass="row">
  5. <divclass="col-xs-8 col-sm-6">
  6. Level 2: .col-xs-8 .col-sm-6
  7. </div>
  8. <divclass="col-xs-4 col-sm-6">
  9. Level 2: .col-xs-4 .col-sm-6
  10. </div>
  11. </div>
  12. </div>
  13. </div>

 

 

  .visible-xs|sm|md|lg-block|inline|inline-block 推荐使用此展现

  <div class="container">          <p>              Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.                Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.          </p>      </div>

列排序

经过动用 .col-md-push-* 和 .col-md-pull-* 类就能够很轻便的改造列(column)的次第。

图片 20

 

  1. <divclass="row">
  2. <divclass="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  3. <divclass="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
  4. </div>

 

 

  .sr-only 唯有显示器阅读器才显示

 

Less mixin 和变量

除却用于火速布局的约定义栅格类,Bootstrap 还含有了一组 Less 变量和 mixin 用于帮你生成轻易、语义化的布局。

  .lead 加黑字体展现

 

变量

由此变量来定义列数、槽(gutter)宽、媒体询问阈值(用于明确合适让列浮动)。大家选取那个变量生成预订义的栅格类,如上所示,还应该有如下所示的定制 mixin。

  1. @grid-columns: 12;
  2. @grid-gutter-width: 30px;
  3. @grid-float-breakpoint: 768px;

 

  .text-muted(法国红), .text-primary, .text-success, .text-info .text-warning, .text-danger 字体颜色设置

图片 21

mixin

mixin 用来和栅格变量一起使用,为各类列(column)生成语义化的 CSS 代码。

复制

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {// Then clear the floated columns
  .clearfix();@media (min-width: @screen-sm-min) {margin-left:  (@gutter / -2);margin-right: (@gutter / -2);}// Negative margin nested rows out to align the content of columns
  .row {margin-left:  (@gutter / -2);margin-right: (@gutter / -2);}}// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {position: relative;// Prevent columns from collapsing when empty
  min-height: 1px;// Inner gutter via padding
  padding-left:  (@gutter / 2);padding-right: (@gutter / 2);// Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {float: left;width: percentage((@columns / @grid-columns));}}// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {position: relative;// Prevent columns from collapsing when empty
  min-height: 1px;// Inner gutter via padding
  padding-left:  (@gutter / 2);padding-right: (@gutter / 2);// Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {float: left;width: percentage((@columns / @grid-columns));}}// Generate the small column offsets
.make-sm-column-offset(@columns) {@media (min-width: @screen-sm-min) {margin-left: percentage((@columns / @grid-columns));}}.make-sm-column-push(@columns) {@media (min-width: @screen-sm-min) {left: percentage((@columns / @grid-columns));}}.make-sm-column-pull(@columns) {@media (min-width: @screen-sm-min) {right: percentage((@columns / @grid-columns));}}// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {position: relative;// Prevent columns from collapsing when empty
  min-height: 1px;// Inner gutter via padding
  padding-left:  (@gutter / 2);padding-right: (@gutter / 2);// Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {float: left;width: percentage((@columns / @grid-columns));}}// Generate the medium column offsets
.make-md-column-offset(@columns) {@media (min-width: @screen-md-min) {margin-left: percentage((@columns / @grid-columns));}}.make-md-column-push(@columns) {@media (min-width: @screen-md-min) {left: percentage((@columns / @grid-columns));}}.make-md-column-pull(@columns) {@media (min-width: @screen-md-min) {right: percentage((@columns / @grid-columns));}}// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {position: relative;// Prevent columns from collapsing when empty
  min-height: 1px;// Inner gutter via padding
  padding-left:  (@gutter / 2);padding-right: (@gutter / 2);// Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {float: left;width: percentage((@columns / @grid-columns));}}// Generate the large column offsets
.make-lg-column-offset(@columns) {@media (min-width: @screen-lg-min) {margin-left: percentage((@columns / @grid-columns));}}.make-lg-column-push(@columns) {@media (min-width: @screen-lg-min) {left: percentage((@columns / @grid-columns));}}.make-lg-column-pull(@columns) {@media (min-width: @screen-lg-min) {right: percentage((@columns / @grid-columns));}}

  .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger 设置背景观

 

实例体现

您能够重新修改这几个变量的值,大概用暗中认可值调用这些mixin。上边就是多少个用到默许设置生成两列布局(列之间有距离)的案例。

复制

.wrapper {.make-row();}.content-main {.make-lg-column(8);}.content-secondary {.make-lg-column(3);.make-lg-column-offset(1);}

复制

<div class="wrapper"><div class="content-main">...</div><div class="content-secondary">...</div></div>

  <small> 将字体大小设置为父容器字体大小的85%, 对应类 .small

(3)中央内容

排版

  <mark> 高亮字体背景展示, 对应类 .lead

透过增添 .lead 类能够让段落优异呈现。

标题

HTML 中的全部标题的签,<h1> 到 <h6> 均可选拔。此外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文件赋予标题标体制。

h1. Bootstrap heading

Semibold 36px

h2. Bootstrap heading

Semibold 30px

h3. Bootstrap heading

Semibold 24px

h4. Bootstrap heading

Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px

复制

<h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6>

在标题内还是能够分包 <small> 标签或赋予 .small 类的成分,能够用来标识副标题。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text

复制

<h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2><h3>h3. Bootstrap heading <small>Secondary text</small></h3><h4>h4. Bootstrap heading <small>Secondary text</small></h4><h5>h5. Bootstrap heading <small>Secondary text</small></h5><h6>h6. Bootstrap heading <small>Secondary text</small></h6>

  <del> 被剔除的文书

图片 22图片 23Code

页面主体

Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这几个属性直接赋予 <body> 元素和有着段落元素。其余,<p> (段落)成分还棉被服装置了等于 三分之一 行高(即 10px)的最底层外边距(margin)。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

复制

<p>...</p>

  <s> 无用文本 类似 <del>

  <div class="container">          <div class="lead">              Welcome to our world          </div>          <p>              Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.               Nullam id dolor id nibh ultricies vehicula.          </p>      </div>

主干内容

通过加多 .lead 类能够让段落出色体现。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

复制

<p class="lead">...</p>

  <u> 为字体加下划线

 

动用 Less 工具创设

variables.less 文件中定义的四个 Less 变量决定了排版尺寸:@font-size-base 和 @line-height-base。第二个变量定义了大局 font-size 基准,第四个变量是 line-height 基准。大家运用那一个变量和局地大约的公式总计出其余具有页面成分的 margin、 padding 和 line-height。自定义那个变量就能够改造 Bootstrap 的私下认可样式。

  <ins> 插入的文书(尾巴部分有下划线, 类似<u>)

 

内联文本元素

  <strong>, <b> 加粗文本(改造font-weight)

图片 24

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

复制

You can use the mark tag to <mark>highlight</mark> text.

  <em>, <i> 斜体

(4 )内联文本成分

被去除的文本

对此被删除的文件使用 <del> 标签。

This line of text is meant to be treated as deleted text.

复制

<del>This line of text is meant to be treated as deleted text.</del>

  <abbr title="aaaaa"> 缩略语(bootstrap 会在其下加虚线 鼠标悬停时显示其title)

透过抬高 <mark>标签可以为成分增添背景颜色并高亮文本。

无用文件

对此没用的公文使用 <s> 标签。

This line of text is meant to be treated as no longer accurate.

复制

<s>This line of text is meant to be treated as no longer accurate.</s>

  .initialism 同盟<abbr> (font-size: 十分之七; 全体字母会大写)

实例:

插入文本

额外插入的文本使用 <ins> 标签。

This line of text is meant to be treated as an addition to the document.

复制

<ins>This line of text is meant to be treated as an addition to the document.</ins>

  <address> 专项使用来写地址的价签(margin-bottom: 20px;)

图片 25图片 26Code

心悸划线的文件

为文本增加下划线,使用 <u> 标签。

This line of text will render as underlined

复制

<u>This line of text will render as underlined</u>

运用 HTML 自带的意味强调表示的标签来为文本增添一点点体裁。

  <blockquote> 引用(border-left: 5px solid #eee; padding: 10px 20px;)

    <div class="container">          <div class="lead">              Welcome to our <mark>world</mark>          </div>               </div>

中号文本

对此没有须要强调的inline或block类型的文本,使用 <small> 标签包裹,其内的文书将被设置为父容器字体大小的 85%。标题成分中嵌套的 <small> 成分被设置分裂的 font-size 。

你还足认为行内元素赋予 .small 类以代表其余 <small> 元素。

This line of text is meant to be treated as fine print.

复制

<small>This line of text is meant to be treated as fine print.</small>

  blockquote footer, blockquote small {font-size: 80%; color: #777; 且在此之前会加"--"}

 

着重

经过增添 font-weight 值重申一段文本。

The following snippet of text is rendered as bold text.

复制

<strong>rendered as bold text</strong>

  .blockquote-reverse 右对齐

 

斜体

用斜体强调一段文本。

The following snippet of text is rendered as italicized text.

复制

<em>rendered as italicized text</em>

  .help-block 字体浅色

图片 27

Alternate elements

在 HTML5中得以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语,不分包其余重大的代表;而 <i> 标签主要用于发言、技艺词汇等。

  .text-muted:提醒, 使用浅桃红(#999)

在地点的结果中,world背景颜色形成了#fcf8e3,图片上看不清,大家能够在团结的浏览器中查看下,而且world也被高亮了。

对齐

透过文件对齐类,能够简轻松单方便的将文字重新对齐。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

复制

<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p>

      .text-primary:重要, 使用青蓝(#428bca)

(5)被删除的文书

变越来越大小写

通过那多少个类能够改造文本的大小写。

lowercased text.

UPPERCASED TEXT.

Capitalized Text.

复制

<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p>

  .text-success:成功, 使用深深紫红(#3c763d)

我们要出示有个别被去除的文本,能够采取<del>标签。

缩略语

当鼠标悬停在缩写和缩写词上时就能来得完整内容,Bootstrap 达成了对 HTML 的 <abbr> 成分的滋长体制。缩略语成分带有 title 属性,外观表现为含有较浅的虚线框,鼠标移至地点时会产生带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对运用辅帮手艺的用户也可知), 但须求包括 title 属性。

  .text-info:布告音讯, 使用纯白色(#31708f)

实例:

基本缩略语

An abbreviation of the word attribute is attr.

复制

<abbr title="attribute">attr</abbr>

  .text-warning:警告, 使用墨绿(#8a6d3b)

图片 28图片 29Code

首字母缩略语

为缩略语增添 .initialism 类,能够让 font-size 变得某些小些。

HTML is the best thing since sliced bread.

复制

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

  .text-danger:惊险, 使用蓝灰(#a94442)

 <div class="container">          <div class="lead">              Welcome to our <mark>world</mark>              <p>hello everybody <del>this is delete</del></p>          </div>               </div>     

地址

让关系音信以最临近一般行使的格式显示。在每行结尾加多 <br> 能够保存供给的体制。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@example.com

复制

<address><strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br><abbr title="Phone">P:</abbr> (123) 456-7890
</address><address><strong>Full Name</strong><br><a href="mailto:#">first.last@example.com</a></address>

13.文本对齐

本文由bwin必赢发布,转载请注明来源

关键词: bootstrap