Bootstrap学习笔记(二)
这一节笔记主要记录排版内容笔记,其内容包括标题、文本(包括段落、粗斜体、对齐)、列表、表格等。
一、标题
在bootstrap中H1-H6与非框架版的区别不大,需要注意的是<small>标签,在bootstrap中<small></small>标签中的文字设置成了灰色(#999)
二、文字
1.段落
全局文本为14px,行高大约是20px,颜色为深灰色(#333),字体是"Helvetica Neue", Helvetica, Arial, sans-serif;
2.强调
类名 .lead 做了加粗字号变大等强调处理
.text-muted 提示,使用浅灰色(#999)
.text-primary 主要,蓝色(#428bca)
.text-success 成功,浅绿色(#3c763d)
.text-info 通知信息,浅蓝色(#31708f)
.text-warning 警告,使用黄色(#8a6d3b)
.text-danger 危险,褐色(#a94442)
3.对齐
.text-left 左对齐
.text-center 居中对齐
.text-right 右对齐
.text-justify 两端对齐
三、列表
.list-unstyled 去点,去除默认列表风格样式
.list-liline 内联列表,去掉符号,且水平显示
.dl-horizontal 水平定义列表,在宽屏是<dd>内容自动与<dt>处于同一行
四、表格
.tabel 基础表格,表格
.table-striped 斑马线表格
.table-bordered 带边框表格
.table-hover 鼠标悬停高亮表格
.table-condensed 紧凑型表格
.table-responsive 响应式表格
表格行类:
.active 表示当前活动的信息(#f5f5f5)
.success 表示成功或正确的行为(#dff0d8)
.info 表示中立的信息或行为(#d9edf7)
.warning 表示警告(#fcf8e3)
.danger 表示危险或者可能是错误的行为(#f2dede)
(注:以上行类除.active外,其他需要配合"table-hover"来使用)
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>类名</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>.active</td>
<td>表示当前活动的信息</td>
</tr>
<tr class="success">
<td>.success</td>
<td>表示成功或者正确的行为</td>
</tr>
<tr class="info">
<td>.info</td>
<td>表示中立的信息或行为</td>
</tr>
<tr class="warning">
<td>.warning</td>
<td>表示警告,需要特别注意</td>
</tr>
<tr class="danger">
<td>.danger</td>
<td>表示危险或者可能是错误的行为</td>
</tr>
</tbody>
</table>
Bootstrap学习笔记(二)的更多相关文章
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记<二>(标题,段落样式)
标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
随机推荐
- UVA 11210 中国麻将
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 机电传动控制 PLC梯形图编程练习
交通灯控制 在如下图的场景中,打开SW1开关后,交通灯控制器开始工作,关闭SW1则控制器停止工作. 梯形图: 仿真结果: 可以满足所需要求. 输送带控制 输送带场景如下图: 梯形图: 仿真结果: 满足 ...
- for循环j = j++ 和 j = ++j
package com.test.forname; public class TestForName { public static void main(String[] args) throws E ...
- 关于json-p
关于json-p 目录 关于json-p json-p是什么 json-p原理分析 json-p的缺点 json-p是什么 json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的 ...
- jQuery index()
index() index() 方法返回指定元素相对于其他指定元素的 index 位置. 语法 $(selector1).index(selector2) selector2:可选,指定元素:为空时默 ...
- Java里面获取当前服务器的IP地址
public static void main(String[] args) { try { InetAddress address = InetAddress.getLocalHost();//获取 ...
- Wiki设置
在Wiki安装完成后,就wiki会提示下载LocalSettings.php文件,这是wiki的设置文件,当我们要对wiki进行设置的时候,就需要用到这个文件. 下面对常用的操作设置做简要讲解: —— ...
- could not read symbols: File format not recognized
arm-linux-gnueabi-readelf工具解决问题 编译一个32位平台的内核时,出现如下错误提示: libschw.a: could not read symbols: File form ...
- flask配置qq邮箱发送邮件
1.第三方登录qq邮箱不是使用邮箱密码,而是使用独立的授权码: 2.开始在python程序中使用os.environ.get()一直无法获取到环境变量,即使是用source命令重新加载配置文件后使用e ...
- Sql Server R2还有备份数据库错误
错误信息描述 该数据库是运行版本10.50.1600的服务器上备份的.该版本与此服务器(运行版本10.00.1600)不兼容.请在支持该被份的服务器上还原该数据, 或者使用与此服务器兼容的备份(M ...