文档章节

Bootstrap响应式前端框架笔记二——排版标签与类

珲少
 珲少
发布于 2016/12/03 12:25
字数 1661
阅读 72
收藏 0
点赞 0
评论 0

Bootstrap响应式前端框架笔记二——排版标签与类

    Bootstrap中对h标签的字体和字号进行了微调,开发者除了可以直接使用这些标签进行标题的修饰外,还可以使用.h1到.h6类来将其他元素的字体进行修饰,示例如下:

		<p>h1 到 h6 标签的样式</p>
		<h1>h1. Bootstrap heading</h1>
		<h2>h2. Bootstrap heading</h2>
		<h3>h3. Bootstrap heading</h3>
		<h4>h4. Bootstrap heading</h4>
		<h5>h5. Bootstrap heading</h5>
		<h6>h6. Bootstrap heading</h6>
		<hr />
		<p>.h1 到 .h6 类的样式</p>
		<div class="h1">h1. Bootstrap heading</div>
		<div class="h2">h1. Bootstrap heading</div>
		<div class="h3">h1. Bootstrap heading</div>
		<div class="h4">h1. Bootstrap heading</div>
		<div class="h5">h1. Bootstrap heading</div>
		<div class="h6">h1. Bootstrap heading</div>

    在标题或者其他标签中使用small标签或者small类可以添加内部副标题,副标题除了字号会进行缩小调整外,还会修改文字的颜色,示例如下:

		<p>可以使用small标签或者.samll类来向标题中添加副标题</p>
		<h3>h3标题 <small>small标签副标题</small></h3>
		<span class="h3">h3Class类 <span class="small">small类副标题</span></span>

效果如下:

    使用.lead可以实现段落的强调显示,示例如下:

		<p>这是一个普通段落</p>
		<p class="lead">这是一个强调段落</p>
		<p>这是一个普通段落</p>

效果如下:

    使用mark标签或者mark类可以进行特殊文本的标记,如下:

		<p>使用mark标签可以实现部分文本进行标记</p>
		<div class="mark">进行<mark>特殊文字</mark>的标记</div>

效果如下:

    使用del标签或者s标签可以实现对文本添加删除线效果,如下:

		<p>使用del标签或者s标签可以实现文本的删除效果</p>
		<del>del标签的删除效果</del>
		<br />
		<s>s标签的删除效果</s>

效果如下:

    使用ins标签或者u标签可以实现为本文添加下划线效果,示例如下:

		<p>使用ins标签或者u标签可以实现文本添加下划线</p>
		<ins>ins标签的下划线效果</ins>
		<br />
		<u>u标签的下划线效果</u>

效果如下:

    使用strong标签可以对特殊本文进行着重标记,如下:

		<p>使用strong标签可以实现对特殊文本进行着重标记</p>
		<div>进行文本的<strong>着重</strong>标记</div>

效果如下图

    使用em标签可以进行特殊文本的斜体处理,如下:

		<p>使用em标签可以进行文本的斜体处理</p>
		<p>进行<em>特殊文本</em>的斜体处理</p>

效果如下:

    使用text-left类可以实现文本的左对齐布局,与之对应text-center将文本进行中心对齐布局,text-right类来将文本进行右对齐布局,text-justufy类设置文本进行自适应对齐,text-nowarp类将设置文本不换行的进行布局,示例如下:

		<mark>text-left类进行左对齐布局</mark>
		<p class="text-left ">文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。文本左对齐排版。</p>
		<mark>text-center类进行中心对齐布局</mark>
		<p class="text-center ">文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。文本居中对齐。</p>
		<mark>text-right类进行右对齐布局</mark>
		<p class="text-right ">文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。文本右对齐。</p>
		<mark>text-justify类进行自适应布局</mark>
		<p class="text-justify ">正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。正常方向布局。</p>
		<mark>text-nowarp类进行不换行布局</mark>
		<p class="text-nowrap">不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。不换行布局。</p>

效果如下图:

        text-lowercase类可以将所有修饰的文本转换成小写,与之对应text-uppercase类可以将所有修饰的文本转换成大写,text-capitalize类则只会处理每个单词的首字母,将其转换为大写。示例如下:

		<mark>将所有字母转换成小写字母</mark>
		<p class="text-lowercase">My name is Jaki.</p>
		<mark>将所有字母转换成大写字母</mark>
		<p class="text-uppercase">My name is Jaki.</p>
		<mark>将所有单词首字母字母转换成大写字母</mark>
		<p class="text-capitalize">My name is Jaki.</p>

效果如下图:

    使用abbr标签可以进行某些内容的缩略显示,示例如下:

		使用abbr标签可以将某些文本进行缩略设置,当鼠标放置在对应文本上时,会显示标签中title所设置的内容
		<abbr title="这个是详细信息">信息</abbr>

效果如下:

    如果要在页面中进行内容的引用,可以使用blockquote标签进行包裹,在blockquote标签中可以继续嵌套footer标签来进行引用的标注,如下:

		使用blockquote标签可以进行内容的引用,其中可以嵌套fooer标签进行标注
		<blockquote>
			<p>冰冻三尺,非一日之寒。</p>
			<footer>俗语</footer>
		</blockquote>

    效果如下图所示:

    .blockquote-reverse类可以将blockquote中的内容进行右对齐,示例如下:

		<hr /> 使用blockquote标签可以进行内容的引用,其中可以嵌套fooer标签进行标注
		<blockquote class="blockquote-reverse">
			<p>冰冻三尺,非一日之寒。</p>
			<footer>俗语</footer>
		</blockquote>

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/typeset.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 837
博文 375
码字总数 440447
作品 0
上海
iOS工程师
Bootstrap响应式前端框架笔记三——代码与表格

