目录 搜索
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
文字

引导打印的文档和示例,包括全局设置、标题、正文、列表等。

全局设置

引导设置基本的全局显示、排版和链接样式。当需要更多的控制时,请查看文本实用程序类...

  • 用本机字体堆栈选择最好的font-family对于每个操作系统和设备。

  • 对于更具包容性和可访问性的类型扩展,我们假设浏览器默认根目录font-size(通常是16 px),这样访问者就可以根据需要自定义他们的浏览器默认值。

  • 使用$font-family-base,,,$font-size-base,和$line-height-base属性作为我们的打印基应用于<body>...

  • 设置全局链接颜色$link-color并仅在:hover...

  • 使用$body-bg设置background-color<body>%28#fff默认情况下%29。

这些样式可以在_reboot.scss中定义的全局变量_variables.scss.确保$font-size-baserem...

标题

所有HTML标题,<h1><h6>,都是可用的。

标题

<H1> </ H1>

H1.Bootstrap标题

<H2> </ H2>

H2.Bootstrap标题

<H3> </ H3>

H3.Bootstrap标题

<H4> </ H4>

H4.Bootstrap标题

<H5> </ H5>

H5.Bootstrap标题

<H6> </ H6>

H6.Bootstrap标题

<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>

.h1.h6类也是可用的,当您想要匹配标题的字体样式但不能使用关联的HTML元素时。

<p class="h1">h1. Bootstrap heading</p><p class="h2">h2. Bootstrap heading</p><p class="h3">h3. Bootstrap heading</p><p class="h4">h4. Bootstrap heading</p><p class="h5">h5. Bootstrap heading</p><p class="h6">h6. Bootstrap heading</p>

定制标题

使用包含的实用工具类重新创建Bootstrap 3中的小辅助标题文本。

<h3>
  Fancy display heading  <small class="text-muted">With faded secondary text</small></h3>

显示标题

传统的标题元素被设计为在页面内容的内容中发挥最佳效果。当您需要一个突出的标题时,请考虑使用显示标题-一种更大、稍微更固执己见的标题风格。

<h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1>

Lead


在某一段中加上.lead...

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

内联文本元素

常见的内联HTML 5元素的样式。

<p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p>

.mark.small类还可以应用与<mark><small>同时避免了标签带来的任何不必要的语义影响。

虽然上面没有显示,但请随意使用<b><i>在HTML 5中。<b>意思是突出强调单词或短语,而不传递额外的重要性。<i>主要用于语音、技术术语等。

文本实用程序

更改文本对齐、转换、样式、重量和颜色文本实用程序...

缩略语

HTML的样式化实现<abbr>元素的缩写和缩略词,以显示悬停上的扩展版本。缩写具有默认下划线,并获得帮助光标,以便在悬停和辅助技术的用户上提供附加上下文。

.initialism缩写为略小一点的字体大小。

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

区块引号

引用文档中另一个源的内容块。包扎<blockquote class="blockquote">任何HTML的引号。

<blockquote class="blockquote">  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>

命名源

加一个<footer class="blockquote-footer">来确认来源。将源工作的名称包装在<cite>...

<blockquote class="blockquote">  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>

对齐

根据需要使用文本实用程序更改区块引号的对齐方式。

<blockquote class="blockquote text-center">  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>


<blockquote class="blockquote text-right">  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote>

列表

未定型

删除默认值list-style和列表项%28直接子项上的左边距仅为%29。这仅适用于直接子列表项。,这意味着您还需要为任何嵌套列表添加类。

<ul class="list-unstyled">  <li>Lorem ipsum dolor sit amet</li>  <li>Consectetur adipiscing elit</li>  <li>Integer molestie lorem at massa</li>  <li>Facilisis in pretium nisl aliquet</li>  <li>Nulla volutpat aliquam velit    <ul>      <li>Phasellus iaculis neque</li>      <li>Purus sodales ultricies</li>      <li>Vestibulum laoreet porttitor sem</li>      <li>Ac tristique libero volutpat at</li>    </ul>  </li>  <li>Faucibus porta lacus fringilla vel</li>  <li>Aenean sit amet erat nunc</li>  <li>Eget porttitor lorem</li></ul>

内联

删除列表中的子弹,并施加一些光线margin两个班的组合,.list-inline.list-inline-item...

<ul class="list-inline">  <li class="list-inline-item">Lorem ipsum</li>  <li class="list-inline-item">Phasellus iaculis</li>  <li class="list-inline-item">Nulla volutpat</li></ul>

描述列表对齐

通过使用网格系统的预定义类%28或语义混合%29,水平对齐术语和描述。长期而言,您可以选择添加.text-truncate类以省略号截断文本。

<dl class="row">  <dt class="col-sm-3">Description lists</dt>  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>  <dt class="col-sm-3">Euismod</dt>  <dd class="col-sm-9">    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>    <p>Donec id elit non mi porta gravida at eget metus.</p>  </dd>  <dt class="col-sm-3">Malesuada porta</dt>  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>  <dt class="col-sm-3">Nesting</dt>  <dd class="col-sm-9">    <dl class="row">      <dt class="col-sm-4">Nested definition list</dt>      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>    </dl>  </dd></dl>

反应式排版

反应式排版指通过简单地调整根元素的文本和组件font-size在一系列媒体查询中。引导并不能为您完成这个任务,但是如果您需要它,添加它是相当容易的。

这是一个实践中的例子。随便选择font-sizeS和媒体查询您的愿望。

html {
  font-size: 1rem;}@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;  }}@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;  }}@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;  }}
 © 2011–2017 Twitter, Inc.

© 2011–2017 The Bootstrap Authors


根据MIT许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。

上一篇: 下一篇: