2.2Bootstrap排版
2014-05-03 15:00
351 查看
1、标题
Html中的所有标题标签,从<h1>到<h6>均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。
<body>
<div class="page-container">
<h1 class="page-header">标题</h1>
<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>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
在标题内还可以包含
2、页面主体
Bootstrap将全局
Lead body copy
通过添加
3、强调
直接使用HTML中用于标注强调的标签,并给他们赋予少许的样式。
对于不需要强调的inline或block类型的文本,使用
你还可以为行内元素赋予
第一行是<small>This line of text is meant to be treated as fine print.</small>
第二行是<div>
<p class="small">
哈哈哈哈哈哈哈
</p>
</div>
通过增加font-weight强调一段文本。
用斜体强调一段文本。
通过文本对齐class,可以简单方便的将文字重新对齐。
很明显第一行左对齐,第二行居中,第三行右对齐。
这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。
4、缩略图
当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的
但需要包含title属性。
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含
为缩略语添加
5、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
6、引用
在你的文档中引用其他来源的内容。
将任何HTML裹在
对于标准样式的
命名来源:添加
会多一个Source Title
使用
向右对齐移动了额,当然也有相应的pull-left。
7、列表
顺序无关紧要的一列元素。
这个也很明显和Html的一样。
顺序至关重要的一组元素。
同理有序列表。
移除了默认的
通过设置
效果当然就是在一行了。
带有描述的短语列表。
记得这标签在Html当中也是存在的。
内联代码:在正文中通过
简单的效果
基本代码快:多行代码可以使用
简单效果
还可以使用
Html中的所有标题标签,从<h1>到<h6>均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。
<body>
<div class="page-container">
<h1 class="page-header">标题</h1>
<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>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
在标题内还可以包含
<small>标签或
.small元素,可以用来标记副标题。
2、页面主体
Bootstrap将全局
font-size设置为14px,
line-height为1.428 。这些属性直接赋给
<body>和所有段落元素。另外,
<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)。
Lead body copy
通过添加
.lead可以让段落突出显示。
3、强调
直接使用HTML中用于标注强调的标签,并给他们赋予少许的样式。
1.小号文本
对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的
<small>元素被设置不同的
font-size。
你还可以为行内元素赋予
.small以代替任何
<small>标签。
第一行是<small>This line of text is meant to be treated as fine print.</small>
第二行是<div>
<p class="small">
哈哈哈哈哈哈哈
</p>
</div>
2.着重
通过增加font-weight强调一段文本。<strong>rendered as bold text</strong>
3.斜体
用斜体强调一段文本。<em>rendered as italicized text</em>
4.对齐class
通过文本对齐class,可以简单方便的将文字重新对齐。<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p>
很明显第一行左对齐,第二行居中,第三行右对齐。
5.强调class
这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。<h1>强调Class</h1> <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <h1></h1>
4、缩略图
当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的
<abbr>元素的增强样式。缩略语元素带有
title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上,
但需要包含title属性。
基本缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
<abbr title="attribute">attr</abbr>
Initialism
为缩略语添加.initialism可以将其font-size设置的更小些。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
5、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加
<br>可以保留需要的样式。
<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>
6、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用,我们建议用
<p>标签。
<blockquote> <p>生命的意义不仅限于生存,云在青天水在瓶。</p> </blockquote>
引用选项
对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容。
命名来源:添加
<small>标签来注明引用来源。来源名称可以放在
<cite>标签里面。
<blockquote> <p>生命的意义不仅限于生存,云在青天水在瓶。</p> <small>本文来自于:<cite title="http:www.hehehe.com">来源链接</cite></small> </blockquote>
会多一个Source Title
另一种展示风格
使用.pull-right可以让引用展现出向右侧移动、对齐的效果。
<blockquote class="pull-right"> <p>生命的意义不仅限于生存,云在青天水在瓶。</p> </blockquote>
向右对齐移动了额,当然也有相应的pull-left。
7、列表
无序列表
顺序无关紧要的一列元素。<ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。<ol> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ol>
同理有序列表。
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。这这是针对直接子元素,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。
<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
内联列表
通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一列。
<ul class="list-inline"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
效果当然就是在一行了。
描述
带有描述的短语列表。<dl> <dt>.Lorem ipsum dolor sit amet</dt> <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd> </dl>
记得这标签在Html当中也是存在的。
水平排列的描述
.dl-horizontal可以让
<dl>内短语及其描述排在一行。开始是像
<dl>默认样式堆叠在一起,随着导航条逐渐展开而排列在一样。
内联代码:在正文中通过
<code>标签包裹内联样式的代码片段。
For example, <code><section></code> should be wrapped as inline.
简单的效果
基本代码快:多行代码可以使用
<pre>标签。为了正确的展示代码,注意将尖括号做转义处理。
<pre><p>Sample text here...</p></pre>
简单效果
还可以使用
.pre-scrollableclass,其作用是设置max-height为350px,并在垂直方向展示滚动条。
相关文章推荐
- 用户定制Web页中元素的排版布局策略
- 在DIV+CSS排版中新闻列表的制作方法
- dreamwaver 用DIV(层)排版的一些注意
- 学生时期的一些排版作品
- Browsers Series_排版引擎
- 我的程序(5):字符界面排版
- Java的移位操作(收集+纠正+排版)
- Div排版测试
- 中文排版CSS心得
- java文件的缩进排版
- Web页中的HTML元素的排版布局规则2
- AIX下C/C++源程序自动排版
- 1 排版
- android简单demo学习系例之排版(LinearLayout)[code-based]
- 一般的 DIV + CSS 三栏式排版
- Word“样式与格式”在排版中的妙用
- 测试代码排版工具
- Word论文排版
- 排版引擎列表
- 一个简单的css排版