常用样式
排版
标题
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>
表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
表单控件
.form-control .input-lg(较大).input-sm(较小)
输入框 text
.form-control
<div class="col-sm-3">
<input type="text" name=""id="" class="form-control" />
<input type="text" name=""id="" class="form-control input-lg" />
<input type="text" name=""id="" class="form-control input-sm" />
</div>
下拉选择框 select
多行选择设置:multiple=”multiple”
<div class="col-sm-3">
<select class="form-control">
<option> 北京 </option>
<option> 上海 </option>
<option> 深圳 </option>
</select>
<select class="form-control" multiple="multiple">
<option> 北京 </option>
<option> 上海 </option>
<option> 深圳 </option>
</select>
</div>
文本域 textarea
<div class="col-sm-3">
<textarea class="form-control" rows="3"></textarea>
</div>
复选框 checkbox
垂直显示:.checkbox
水平显示:.checkbox-inline
<!-- 垂直显示 -->
<div>
<div class="checkbox">
<label><input type="checkbox" > 游戏 </label>
</div>
<div class="checkbox">
<label><input type="checkbox" > 学习 </label>
</div>
</div>
<!-- 水平显示 -->
<div>
<label class="checkbox-inline">
<input type="checkbox" > 游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" > 学习
</label>
</div>
单选框 radio
垂直显示:.radio
水平显示:.radio-inline
<!-- 垂直显示 -->
<div>
<div class="radio">
<label><input type="radio" > 男 </label>
</div>
<div class="radio">
<label><input type="radio" > 女 </label>
</div>
</div>
<!-- 水平显示 -->
<div>
<label class="radio-inline">
<input type="radio" > 男
</label>
<label class="radio-inline">
<input type="radio" > 女
</label>
</div>
按钮
1)使用 button 实现
基础样式:btn
<button class="btn"> 按钮 </button>
附加样式:btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
<button class="btn btn-danger"> 按钮 </button>
<button class="btn btn-primary"> 按钮 </button>
<button class="btn btn-info"> 按钮 </button>
<button class="btn btn-success"> 按钮 </button>
<button class="btn btn-default"> 按钮 </button>
<button class="btn btn-warning"> 按钮 </button>
<button class="btn btn-link"> 按钮 </button>
2)多标签支持:使用 a div 等制作按钮
<a href="##" class="btn btn-info">a 标签按钮 </a>
<span class="btn btn-success">span 标签按钮 </span>
<div class="btn btn-warning">div 标签按钮 </div>
3)按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
<button class="btn btn-primary btn-xs"> 超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm"> 小型按钮.btn-sm</button>
<button class="btn btn-primary"> 正常按钮 </button>
<button class="btn btn-primary btn-lg"> 大型按钮.btn-lg</button>
4)按钮禁用
方法 1:在标签中添加 disabled 属性
<button class="btn btn-danger" disabled="disabled"> 禁用按钮 </button>
方法 2:在元素标签中添加类名 ”disabled”
<button class="btn btn-danger disabled"> 禁用按钮 </button>
在 class 属性中添加 disabled 只是样式上禁用了,并不是真正的禁用了此按钮!
表单布局
基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:
- 向父 <form> 元素添加 role=”form”。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class =”form-control”。
水平表单
同一行显示 form-horizontal
配合 Bootstrap 框架的网格系统
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="control-label col-sm-2"> 邮箱 </label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入邮箱"/>
</div>
</div>
<div class="form-group">
<label for="pwd" class="control-label col-sm-2"> 密码 </label>
<div class="col-sm-10">
<input type="pwd" class="form-control" placeholder="请输入密码" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<div class="checkbox">
<label>
<input type="checkbox" /> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default"> 提交 </button>
</div>
</div>
</form>
内联表单
将表单的控件都在一行内显示 form-inline
注意 label 不会显示,存在的意义:如果没有为输入控件设置 label 标签,屏幕阅读器将无法正确识别。
<form class="form-inline">
<div class="form-group">
<label for="email" > 邮箱 </label>
<input type="email" class="form-control" placeholder="请输入邮箱"/>
</div>
<div class="form-group">
<label for="pwd" > 密码 </label>
<input type="pwd" class="form-control" placeholder="请输入密码" />
</div>
<div class="form-group checkbox">
<label><input type="checkbox" /> 记住密码 </label>
</div>
<div class="form-group">
<button class="btn btn-default"> 提交 </button>
</div>
</form>
缩略图
缩略图在电商类的网站很常见,最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容,按钮等。
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/IMG_0131.JPG" alt="...">
<h3> 高圆圆 </h3>
<p> 出生于北京市,中国内地影视女演员、模特。</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span> 喜欢 </button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span> 评论
</button>
</div>
</div>
</div>
</div>
面板
默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。
.panel-default:默认样式
.panel-heading:面板头
.panel-body:面板主体内容
<div class="panel panel-success">
<div class="panel-heading">
......
</div>
<div class="panel-body">
......
</div>
</div>