📌  相关文章
📜  Bootstrap-版式

📅  最后修改于: 2020-10-27 06:01:57             🧑  作者: Mango

 

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的代码段将产生以下结果-

内联副标题

要将内联子标题添加到任何标题，只需在任何元素周围添加或添加.small类，您将获得较浅颜色的较小文本，如下例所示-

现场演示
I'm Heading1 h1. I'm secondary Heading1 h1
 

I'm Heading2 h2. I'm secondary Heading2 h2


I'm Heading3 h3. I'm secondary Heading3 h3


I'm Heading4 h4. I'm secondary Heading4 h4


I'm Heading5 h5. I'm secondary Heading5 h5


I'm Heading6 h6. I'm secondary Heading1 h6

上面带有Bootstrap的代码段将产生以下结果-

铅正文复制

要增加对段落的强调，请添加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.

重点

HTML的默认强调标记(例如)将文本设置为父级大小的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

缩略语

HTML 元素提供缩写或首字母缩略词的标记，例如WWW或HTTP。引导程序样式化元素，底部带有浅点虚线边框，并在悬停时显示完整文本(只要将文本添加到 title属性)。要获得略小的字体大小，请在中添加.initialism。

现场演示
WWW

RSS

地址

使用<地址>标记，可以在网页上显示联系信息。由于

默认显示为：block;您需要使用

用于在包含的地址文本中添加换行符的标记。

现场演示

   Some Company, Inc.

   007 street

   Some City, State XXXXX

   P: (123) 456-7890





   Full Name

   mailto@somedomain.com

块引用

您可以在任何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类将所有列表项放在一行上。
  • 定义列表-在这种类型的列表中，每个列表项都可以包含
    和
    元素。
    代表定义术语，就像字典一样，这是正在定义的术语(或短语)。随后，
    是
    的定义。您可以使用dl-horizontal类在
    中并排排列术语和描述。

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

现场演示
Example of Ordered List


    
   
  1. Item 1
    2. 
   
  2. Item 2
    3. 
   
  3. Item 3
    4. 
   
  4. Item 4
    5. 




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