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 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 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
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python调用百度语音识别api
2018/08/30 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
合作协议书范文
2014/08/20 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
工作表扬信
2015/01/17 职场文书
交通事故代理词范文
2015/05/23 职场文书
Nginx快速入门教程
2021/03/31 Servers
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS