bootstrap 基础知识学习(列表+表格)
来源:互联网 发布:淘宝卖家费用 编辑:程序博客网 时间:2024/05/18 02:11
一、标题
二、段落
=》如果想让一个段落p突出显示,
添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理
=》文本状态
.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
=》文本的对齐方式
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
三、列表(ul/ol/dl)
》通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
》通过添加类名“.list-inline”来实现内联列表,即水平导航
》给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
2、列表组( .list-group 列表容器 .list-group-item 列表具体项)
列表组的状态
四、代码展示
》使用<code></code>来显示单行内联代码
》使用<pre></pre>来显示多行块代码
》使用<kbd></kbd>来显示用户输入代码
五、表格
1、基本样式
.table:基础表格(“.table”主要有三个作用:
给表格设置了margin-bottom:20px以及设置单元内距,
在thead底部设置了一个2px的浅灰实线,
每个单元格顶部设置了一个 1px的浅灰实线)
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水
平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。
除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,直接在table上加class=“table-hover”就行
注:不管制作哪种表格都离不开类名“table”
- bootstrap 基础知识学习(列表+表格)
- bootstrap框架学习笔记一(模板,排版-段落-列表-表格部分)
- bootstrap基础(一)文本,列表,代码,表格
- Bootstrap学习: 表格
- Bootstrap学习-表格
- BootStrap学习9---表格
- bootstrap 基础知识学习(导航+其他)
- bootstrap基础知识学习(下拉菜单+按钮)
- bootstrap 基础知识学习(图片+网格系统)
- Bootstrap 学习之(十六)------ 列表组
- Bootstrap学习:列表组
- bootstrap学习之列表
- Bootstrap入门之段落、列表和表格
- bootstrap table 表格学习笔记
- bootstrap 表格基于jqgrid学习
- Bootstrap学习之表格表单
- BootStrap基础知识学习-No.1
- bootstrap 基础知识(表单)
- DisplayIndex属性设置错乱的解决方案
- STL源码剖析----算法、仿函数、配接器
- android 随手涂鸦
- 创建型模式-单例模式
- Scala笔记之 样本类和模式匹配
- bootstrap 基础知识学习(列表+表格)
- poj 3169 Layout 差分约束
- Maven相关
- sftp上传文件能用到的简单命令
- SVD在LSA中的应用
- c++语言常用转义序列符号
- HDU 5280 Senior's Array 最大区间和
- git使用
- MQX驱动