Bootstrap-CSS-排版
Bootstrap-排版
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。
标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予<body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
中心内容
通过添加 .lead 类可以让段落突出显示。
<p>页面主体<br>页面主体
</p>
<p>页面主体</p>
<p class="lead">页面主体(中心内容)</p>内联文本元素
<p><mark>Marked text </mark><del>被删除的文本</del> <s>无用文本和被删除文本一样</s><ins>插入文本效果是下划线</ins> <u>u标签效果一样是下划线，过时了</u> <small>小号文本</small><strong>着重文本</strong><em>斜体</em>
</p>
对齐
<p class="text-left">居左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">居右对齐</p>
<p class="text-justify">对齐文本</p>
<p class="text-nowrap">No wrap text.</p>改变大小写
<p class="text-lowercase">改成小写 aBcdefG</p>
<p class="text-uppercase">改成大写 aBcdefG</p>
<p class="text-capitalize">首字母大写 aBcdefG</p>
缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。
<p>基本缩略语<abbr title="mm">m</abbr>鼠标悬停显示mm
</p>
列表
无序列表
排列顺序无关紧要的一列元素。
<ul><li>无序列表</li><li>无序列表</li><li>无序列表</li><li><ul><li>无序列表2，有点</li></ul></li><ul><li>无序列表3，无点</li></ul><li>无序列表</li>
</ul>
有序列表
顺序至关重要的一组元素。
<ol><li>有序列表</li><li>有序列表</li><ol><li>有序列表2</li></ol><ul><li>无序列表</li></ul><li>有序列表</li>
</ol>
内联列表
通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
<ul class="list-inline"><li>内联列表</li><li>IE10测试不支持</li><li>列表的序号不显示</li>
</ul>Bootstrap-CSS-排版相关推荐
- Bootstrap CSS
Bootstrap CSS 概览 在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) ...
- html css bootstrap,CSS Bootstrap是什么？
bootstrap是什么?bootstrap有什么用?bootstrap是框架吗?对于刚刚接触bootstrap的学生来说,对bootstrap并不了解.下面本篇文章就来给大家介绍一下bootstra ...
- ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素
ASP.NET MVC使用Bootstrap系统(2)--使用Bootstrap CSS和HTML元素 阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Boots ...
- bootstrap -- css -- 表格
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...
- bootstrap之排版类
bootstrap之排版类 转载于:https://www.cnblogs.com/s1-myblog/p/6222965.html
- angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习...
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
- bootstrap css选择不同的宽度
刚开始使用bootstrap css开源项目.遇到一个问题,默认的input 宽度太大,需要找小一点的. 其实只需要在input tag中选用预定义的较小的宽度即可.比如: <input typ ...
- 移动端html右滑空白,BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法...
最近的一个项目 前台使用了 bootstrap.css + angularjs, 后台只处理数据(用的php,处理结果直接 json_encode($arr),非常爽).一直在Chrome的仿真机测试 ...
- css 排版_Web排版的未来：CSS字体4级
css 排版 Web字体为设计注入了生命,帮助我们避免了在Web设计初期广泛使用的系统默认设置. 当今有许多可用的选项,我们有很多技巧可以提供和设置自定义字体. CSS字体模块的第4级概述了您会喜欢的 ...
- DevTools 无法加载源映射： 无法加载http://localhost:8080/css/bootstrap.css.map 的内容:HTTP 错误: 状态代码 404，net::ERR_HTT
DevTools 无法加载源映射: 无法加载http://localhost:8080/css/bootstrap.css.map 的内容:HTTP 错误: 状态代码 404,net::ERR_HTT ...
最新文章
- 【C++】algorithm具体操作记录
- mysql事务概念_MySQL事务的概念
- 电脑一开机出rebootand_北京联想电脑维修站【蓝伟博达笔记本维修吧】
- 广西 启动计算机教案,广西版六年级下册信息技术教案.docx
- 数据库索引为什么会失效
- matlab结构体构建,matlab 怎么建立结构体数组?
- L1-030 一帮一 (15 分)—团体程序设计天梯赛
- 三层交换原理及实验操作
- 网络安全应急响应-恶意代码分析技术
- 安川ga700变频器故障码集_安川变频器故障代码
- ARM920T中断体系结构
- iOS 全横屏app设置
- android学习笔记之磁场传感器制做指南针
- 最短路 HDU - 2544 （最短路）
- Python_对折多少次超过珠峰
- 软 RAID 和硬 RAID的比较概览
- JS实现浏览器打印、打印预览
- QuartusII绑定引脚时出现错误：Error: Can‘t place multiple pins assigned to pin location Pin_108 (IOC_X34_Y2_N0)
- java向gis数据库读写数据_java – PostGIS数据库中Geography Polygon的读取点
- 交易猫源码搭建完整版