罕用款式
如果须要更多材料点击下方图片⬇(备注来意)
排版
题目
Bootstrap 和一般的 HTML 页面一样,定义题目都是应用标签 <h1> 到 <h6>, 只不过 Bootstrap 笼罩了其默认的款式,应用其在所有浏览器下显示的成果一样。为了让非题目元素和题目应用雷同的款式,还特意定义了.h1~.h6 六个类名。同时前面能够紧跟着一行小的副标题或应用.small
<h1>h1. Bootstrap heading<small> 副标题 </small></h1>
<div class="h1">Bootstrap 题目 1 <span class="small"> 副标题 </span></div>
段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就是增大文本字号,加粗文本,而且对行高和 margin 也做相应的解决。能够应用以下标签给文本做突出款式解决:
: 小号字
: 加粗
: 斜体
<p class="lead"><small> 当前的 </small><b> 你 </b> 会 <i> 感激 </i> 当初 <em> 致力 </em> 的 <strong> 你 </strong></p>
强调
定义了一套类名,这里称其为强调类名,这些强调类都是通过色彩来示意强调,具本阐明如下:
.text-muted:提醒,应用浅灰色(#999)
.text-primary:次要,应用蓝色(#428bca).text-success:胜利,应用浅绿色(#3c763d)
.text-info:告诉信息,应用浅蓝色(#31708f).text-warning:正告,应用黄色(#8a6d3b).text-danger:危险,应用褐色(#a94442)
<div class="text-muted"> 提醒成果 </div>
<div class="text-primary"> 次要成果 </div>
<div class="text-success"> 胜利成果 </div>
<div class="text-info"> 信息成果 </div>
<div class="text-warning"> 正告成果 </div>
<div class="text-danger"> 危险成果 </div>
对齐成果
在 CSS 中经常应用 text-align 来实现文本的对齐格调的设置。
其中次要有四种格调:
左对齐,取值 left ;
居中对齐,取值 center;
右对齐,取值 right ;
两端对齐,取值 justify。
为了简化操作,方便使用,Bootstrap 通过定义四个类名来管制文本的对齐格调:.text-left:左对齐 .text-center:居中对齐 .text-right:右对齐 .text-justify:两端对齐。
<p class="text-left"> 我居左 </p>
<p class="text-center"> 我居中 </p>
<p class="text-right"> 我居右 </p>
<p class="text-justify"> 网格零碎的实现原理非常简单,仅仅是通过定义容器大小,平分 12 份(也有平分成 24 份或 32 份,但 12 份是最常见的),再调整内外边距,最初联合媒体查问,就制作出了弱小的响应式网格零碎。Bootstrap 框架中的网格零碎就是将容器平分成 12 份 </p>
列表
在 HTML 文档中,列表构造次要有三种:
无序列表(<ul><li>…</li></ul>)
有序列表(<ol><li>…</li></ol>)
定义列表(<dl><dt>…</dt><dd>…</dd></dl>)
去点列表
class=”list-unstyled”
<ul class="list-unstyled">
<li> 无序我的项目列表一 </li>
<li> 无序我的项目列表二 </li>
</ul>
内联列表
class=”list-inline”,把垂直列表换成程度列表,而且去掉我的项目符号(编号),放弃程度显示。也能够说内联列表就是为制作程度导航而生。
<ul class="list-inline">
<li> 首页 </li>
<li>java 学院 </li>
<li> 在线课堂 </li>
</ul>
定义列表
在原有的根底退出了一些款式,应用款式 class=”dl-horizontal” 制作程度定义列表 : 当题目宽度超过 160px 时,将会显示三个省略号。
<dl>
<dt>HTML</dt>
<dd> 超文本标记语言 </dd>
<dt>CSS</dt>
<dd> 层叠样式表是一种样式表语言 </dd>
</dl>
<dl class="dl-horizontal">
<dt>HTML 超文本标记语言 </dt>
<dd>HTML 称为超文本标记语言,是一种标识性的语言。</dd>
<dt> 测试题目不能超过 160px 的宽度, 否则 2 个点 </dt>
<dd> 我在写一个程度定义列表的成果,我在写一个程度定义列表的成果。</dd>
</dl>
代码
个别在集体博客上应用的较为频繁,用于显示代码的格调。在 Bootstrap 次要提供了三种代码格调:
(1)应用 来显示单行内联代码
(2)应用 <pre></pre> 来显示多行块代码
款式:pre-scrollable (height,max-height 高度固定, 为 340px, 超过存在滚动条)
(3)应用 来显示用户输出代码, 如快捷键
单行内联代码
<code>this is a simple code</code>
快捷键
<p> 应用 <kbd>ctrl+s</kbd> 保留 </p>
多行块代码
<!-- 代码会保留本来的格局,包含空格和换行 -->
<pre>
public class HelloWorld {public static void main(String[] args){System.out.println("helloworld...");
}
}
</pre>
<!--
显示 html 标签的代码须要适应字符实体
小于号(<)要应用硬编码“<”来代替,大于号 (>) 应用“>”来代替
-->
<pre>
<ul>
<li> 测试实体符 </li>
</ul>
</pre>
<!-- 当高度超过,会存在滚动条 -->
<pre class="pre-scrollable">
<ol>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
<li>...........</li>
</ol>
</pre>
表格
表格款式
Bootstrap 为表格提供了 1 种根底款式和 4 种附加款式以及 1 个反对响应式的表格。在应用 Bootstrap 的表格过程中,只须要增加对应的类名就能够失去不同的表格格调:
根底款式
1).table:根底表格
附加款式
1) .table-striped:斑马线表格
2) .table-bordered:带边框的表格
3) .table-hover:鼠标悬停高亮的表格
4). table-condensed:紧凑型表格,单元格没内距或者内距较其余表格的内距小
tr、th、td 款式
提供了五种不同的类名,每品种名管制了行的不同背景色彩
类 | 形容 | 实例 |
---|---|---|
.active | 将悬停的色彩利用在行或者单元格上 | <font color=”#f5f5f5″>#f5f5f5</font> |
.success | 示意胜利的操作 | <font color=”#dff0d8″>#dff0d8</font> |
.info | 示意信息变动的操作 | <font color=”#d9edf7″>#d9edf7</font> |
.warning | 示意一个正告的操作 | <font color=”#fcf8e3″>#fcf8e3</font> |
.danger | 示意一个危险的操作 | <font color=”#f2dede”>#f2dede</font> |
<table class="table table-bordered table-hover">
<tr class="active">
<th>JavaSE</th>
<th> 数据库 </th>
<th>JavaScript</th>
</tr>
<tr class="danger">
<td> 面向对象 </td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="success">
<td> 数组 </td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>