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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
Vue实现简单的留言板
Oct 23 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
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python urllib.request对象案例解析
2020/05/11 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python中添加模块导入路径的方法
2021/02/03 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
高三自我鉴定范文
2013/10/19 职场文书
个人培训自我鉴定
2014/03/28 职场文书
2014年冬季防火方案
2014/05/21 职场文书
高考标语大全
2014/06/05 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
市级三好学生评语
2014/12/29 职场文书
大学生逃课检讨书
2015/05/04 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
python面向对象版学生信息管理系统
2021/06/24 Python
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android