关于bootstrap--排版（标题、强调、背景、插入符等）

1、

2、标题：<h1>这是主标题<small>这是副标题，为当前字号65%，灰色（#999）</small></h1>。

3、段落：<p>字号：14px,行高：1.42857143</p>。可以通过class="lead"来设置需要强调的<p>段落。

4、加粗：<strong></strong>

5、斜体：<em></em><i></i>

6、强调：

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

7、

8、

9、插入符：

<div>插入符实例
<div class="caret"></div>
</div>

10、快速浮动：<div class="pull-left">向左快速浮动</div>

　　　　　　　　　　<div class="pull-right">向右快速浮动</div>

11、内容居中：class="center-block".

12、清除浮动：class="clearfix"

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;"><div class="pull-left" style="background:#58D3F7;">向左快速浮动</div><div class="pull-right" style="background: #DA81F5;">向右快速浮动</div>
</div>

13、强行显示：class="show"；强行隐藏：class="hidden"。

14、sr-only 来把元素对所有设备隐藏，除了屏幕阅读器：

<div class="row" style="padding: 91px 100px 19px 50px;"><form class="form-inline" role="form"><div class="form-group"><label class="sr-only" for="email">Email 地址</label><input type="email" class="form-control" placeholder="Enter email"></div><div class="form-group"><label class="sr-only" for="pass">密码</label><input type="password" class="form-control" placeholder="Password"></div></form>
</div>

转载于:https://www.cnblogs.com/shark1100913/p/5620676.html

关于bootstrap--排版（标题、强调、背景、插入符等）相关推荐

Bootstrap排版之标题
Bootstrap排版之标题 1.定义标题样式 2.运行效果 3.定义 4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bott ...
Bootstrap笔记(五) 排版 - 标题
排版 - 标题主标题副标题加强标题主标题 Bootstrap支援 <h1> ~ <h6>等HTML标题元素,也提供 .h1 ~ .h6 类别用来设定标题1 ~ 标题6 ...
Bootstrap ——排版、表格、表单、图片、button 学习博客（二）
Bootstrap中的排版 1. 排版标题部分文本部分对齐 .text-left :文字左对齐 .text-center :文字居中对齐 .text-right :文字右对齐 .text-low ...
Bootstrap 排版
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默 ...
Bootstrap模态出现在背景下
本文翻译自:Bootstrap modal appearing under background I have used the code for my modal straight from the ...
bootstrap表格标题Caption位于表格下方的原因
Env bootstrap.min 5.0.0 jquery.min 3.5.1 flask 1.1.2 chrome 87.0.4280.141(正式版本) (64 位) 问题描述表格标题烂位于表 ...
fcpx插件：PremiumVFX Comic Titles(手绘漫画风格的标题和背景
PremiumVFX Comic Titles是一组手绘漫画风格的标题和背景,包含20本漫画书标题和9个动画背景,Comic Titles可为任何视频中的消息增添活力. 漫画风格的标题和匹配的背景可为 ...
SVG排版教程 | 样式背景属性详解与应用
<元素属性原理详解与应用>讲到了SVG元素viewBox属性的实际应用,能够实现SVG元素在不同手机上的自适应适配(SVG元素的宽高根据手机屏幕大小等比例放大或缩小).SVG黑科技排版的每 ...
HtmlCss光标(插入符caret)透明隐藏光标 221106笔记
HtmlCss光标透明隐藏光标 221106笔记光标有两种文字插入符光标(caret), 一闪一闪的竖线鼠标光标(cursor), 或者应该叫指针, 或叫鼠标指针 #mermaid-svg-cj ...
创建插入符、输出不同效果的文字
创建一个MFC单文档应用程序创建插入符在窗口创建完成之后,再创建插入符,在View类当中去完成,增加一个Windows Message Handle-..,WM_CREATE消息处理函数. 1.创 ...

关于bootstrap--排版（标题、强调、背景、插入符等）

关于bootstrap--排版（标题、强调、背景、插入符等）相关推荐

最新文章

热门文章