bootstrap 横铺 行_Bootstrap 排版
Bootstrap 排版
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。
标题
Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。请看下面的实例:
实例
我是标题1 h1
我是标题2 h2
我是标题3 h3
我是标题4 h4
我是标题5 h5
我是标题6 h6
尝试一下 »
结果如下所示:
内联子标题
如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 ,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本,如下面实例所示:
实例
我是标题1 h1.我是副标题1 h1
我是标题2 h2.我是副标题2 h2
我是标题3 h3.我是副标题3 h3
我是标题4 h4.我是副标题4 h4
我是标题5 h5.我是副标题5 h5
我是标题6 h6.我是副标题6 h6
尝试一下 »
结果如下所示:
引导主体副本
为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本,如下面实例所示:
实例
引导主体副本
这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。
尝试一下 »
结果如下所示:
强调
HTML 的默认强调标签 (设置文本为父文本大小的 85%)、(设置文本为更粗的文本)、(设置文本为斜体)。
Bootstrap 提供了一些用于强调文本的类,如下面实例所示:
实例
本行内容是在标签内本行内容是在标签内本行内容是在标签内,并呈现为斜体向左对齐文本
居中对齐文本向右对齐文本本行内容是减弱的本行内容带有一个 primary class本行内容带有一个 success class本行内容带有一个 info class本行内容带有一个 warning class本行内容带有一个 danger class
尝试一下 »
结果如下所示:
缩写
HTML 元素提供了用于缩写的标记,比如 WWW 或 HTTP。Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 title 属性添加了文本)。为了得到一个更小字体的文本,请添加 .initialism 到 。
实例
WWWRSS
尝试一下 »
结果如下所示:
地址(Address)
使用
标签,您可以在网页上显示联系信息。由于默认为 display:block;,您需要使用
标签来为封闭的地址文本添加换行。
实例
Some Company, Inc.007 street
Some City, State XXXXXP:(123) 456-7890
Full Namemailto@somedomain.com
尝试一下 »
结果如下所示:
引用(Blockquote)
您可以在任意的 HTML 文本旁使用默认的
。其他选项包括,添加一个 标签来标识引用的来源,使用 class .pull-right 向右对齐引用。下面的实例演示了这些特性:
实例
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。
这是一个带有源标题的引用。Someone famous inSource Title
这是一个向右对齐的引用。Someone famous inSource Title
尝试一下 »
结果如下所示:
列表
Bootstrap 支持有序列表、无序列表和定义列表。
有序列表:有序列表是指以数字或其他有序字符开头的列表。
无序列表:无序列表是指没有特定顺序的列表,是以传统风格的着重号开头的列表。如果您不想显示这些着重号,您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。
定义列表:在这种类型的列表中,每个列表项可以包含
和 元素。 代表 定义术语,就像字典。接着, 是 的描述。.dl-horizontal 可以让
下面的实例演示了这些类型的列表:
实例
有序列表
- Item 1
- Item 2
- Item 3
- Item 4
无序列表
- Item 1
- Item 2
- Item 3
- Item 4
未定义样式列表
Item 1Item 2Item 3Item 4
内联列表
Item 1Item 2Item 3Item 4
定义列表
- Description 1
- Item 1
- Description 2
- Item 2
水平的定义列表
Description 1Item 1Description 2Item 2
尝试一下 »
结果如下所示:
更多排版类
下表提供了 Bootstrap 更多排版类的实例:
类
描述
实例
.lead
使段落突出显示
.small
设定小文本 (设置为父文本的 85% 大小)
.text-left
设定文本左对齐
.text-center
设定文本居中对齐
.text-right
设定文本右对齐
.text-justify
设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap
段落中超出屏幕部分不换行
.text-lowercase
设定文本小写
.text-uppercase
设定文本大写
.text-capitalize
设定单词首字母大写
.initialism
显示在 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
.blockquote-reverse
设定引用右对齐
.list-unstyled
移除默认的列表样式,列表项中左对齐 (
- 和
- 中)。 这个类仅适用于直接子列表项
(如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
.list-inline
将所有列表项放置同一行
.dl-horizontal
该类设置了浮动和偏移,应用于
- 元素中,具体实现可以查看实例
.pre-scrollable
使
元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
bootstrap 横铺 行_Bootstrap 排版相关推荐
- bootstrap 横铺 行_bootstrap的布局(container、row、col-xs-4)
它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中. 下面就简单介绍一下Bootstrap栅格系统的工作原理: 行(row)必须包含在.c ...
- Bootstrap 表格行的样式
除了可以为表格添加样式外,Bootstrap还专门表格的行提供了 4 个可选的情景类,来为表格的行添加特殊的背景颜色.这些情景类及含义见表 3‑2: 表 3‑2 表格行的情景类 类 含义 .succe ...
- 袁创:文本编辑器中文字断行及排版算法研究
文本编辑器是一种非常复杂的图形软件,涉及到的很多开发技巧和软件结构都是传统的数据库程序开发中所从未应用的,因此掌握相关技术的人是非常的少的.在其中文字断行及排版算法是编辑器开发中的核心算法之一.如果没 ...
- 13 ,CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- 文本编辑器中文字断行及排版算法研究
文本编辑器中文字断行及排版算法研究 袁永福 2013/4/15 文本编辑器是一种非常复杂的图形软件,涉及到的很多开发技巧和软件结构都是传统的数据库程序开发中所从未应用的,因此掌握相关技术的人是非常的少 ...
- Bootstrap全局CSS之排版代码表格
排版 页面主体 Bootstrap将全局font-size设置为14px,line-height设置为20px 段落的行高设置为10px,颜色设置为#333[通过F12查看] 段落突出显示:通过.le ...
- bootstrap 栅栏剧中_Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法...
(1)概括 一句话概括:根据显示屏幕宽度的大小,自动的选用对应的类的样式. (2)关键字段 1.col是column简写:列: 2.xs是maxsmall简写:超小, sm是small简写:小, m ...
- bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
- bootstrap思想总结_bootstrap学习心得总结-css样式设计分享
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建 ...
最新文章
- 寒假作业,2.25,G - iBoard
- ATSS EfficientDet
- ubuntu 安装spark
- 线程的三种创建方式以及代码实现
- LwIP编译方法以及选项说明
- (99)FPGA最大延迟与最小延迟基础
- 网工年薪100w+,你在哪个阶段?
- [SHELL实例] (转)最牛B的 Linux Shell 命令 (一)
- 访问不了firefox附加组件页面怎么办
- php postgresql 参数,从postgresql函数参数中检索php数组键和值以进行数据库更新
- 自己动手用麦咖啡(mcafee)打造自己的安全网站!安全系统(服务器)!
- Excel技能培训之十五 函数使用rank,Frequency,subtotal超级表,切片器,iferor,常用错误代码
- COM06-Can通信协议栈架构【最高峰】
- 骁龙神经处理引擎(Snapdragon Neural Processing Engine)
- python实现税后工资_Python扣除个人税后的工资计算器
- unity学习笔记-Avpro和安卓结合
- Jupyter notebook中的Markdown单元格(4)图片
- 服务器读取本地文件,如何在云服务器上打开本地文件
- java制作坦克大战
- 微笑的力量:成人大脑中负责学习婴儿情绪的网络