Bootstrap响应式前端框架笔记三——代码与表格 一、代码 在技术博客文章类页面的开发中,常常需要在文本总插入说明代码,使用code便签可以创建这种效果,示例如下: 效果如下: kbd标签可以用...

珲少
2016/12/05
122
0
Bootstrap响应式前端框架笔记十一——分页与标签

Bootstrap响应式前端框架笔记十一——分页与标签 在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下: 效果如下: 为li元素添加d...

珲少
2016/12/13
58
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定,示例如下: 点击此按钮后,可以自动实现下拉列表的显示...

珲少
2016/12/27
101
0
Bootstrap响应式前端框架笔记四——表单

Bootstrap响应式前端框架笔记四——表单 一、基本表单样式 在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布...

珲少
2016/12/06
126
0
Bootstrap响应式前端框架笔记五——按钮

Bootstrap响应式前端框架笔记五——按钮 Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下: 效果如下: 可以为按钮元素添加btn-lg,btn-sm,btn-xs类...

珲少
2016/12/08
35
0
十大前端开发框架(下)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:Site Point。欢迎加入翻译组。 在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Boo...

伯乐在线
2013/07/01
0
0
Bootstrap响应式前端框架笔记七——下拉菜单

Bootstrap响应式前端框架笔记七——下拉菜单 在Bootstrap的Css框架中,下拉菜单属于组件。一个完整的下拉菜单应该有两部分组成,一个触发按钮与一个选项列表。触发按钮dropdown-toggle类来创...

珲少
2016/12/09
52
0
Bootstrap响应式前端框架笔记九——输入框组

Bootstrap响应式前端框架笔记九——输入框组 将input标签与input-group-addon类组合使用可以为输入框添加前后挂件,需要注意,Bootstrap不支持在输入框控件一侧添加多个挂件,示例如下: 效果...

珲少
2016/12/11
130
0
Bootstrap响应式前端框架笔记一——强大的栅格布局

Bootstrap响应式前端框架笔记一——强大的栅格布局 一、Bootstrap? Bootstrap是一款HTML,Css和JavaScript开发框架,其也支持开发者进行自定义构建,开发者也可以只打包自己需要的功能模块使...

珲少
2016/12/01
312
0
Bootstrap响应式前端框架笔记八——按钮组

Bootstrap响应式前端框架笔记八——按钮组 在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处理,示例代...

珲少
2016/12/10
19
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
26分钟前
0
0
NetCat Tutorials

Hacking with Netcat part 1: The Basics Hacking with Netcat part 2: Bind and reverse shells Hacking with Netcat part 3: Advanced Techniques 10 Introduction to Netcat - pdf NetCat......

zungyiu
26分钟前
0
0
Android Studio+NDK+Cmake 移植FFmpeg-4.0.2命令行工具

一、编译 参考大神的帖子,亲测一次编译成功:https://blog.csdn.net/bobcat_kay/article/details/80889398 鉴于以前查文档的经验,这里附上编写例子的时间:2018年7月22日 我用的是ubantu,...

她叫我小渝
26分钟前
0
0
mysql创建数据库

登录MYSQL mysql -u root -p 脚本创建数据库WeChat,并制定默认的字符集是utf8mb4。 CREATE DATABASE Wechat DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 授权 grant all......

niithub
41分钟前
0
0
svn: Unable to connect to a repository URL 的解决方案

错误图示: 解决办法:清除本地保存的授权信息; 1:右键点击本地文件夹,选择设置; TortoiseSVN -> Settings 2:在弹出的对话框中选择 Saved Data, 右侧选择:授权地方清理所有。 然后点确...

宁哥实战课堂
今天
1
0
sleep与wait的区别

Thread.sleep(XXX)方法消耗CPU吗? 这个知识点是我之前认识一直有错误的一个知识点,在我以前的认识里面,我一直认为Thread.sleep(1000)的这一秒钟的时间内,线程的休眠是一直占用着CPU的时间...

码代码的小司机
今天
1
0
20位活跃在Github上的国内技术大牛 leij 何小鹏 亚信

本文列举了20位在Github上非常活跃的国内大牛,看看其中是不是很多熟悉的面孔? 1. lifesinger(玉伯) Github主页: https://github.com/lifesinger 微博:@ 玉伯也叫射雕 玉伯(王保平),...

海博1600
今天
1
0
Mybatis收集配置

一、Mybatis取Clob数据 1、Mapper.xml配置 <resultMap type="com.test.User" id="user"> <result column="id" property="id"/> <result column="json_data" property="jsonData" ......

星痕2018
今天
1
0
centos7设置以多用户模式启动

1、旧版本linux系统修改inittab文件,在新版本执行vi /etc/inittab 会有以下提示 # inittab is no longer used when using systemd. # # ADDING CONFIGURATION HERE WILL HAVE NO EFFECT ON......

haha360
今天
1
0
OSChina 周日乱弹 —— 局长:怕你不爱我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ andonny :分享周二珂的单曲《孤独她呀》 《孤独她呀》- 周二珂 手机党少年们想听歌,请使劲儿戳(这里) @孤星闵月 :没事干,看一遍红楼梦...

小小编辑
今天
407
12

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部