手记

玩转Bootstrap基础——排版

<small>副标题</small>

<p>我是一个普通的段落,我不需要强调显示</p>
<p class="lead">这部分内容需要特别的强调,我和别人长得不一样</p>
<p>我是一个段落,这个段落中“<strong>强调</strong>”一词将会加粗显示。</p>
<p>我正在学习<em>Bootstrap</em>。我发现<em>Bootstrap</em>真的好强大。</p>

强调相关的类:

.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442

文本对齐风格:

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

去点的项目列表 .list-unstyled

<ul class="list-unstyled">
    <li>不带项目符号</li>
    <li>不带项目符号</li>
</ul>

内联列表

添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。

<ul class="list-inline">
    <li>北京</li>
    <li>上海</li>
    <li>南京</li>
    <li>厦门</li>
</ul>

水平定义列表

水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果

<pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px一旦超出这个高度,就会在Y轴出现滚动条

2人推荐
随时随地看视频
慕课网APP

热门评论

请教下大神,我最近在搭建企业网站,用的是bootstrap框架,但是导航栏的样式需要自定义一下,但是用原生的很难改动,怎么办呢

查看全部评论