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图片阅览组件
Nov 09 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
javascript的BOM
May 03 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
js动态生成表格(节点操作)
Jan 12 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
PHP制作万年历
2015/01/07 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
浅析vue深复制
2018/01/29 Javascript
React如何避免重渲染
2018/04/10 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python中mechanize库的简单使用示例
2014/01/10 Python
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python抓取百度首页的方法
2015/05/19 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Django实现基于类的分页功能
2019/10/31 Python
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
整脏治乱工作简报
2015/07/21 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python