有关bootstrap之排版

1.标题

HTML中的所有标题标签,从<h1> 到 <h6> 均可用。另外,还提供了.h1 到.h6 class,为的是给inline属性的文本赋予标题的样式。

在标题内还可以包含<small>标签或.small元素,可以用来标记副标题。

2.页面主体

Bootstrap将全局font-size设置为14px,line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外,<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)。

通过添加 .lead 可以让文本段落突出显示。

对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。

你还可以为行内元素赋予.small以代替任何<small>标签。

通过增加font-weight 来着重强调一段文本。

用斜体强调一段文本:<em>rendered as italicized text</em>

还可以使用HTML5中定义的<b> 和 <i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示,<i>大部分用于发言、技术短语等情况。

3.对齐class。

通过文本对齐class,可以简单方便的将文本对齐。‘text-left’‘text-center’‘text-right’

4.强调class

text-primary,text-warning,等class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。

5.缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

基本的缩略语:如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。

为缩略语添加.initialism可以将其font-size设置的更小些

6.地址:

让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

<address>

  <strong>长安大街.</strong><br>

  第三大胡同<br>

  门牌号 CA 94107<br>

  <abbr title="Phone">P:</abbr> 010-667788</address>

<address>

  <strong>Full Name</strong><br>

  <a href="mailto:#">[email protected]</a></address>

  

7.引用:

将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用,建议用<p>标签。

对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容:

添加<small>标签或.small class 来注明引用来源。来源名称可以放在<cite>标签里面。

 1 <blockquote>
 2
 3   <p>锄禾日当午,汗滴禾下土</p>
 4
 5   <small>Someone famous in <cite title="Source Title">锄禾</cite></small></blockquote>
 6
 7 使用.pull-right可以让引用展现出向右侧移动、对齐的效果
 8
 9 <blockquote class=‘pull-right’>
10
11   <p>锄禾日当午,汗滴禾下土</p>
12
13   <small>Someone famous in <cite title="Source Title">锄禾</cite></small></blockquote>

8.列表:无序列表,有序列表,

无样式列表:添加 .list-unstyled; 移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。

内联列表:通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一列。

dl-dt-dd:

水平排列的描述:.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起,随着导航条逐渐展开而排列在一样。 其中有个自动截断:通过text-overflow,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。

时间: 2024-10-05 13:36:32

有关bootstrap之排版的相关文章

bootstrap 3 排版

一:标题: 1.大标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. 2.副标题 在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题. <h1>h1. Bootstrap heading <small>Secondary text</small></h1> 二:页面主体 b

Bootstrap(2) 排版样式

1.页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 10px):颜色被设置为#333. <p>Bootstrap 框架</p> <!-- 创建包含段落突出的文本 --> <p class="lead">Bootstrap 框架</p> <!-- 添加标记,<mark>

Bootstrap关于排版

1.Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式 2.使用了<small>标签来制作副标题,由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%:而在h4~h6内的字号都设置为当前字号的75%: 3.如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的 处理. 4.<b

Bootstrap之排版

标题 1.  h1 .h1 <small> 强调内容 如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理 粗体 粗体就是给文本加粗,在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗.在Bootstrap中,可以使用<b>和<strong>标签让文本直接加粗 斜体 除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可

bootstrap css排版

smart-form 单行元素: 一般用div包含,class="row" 列元素:用section包含,class="col col-x"(section带有margin-bottom,若想去除,可以使用div) 按钮和元素一般用label,class="类型",里面包含元素标签和span,span内为显示内容. smart-form中用row和col,别的地方不用,row作用只是margin:-14px 0 bootstrap form el

bootstrap基础排版优化(待续

1.标题 h1到h6元素重新定义了标准,并设置了上下外边距 h1到h6等6个class样式和以上元素样式一样,但没有上下外边距 在标题内使用small元素,显示小一点的字体,颜色为灰色,行间距为1,h1h2h3内字体为正常字体65%,h4h5h6则是75%. 2.页面主题 全局字体设置为14px,inline-height为20px,p元素中会有一个额外的10px的margin-bottom. 如果让一个段落突出,使用.lead样式,作用是增大字体大小.粗细.行间距.下边距. 3.强调文本 b,

Bootstrap学习-排版

1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h1>主标题 <small>副标题</small> </h1> 3.Body样式 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px;

bootstrap学习笔记--bootstrap排版类的使用

标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: 1 2 3 4 5 6 <h1>测试1 h1</h1> <h2>测试2 h2</h2> <h3>测试3 h3</h3> <h4>测试4 h4</h4> <h5>测试5 h5</h5> <h6>测试6 h6</h6> 内联子标题 如果需要

Bootstrap 排版 笔记

Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落.列表及其他内联元素 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式.请看下面的实例: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标题</title> &l