bootstrap丰富的html标签和css类(一)网格系统、文本排版、代码块显示、表格显示
一、概览
1.1 bootstrap css概览
- 需要使用html5文档类型,也就是在html文件头部使用
<!DOCTYPE html>
- bootstarp3默认的css本身对移动设备友好支持。为了确保适当的绘制和触屏缩放,需要在头部加上
viewport meta
标签:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
其中,width是控制设备的宽度,若设置成device-width
则是根据设备的分辨率来设置;而initial-scale=1.0
的意思是初始化页面使不会缩放。
1.2 响应式图片
<img src="..." class="img-responsive" alt="响应式图片"
其中,元素的css属性中的max-width:100%;height:auto;能让图片自动缩放并且不会超过父元素的尺寸。
.img-responsive {display: block;height: auto;max-width: 100%;
}
图片水平居中:<img src="..." class="img-responsive " alt="图片水平居中"
1.3 bootstrap的body样式
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.428571429;color: #333333;background-color: #ffffff;
}
1.4 设置排版样式
通过@font-family-base
、@font-size-base
和@line-height-base
属性作为排版样式。
1.5 设置全局连接的样色
通过@link-color
设置全局链接的颜色。默认样式如下:
a:hover,
a:focus {color: #2a6496;text-decoration: underline;
}a:focus {outline: thin dotted #333;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;/*轮廓偏移*/
}
1.6 设置浏览器的一致性
bootstrap通过Normalize.css来保持跨浏览器的一致性。
1.7 bootstrap的Container
通过<div class="container"></div
来指定,默认的样式是:
.container {padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;/*左右外边框由浏览器决定*/
}
默认情况下使用了container这个类的标签不可以嵌套。
二、网格系统
2.1 基本概念
- 流式网格系统,网格系统的列数会随着屏幕或者viewport的尺寸增加而增加,最多为12列。
- 网格系统的工作原理:
- 行必须放在.container class内,以获得适当的alignment和padding。
- 使用行来创建列的水平组。所以内容在行中的列内。(只有列可以是行的直接子元素)
- 列通过padding来创建列内容之间的间隙。
-形如.col-xs-4
表示创建三个相等的列。
2.2 媒体查询
- 作用:在less文件中创建网格系统关键点的一些阀值。
- 语法:
@media(设备规范and大小规则){...}
,在这里媒体查询代码中包含max-width
是为了将css的影响限制在更小范围的屏幕大小内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
2.3 网格选项
- | 超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) | 30px(一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
来看一个基本的bootstrap的结构。
<div class="container"><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div> </div><div class="row">...</div>
</div>
<div class="container">....
代码中的*需要根据设备而定。
例如:只是简单的堆叠
<div class="col-md-6">....</div>
<div class="col-md-6">....</div>
需要兼容不同的设备
<div class="col-md-6 col-lg-4">....</div>
<div class="col-md-6 col-lg-8">....</div>
最后还需要小型设备
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
多余的列将从第二行起一行排列
2.4 响应式的列重置
2.5 列偏移
在实际使用时,并不是所有的列都要从第一列开始的,所以需要用到.col-md-offset-*
类来进行列偏移,*的范围是从1到11。
那么,我们就可以通过这种方法来居中了。例如:<div class="col-md-6 .col-md-offset-3"></div>
2.6 嵌套列
在列中嵌套列的时候,必须先在列中添加行,例如:
<div class="container"><h1>Hello, world!</h1><div class="row"><div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第一列</h4><p></p></div><div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><h4>第二列 - 分为四个盒子</h4><div class="row"><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p></p></div><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p></p></div></div><div class="row"><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p></p></div><div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"><p></p></div></div></div></div>
</div>
他实际上是这样的:
2.7 列排序
通过.col-md-push-*
和.col-md-pull-*
可以改变列的顺序,其实push和pull就是推和拉的意思。
三、文本排版
3.1 默认字体栈
Helvetica Neue、 Helvetica、 Arial 和 sans-serif
3.2 标题
<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>
3.3 内联子标题
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
3.4 强调文本
<p class="lead"></p>
给段落加lead类可以得到强调的引导主体副本。
3.5 强调
small、strong、em标签
3.6 bootstrap提供的其他文本类
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
3.7 文本的缩写
通过abbr标签实现。属性title内的是详细内容。若继承了initialism类可以得到全大写的文本缩写。
<abbr title="全名李泰萱">ltx</abbr><br>
<abbr title="全名李泰萱全名李泰萱全名李泰萱" class="initialism">small ltx</abbr>
ltx
small ltx
3.8 地址
通过address标签来实现,这是一个block类型的标签。在其内部的文字需要通过br标签来换行。
3.9 引用
通过blockquote来实现,在其内部使用用来强调的small标签来表明来源,还可以继承pull-right类来实现右对齐。
3.10 列表
- 有序列表:以有序字符开头。通过ol标签实现,列表的每一个列表项通过li标签实现。
- 无序列表:以“着重号”开头,但是可以继承list-unstyled来移除这些开头符号。通过ul标签实现,列表项通过li标签实现。
- 内联列表:通过ol或ul标签继承list-inline类来实现。
- 定义列表:通过dl标签实现,列表项的标签是dd护着dt。定义列表的效果类似于字典。通过如下语法实现:
<dl><dt>key1</dt><dd>value1</dd><dt>key2</dt><dd>value2</dd>
</dl>
效果如下:
- key1
- value1
- key2
- value2
或者是通过dl标签继承dl-horizontal类实现行内定义表
<dl class="dl-horizontal"><dt>key1</dt><dd>value1</dd><dt>key2</dt><dd>value2</dd>
</dl>
效果如下:
- key1
- value1
- key2
- value2
3.11 其他可以被继承的排版类
类 | 描述 |
---|---|
.lead | 使段落突出显示 |
.small | 设定文本父文本的85%大小 |
.text-left | |
.text-center | |
.text-right | |
.text-justify | 文本对齐,超出屏幕部分的文字自动换行 |
.text-nowrap | 段落中超出屏幕部分不换行 |
.text-lowercase | 文本小写 |
.text-uppercase | 文本大写 |
.text-capitalize | 文本标题化 |
.text-initialism | abbr标签中的文本小号字体显示 |
.blockquote-reverse | 引用右对齐 |
.list-unstyled | 移除无序列表中的默认样式 |
.list-inline | 列表行内显示 |
.dl-horizontal | 定义列表行内显示 |
.pre-scrollable | pre标签可滚动 |
四、bootstrap代码块显示
4.1 code标签
内敛式的代码块,类似于markdown的“单行代码
”。
4.2 pre标签
多行代码的显示。pre是保留内部格式的标签。在pre标签内显示html标签的开头需要使用<
,html标签的结尾需要使用>
例如:
<pre><article><h1>Article Heading</h1></article>
<pre>
效果如下:
for lines in range(1,):print lines
4.3 与代码显示有关的其他标签
类 | 描述 |
---|---|
<var>
|
变量 |
<kbd>
|
按键提示 |
<pre>
|
多行代码 |
<pre class="pre-scrollable">
|
有滚动条的多行代码,最大高度为340px |
<samp>
|
电脑程序输出 |
<code>
|
行内代码 |
五、bootstrap表格显示
5.1 表格的基本标签
<table>
:表格标签
<thead>
:标题行的容器,装一个tr标签,tr里面再装th标签。
<tbody>
:记录行的容器,里面装一个或多个tr标签,里面装td标签。
<tr>
:行标签,单行上的每个单元格(td)的容器
<td>
:单个单元格
<th>
:特殊的单元格
<caption>
:用于说明表格的作用
5.2 table标签可以继承的类
啥也不加的情况下:
<table ><thead><tr><th>#</th><th>Firstname</th></tr></thead><tbody><tr><td>1</td><td>Anna</td></tr><tr><td>2</td><td>Debbie</td></tr><tr><td>3</td><td>John</td></tr></tbody></table>
table标签继承了
table
类,增加了横向分割线
table标签继承了
table-striped
类,增加了斑马条纹
table标签继承了
table-bordered
类,增加了边框table标签继承了
table-hover
类,增加了鼠标悬停的效果table标签继承了
table-condensed
类,让表格更紧凑
5.3 tr、th、td标签可以继承的类
啥也不加的情况下:
<table class="table"><caption>基本的表格布局</caption><thead><tr><th>名称</th><th>城市</th></tr></thead><tbody><tr><td>Tanmay</td><td>Bangalore</td></tr><tr><td>Sachin</td><td>Mumbai</td></tr></tbody>
</table>
tr、th或td标签继承acive
类:应用鼠标激活的颜色在行或单元格上,表示激活。
tr、th或td标签继承success
类:表示操作成功。
tr、th或td标签继承info
类:表示信息变更。
tr、th或td标签继承warning
类:表示警告操作
tr、th或td标签继承danger
类:表示危险操作
<table class="table"><caption>上下文表格布局</caption><thead><tr><th>产品</th><th>付款日期</th><th>状态</th></tr></thead><tbody><tr class="active"><td>产品1</td><td>23/11/2013</td><td>待发货</td></tr><tr class="success"><td>产品2</td><td>10/11/2013</td><td>发货中</td></tr><tr class="warning"><td>产品3</td><td>20/10/2013</td><td>待确认</td></tr><tr class="danger"><td>产品4</td><td>20/10/2013</td><td>已退货</td></tr><tr class="info"><td>产品5</td><td>20/10/2018</td><td>信息变更</td></tr></tbody>
</table>
5.4 响应式表格
通过table标签继承table类以及table标签的父类继承table-responsive标签类实现。
<div class="table-responsive"><table class="table"><thead><tr><th></th><th></th><th></th></tr></thead></table><tbody><tr><th></th><th></th><th></th></tr><tr><th></th><th></th><th></th></tr><tr><th></th><th></th><th></th></tr></tbody>
</div>
bootstrap丰富的html标签和css类(一)网格系统、文本排版、代码块显示、表格显示相关推荐
- java类静态初始化_Java静态代码块和类初始化、实例初始化过程
1. 静态代码块 静态代码块:定义在类中方法外,使用static修饰 ①可以为类变量(静态变量)初始化 ②静态代码块在第一次使用这个类之前执行,即在类初始化时执行,且只执行一次 ③若有多个静态代码块, ...
- 继承的CSS类在Chrome开发者工具里的显示
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
- css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
- uni怎么使用原生html标签,uni-app如何完美解析富文本内容
在uni-app中有 rich-text 标签是自带解析富文本内容的,但是不是很完美,怎么说呢?比如富文本的代码块.图片宽度等都是无法控制的,那么现在就利用插件来解析,这个解析插件小编是利用图片.ht ...
- java类中的static块_java类中static代码块的执行次数
java类中 static静态代码块的执行次数 1.在类加载的init阶段,类的类构造器中会收集所有的static块和字段并执行,static块只执行一次,由JVM保证其只执行一次. 2.直接看示例 ...
- Day10 (代码块,继承,Math,类Test,面试题)
一.代码块: 在Java中,使用{}括起来的代码成为代码块,根据其位置和声明的不同,可以分为局部代码块,构造代码块,静态代码块,同步代码块(多线程讲解) 局部代码块: 在方法中出现,限定变量的生命周期 ...
- 代码块(普通代码块、构造代码块、静态代码块、同步代码块)、初始化(类初始化、对象初始化)
普通代码块:类里的代码块,方法里的代码块,语句代码块,{} 构造代码块:直接写在类里方法外的代码块,用来对实例对象进行初始化 静态代码块:语法上,在构造代码块前加一个static,用来对类进行初始化 ...
- Java查漏补缺(08)关键字:static、单例设计模式、理解main方法、类的成员之四:代码块、final关键字、抽象类、接口、内部类、枚举类、注解、包装类
Java查漏补缺(08)关键字:static.单例设计模式.理解main方法.类的成员之四:代码块.final关键字.抽象类.接口.内部类.枚举类.注解.包装类 本章专题与脉络 1. 关键字:stat ...
- Java类的加载和代码执行顺序
关于类加载和初始化相关的案例 总的顺序是:先父类后子类,先静态后动态,属性和代码块的初始化遵循正常的出场顺序无论是静态还是动态,但是他们总是先于构造器执行.但是还是需要通过题目的学习来加深我们的理解. ...
最新文章
- Spring Data JPA 与 MyBatis 对比,你喜欢用哪个?
- Spring Aspect 获取请求参数
- jQuery的attr()和prop()方法
- 【全电发票】开票金额总额度发生了什么变化?
- 如何使用HTML5,JavaScript和Bootstrap构建自定义文件上传器
- 信息学奥赛一本通(1262:【例9.6】挖地雷)
- AI软件制作莫比乌斯环
- (原創) 用OOP实作矩阵相乘 (C/C++)
- qq空间说说获取php,【点赞源码】QQ空间自动评论说说PHP源码
- Java线程:新特征-原子量
- Axure RP--快捷键大全(常用快捷键)
- 3DMax与Unity统一长度单位和轴
- 一步一步SharePoint 2007之一:安装SharePoint
- 气象ts评分_天气预报评分方法评述.doc
- vue配置解决跨域问题
- 大白菜安装linux系统安装教程
- Failed to connect to github-production-release-asset-2e65be.s3.amazonaws.com port 443: Timed out
- 2021天梯赛L1-074 两小时学完C语言 题解
- ArcGIS Earth 1.11版本发布啦!
- 我学MSA 之:稳定性分析(控制图法)
热门文章
- wmic,一个Windows下获取cpuID、主板ID、内存ID的工具
- 2.1 对称矩阵与反对称矩阵
- Android本科毕业设计基于Android的天气预报APP系统(附带源码)
- Salesforce被除名、阿里云再入围,2021年ABI魔力象限的变与不变
- 两个div在同一行,且让第三个div换行,去除浮动
- 心得| 想入行 AI,别让那些技术培训坑了你...
- SpringBoot使用H2嵌入式数据库
- linux(七)、linux查看网关、dns
- 孕期做什么副业好?在家兼职挣钱的孕妇不仅能很好地抚养孩子,还能继续她们的职业生涯
- IntelliJ IDEA在java开发工作中的使用总结(实用插件,快捷键,debug等)