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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
使用JavaScript破解web
Sep 28 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
详解Vue slot插槽
Nov 20 Vue.js
简单实现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
PHP数据缓存技术
2007/02/14 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
jQuery Dom元素操作技巧
2018/02/04 jQuery
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python迭代和迭代器详解
2016/11/10 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python常见字典内建函数用法示例
2018/05/14 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python实现控制COM口的示例
2019/07/03 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
物业公司采购员岗位职责
2013/12/31 职场文书
小学生成长感言
2014/01/30 职场文书
环境卫生标语
2014/06/09 职场文书
股东授权委托书范本
2014/09/13 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis