Bootstrap源码解读排版1
源码解读Bootstrap排版
粗体
可以使用和标签让文本直接加粗。
例如:
我在学习Bootstrap
源码
rush:css;">
b,h3 {
font-weight: bold;
}
斜体
使用标签或来实现。
例如:
我在学Bootstrap。
强调相关的类
强调类都是通过颜色来表示强调
.text-muted:提示,使用浅灰色(#777)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
例如:
效果
源码
rush:css;">
.text-muted {
color: #777;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
文本对齐风格
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
例如:
源码:
rush:css;">
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。
列表
Bootstrap对于列表,只是在margin上做了一些调整
源码:
rush:js;">
ul,ol {
margin-top: 0;
margin-b
ottom: 10px;
}
ul ul,ol ul,ul ol,ol ol {
margin-b
ottom: 0;
}
去点列表
给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
例如:
rush:xhtml;">
不带项目编号
- 不带项目编号
源码:
rush:css;">
.list-unstyled {
padding-left: 0;
list-style: none;
}
内联列表
通过添加类名“.list-inline”来实现内联列表,其实就是把垂直列表换成水平列表,而且去掉项目符号,保持水平显示。可以用来做水平导航。
源码:
li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
定义列表
Bootstrap只是调整了行间距,外边距和字体加粗效果
源码:
rush:css;">
dl {
margin-top: 0;
margin-b
ottom: 20px;
}
dt,dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
水平定义列表
水平定义列表就像内联列表一样,添加类名“.dl-horizontal”给定义列表实现水平显示效果。
源码:
rush:css;">
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space:
Nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}
此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。当缩小浏览器屏幕时,水平定义列表将回复到原始的状态。
主要提供了三种代码风格:
显示单行内联代码,一般是针对于单个单词或单个句子的代码
来显示多行块代码,一般是针对于多行代码(也就是成块的代码)
来
显示用户输入
代码,一般是表示
用户要通过
键盘输入的
内容
在pre
标签上
添加类名“.pre-scrollable”,就可以控制
代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
源码:
rush:css;">
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
表格
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
例如要使用斑马线表格并且鼠标悬停高亮:
响应式表格的用法和其他几个不同。
Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将
效果。
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:
rush:xhtml;">
表格行的类
tr有五种不同的类名,可以显示行的不同的颜色
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为
例如:
本文系列教程整理到: 专题中,欢迎点击学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。