Bootstrap源码解读排版(1)


Posted in Javascript onDecember 23, 2016

源码解读Bootstrap排版

粗体

可以使用<b>和<strong>标签让文本直接加粗。
例如:

<p>我在学习<strong>Bootstrap</strong></p>

源码

b,
strong {
 font-weight: bold;
}

斜体

使用标签<em>或<i>来实现。
例如:

<p>我在学<i>Bootstrap</i>。</p>

强调相关的类

强调类都是通过颜色来表示强调
.text-muted:提示,使用浅灰色(#777)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
例如:

<div class="text-primary">.text-primary效果</div>

源码

.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:两端对齐
例如:

<p class="text-left">我居左</p>

源码:

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。

列表

Bootstrap对于列表,只是在margin上做了一些调整
源码:

ul,
ol {
 margin-top: 0;
 margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
 margin-bottom: 0;
}

去点列表

给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
例如:

<ol class="list-unstyled">
 <li>不带项目编号</li>
 <li>不带项目编号</li>
</ol>

源码:

.list-unstyled {
padding-left: 0;
list-style: none;
}

内联列表

通过添加类名“.list-inline”来实现内联列表,其实就是把垂直列表换成水平列表,而且去掉项目符号,保持水平显示。可以用来做水平导航。
源码:

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

定义列表

Bootstrap只是调整了行间距,外边距和字体加粗效果
源码:

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

水平定义列表

水平定义列表就像内联列表一样,添加类名“.dl-horizontal”给定义列表实现水平显示效果。
源码:

@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”才具有水平定义列表效果。当缩小浏览器屏幕时,水平定义列表将回复到原始的状态。

代码

主要提供了三种代码风格:
<code></code>显示单行内联代码,一般是针对于单个单词或单个句子的代码
<pre></pre>来显示多行块代码,一般是针对于多行代码(也就是成块的代码)
<kbd></kbd>来显示用户输入代码,一般是表示用户要通过键盘输入的内容
在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
源码:

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

表格

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
.table:基础表格
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
例如要使用斑马线表格并且鼠标悬停高亮:

<table class="table table-striped table-bordered table-hover">

响应式表格的用法和其他几个不同。
Bootstrap提供了一个容器,并且此容器设置类名“.table-responsive”,此容器就具有响应式效果,然后将<table class="table">置于这个容器当中,这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。示例如下:

<div class="table-responsive">
<table class="table table-bordered">
 …
</table>
</div>

表格行的类

tr有五种不同的类名,可以显示行的不同的颜色
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为
例如:

<tr class="active">

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
简单实现JS倒计时效果
Dec 23 #Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 #Javascript
jquery dataview数据视图插件使用方法
Dec 23 #Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 #Javascript
Bootstrap源码解读按钮(5)
Dec 23 #Javascript
基于bootstrap的选择框插件icheck
Dec 23 #Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
PHP 创建标签云函数代码
2010/05/26 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
js 编写规范
2010/03/03 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python实现扫描ip地址的小程序
2019/04/16 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
数据库面试要点基本概念
2013/10/31 面试题
计算机本科生自荐信
2013/10/15 职场文书
机械专业应届生求职信
2013/12/12 职场文书
村委会主任先进事迹
2014/01/15 职场文书
高一军训的心得体会
2014/09/01 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang