开发手册 欢迎您!
软件开发者资料库

Bootstrap - 排版

Bootstrap排版 - 从概述,环境设置,基本结构,全局样式,网格系统,流体网格系统,布局,响应式设计,排版,表格,按钮,图像,图标,下拉列表,按钮组开始,简单易学地学习Bootstrap ,导航元素,导航栏,面包屑,分页,标签,徽章,版式,缩略图,警报,进度栏,媒体对象,Javascript插件像过渡,模态,下拉列表,Scrollspy,选项卡,工具提示,弹出,警报,按钮,折叠,旋转木马,Typeahead,Affix,Glyphicons,Jumbotron,Demos。

Bootstrap在其默认字体堆栈中使用Helvetica Neue,Helvetica,Arial和sans-serif.使用Bootstrap的排版功能,您可以创建标题,段落,列表和其他内联元素.让我们看看以下各节中的每一个.

标题

所有HTML标题(h1到h6)都在Bootstrap中设置样式.示例如下所示 :

I'm Heading1 h1

I'm Heading2 h2

I'm Heading3 h3

I'm Heading4 h4

I'm Heading5 h5
I'm Heading6 h6

使用Bootstrap的上述代码段将产生以下结果 :

Lead Body Copy

要为段落添加一些重点,请添加class ="lead"。 这将为您提供更大的字体,更轻的重量和更高的线高,如下:

Lead Example

This is an example paragraph demonstrating    the use of lead body copy. This is an example paragraph    demonstrating the use of lead body copy.This is an example    paragraph demonstrating the use of lead body copy.This is an    example paragraph demonstrating the use of lead body copy.   This is an example paragraph demonstrating the use of lead body copy.

Emphasis

TML的默认强调标记(例如)将文本设置为父级大小的85%,强调具有较重字体权重的文本,强调斜体文本。


Bootstrap提供了一些类,可用于强调文本,如下所示:

This content is within tag
This content is within tag
This content is within tag and is rendered as italics
Left aligned text.

Center aligned text.

Right aligned text.

This content is muted

This content carries a primary class

This content carries a success class

This content carries a info class

This content carries a warning class

This content carries a danger class

Abbreviations

TML 元素为缩写或首字母缩略词提供标记,如WWW或HTTP。 Bootstrap样式元素,底部带有浅色虚线边框,并在悬停时显示全文(只要将该文本添加到 title属性)。 要获得稍小的字体大小,请将.initialism添加到

WWW
RSS

Addresses

使用

标记,您可以在网页上显示联系信息。 由于
默认显示:block; 你需要使用用于向包含的地址文本添加换行符的标记。

   Some Company, Inc.
   007 street
   Some City, State XXXXX
   P: (123) 456-7890
   Full Name
   mailto@somedomain.com

Blockquotes

您可以在任何HTML文本周围使用默认的

。 其他选项包括:添加标记以标识引用的来源,并使用类.pull-right右对齐blockquote。 以下示例演示了所有这些功能:

   

This is a default blockquote example. This is a default       blockquote example. This is a default blockquote       example.This is a default blockquote example. This is a       default blockquote example.

   This is a blockquote with a source title.   Someone famous in Source Title
This is a blockquote aligned to the right.   Someone famous in Source Title

列表

Bootstrap支持有序列表,无序列表和定义列表.

  • 有序列表 : 有序列表是按照某种顺序排列的列表,以数字开头.

  • 无序列表 : 无序列表是没有任何特定顺序的列表,传统上使用项目符号进行样式设置.如果您不希望显示项目符号,则可以使用类 .list-unstyled 删除样式.您还可以使用类 .list-inline 将所有列表项放在一行上.

  • 定义列表 : 在这种类型的列表中,每个列表项可以由< dt>组成.和< dd>元素. <峰; dt>代表定义术语,并且像字典一样,这是正在定义的术语(或短语).随后,< dd>是< dt>的定义.您可以在< dl>中创建术语和说明.使用class dl-horizontal 并排排列.

以下示例演示了这些中的每一个类型:

Example of Ordered List

       
  1. Item 1
  2.    
  3. Item 2
  4.    
  5. Item 3
  6.    
  7. Item 4

Example of UnOrdered List

       
  • Item 1
  •    
  • Item 2
  •    
  • Item 3
  •    
  • Item 4

Example of Unstyled List

   
  • Item 1
  •    
  • Item 2
  •    
  • Item 3
  •    
  • Item 4
  • Example of Inline List

       
  • Item 1
  •    
  • Item 2
  •    
  • Item 3
  •    
  • Item 4
  • Example of Definition List

       
    Description 1
       
    Item 1
       
    Description 2
       
    Item 2

    Example of Horizontal Definition List

       
    Description 1
       
    Item 1
       
    Description 2
       
    Item 2

    2009-2025 Copyright Wonhero.Com All Rights Reserved
    深圳幻海软件技术有限公司 版权所有