Bootstrap 排版

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。

标题

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 标题</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6></body>
</html>

尝试一下 »

结果如下所示：

标题

内联子标题

如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加.small class，这样子您就能得到一个字号更小的颜色更浅的文本，如下面实例所示：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 内联子标题</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6></body>
</html>

尝试一下 »

结果如下所示：

内联子标题

引导主体副本

为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本，如下面实例所示：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 引导主体副本</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p></body>
</html>

尝试一下 »

结果如下所示：

引导主体副本

强调

HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。

Bootstrap 提供了一些用于强调文本的类，如下面实例所示：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 强调</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 warning class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p></body>
</html>

尝试一下 »

结果如下所示：

强调

缩写

HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 缩写</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr></body>
</html>

尝试一下 »

结果如下所示：

缩写

地址（Address）

使用 <address> 标签，您可以在网页上显示联系信息。由于 <address> 默认为 display:block;，您需要使用 
标签来为封闭的地址文本添加换行。

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 地址</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><address><strong>Some Company, Inc.</strong><br>007 street<br>Some City, State XXXXX<br><abbr title="Phone">P:</abbr> (123) 456-7890
</address><address><strong>Full Name</strong><br><a href="mailto:#">mailto@somedomain.com</a>
</address></body>
</html>

尝试一下 »

结果如下所示：

地址

引用（Blockquote）

您可以在任意的 HTML 文本旁使用默认的 <blockquote>。其他选项包括，添加一个 <small> 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。下面的实例演示了这些特性：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 引用</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><blockquote><p>
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote></body>
</html>

尝试一下 »

结果如下所示：

引用

列表

Bootstrap 支持有序列表、无序列表和定义列表。

  • 有序列表：有序列表是指以数字或其他有序字符开头的列表。

  • 无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline把所有的列表项放在同一行中。

  • 定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用 classdl-horizontal 把 <dl> 行中的属于与描述并排显示。

下面的实例演示了这些类型的列表：

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 列表</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body><h4>有序列表</h4>
<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl><dt>Description 1</dt><dd>Item 1</dd><dt>Description 2</dt><dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal"><dt>Description 1</dt><dd>Item 1</dd><dt>Description 2</dt><dd>Item 2</dd>
</dl></body>
</html>

尝试一下 »

结果如下所示：

列表

原文地址：http://www.phplearn.cn/bootstrap/bootstrap-typography.html


转载于:https://my.oschina.net/wybo521/blog/608866

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/399000.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于小波包的图像压缩及matlab实现,基于小波包的图像压缩及matlab实现精选.doc...

基于小波包的图像压缩及matlab实现,基于小波包的图像压缩及matlab实现精选.doc...

基于小波包的图像压缩及matlab实现精选基于小波包的图像压缩及matlab实现摘要&#xff1a;小波包分析理论作为新的时频分析工具&#xff0c;在信号分析和处理中得到了很好的应用&#xff0c;它在信号处理、模式识别、图像分析、数据压缩、语音识别与合成等等许多方面都取得了很…
阅读更多...
有空研究这篇http://blog.csdn.net/studyvcmfc/article/details/7720258 研究后写篇记录

有空研究这篇http://blog.csdn.net/studyvcmfc/article/details/7720258 研究后写篇记录

对对对转载于:https://www.cnblogs.com/hansongjiang/p/3997102.html
阅读更多...
为div添加滚动效果:

为div添加滚动效果:

为div添加滚动效果: .xxxx{　　width: 100%;height: 100%;overflow: hidden;overflow-y: auto;} 代码片段 <div class"xxxx"><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</d…
阅读更多...
php读取子目录下文件内容,php小代码----目录下读取子文件或子目录_PHP教程

php读取子目录下文件内容,php小代码----目录下读取子文件或子目录_PHP教程

php小代码----目录下读取子文件或子目录rootPath $rootPath;if (is_dir($this->rootPath)) {$this->rootPath pathinfo($this->rootPath, PATHINFO_DIRNAME) . DIRECTORY_SEPARATOR . pathinfo($this->rootPath, PATHINFO_BASENAME);$this->opDirectory dir(…
阅读更多...
Apache Lens —— 统计数据分析查询接口

Apache Lens —— 统计数据分析查询接口

Lens 提供了一个统一数据分析接口。通过提供一个跨多个数据存储的单一视图来实现数据分析任务切分&#xff0c;同时优化了执行的环境。无缝的集成 Hadoop 实现类似传统数据仓库的功能。 该项目主要特性&#xff1a; 简单元数据层为数据存储提供抽象视图层 单一的共享模式服务器…
阅读更多...
js文件中调用另一个js文件：

js文件中调用另一个js文件：

document.write("<script languagejavascript src/UEditor/uparse.js></script");转载于:https://www.cnblogs.com/flywing/p/3998261.html
阅读更多...
JDK8新特性-java.util.function-Predicate接口

JDK8新特性-java.util.function-Predicate接口

上篇主要对Function函数进行了简单了解&#xff0c;本篇则主要了解Predicate。该函数的主要作用其实就是判定输入的对象是否否和某个条件&#xff0c;然后将其布尔值返回。 主要使用方法如下&#xff1a; //唯一的抽象方法 boolean test(T t); //且操作&#xff0c;既满足A也满…
阅读更多...
linux查服务器总内存大小,在linux 下怎么查看服务器的cpu和内存的硬件信息

linux查服务器总内存大小,在linux 下怎么查看服务器的cpu和内存的硬件信息

1&#xff0c;Linux下可以在/proc/cpuinfo中看到每个cpu的详细信息。但是对于双核的cpu&#xff0c;在cpuinfo中会看到两个cpu。常常会让人误以为是两个单核的cpu。其实应该通过Physical Processor ID来区分单核和双核。而Physical Processor ID可以从cpuinfo或者dmesg中找到. …
阅读更多...
ZIP打包解包

ZIP打包解包

linux zip命令的基本用法是&#xff1a; zip [参数] [打包后的文件名] [打包的目录路径] linux zip命令参数列表&#xff1a; -a 将文件转成ASCII模式-F 尝试修复损坏的压缩文件-h 显示帮助界面-m 将文件压缩之后&#xff0c;删除源文件-n 特定字符串 不压缩具有特定字尾字符串…
阅读更多...
HTML5 上传图片预览

HTML5 上传图片预览

html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后 有个filereader 解决了这问题 //选中图片之后$("#fileAddPic").on(change, function (e) {var files e.target.files || e.dataTransfer.files;onSelect(files);})//选中图片…
阅读更多...
博客园自动显示随笔标签

博客园自动显示随笔标签

title: 博客园自动显示随笔标签 date: 2018-01-03 20:52:22 tags: 浏览器脚本 categories: 前端 在添加随笔页自动显示已有标签&#xff0c;不用点击插入已有标签 效果如图 安装链接https://greasyfork.org/zh-CN/scripts/36809-%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%98%BE%E7%A4%BA…
阅读更多...
linux 进程代码,怎样从Linux终端管理进程：10个你必须知道的命令

linux 进程代码,怎样从Linux终端管理进程：10个你必须知道的命令

Linux终端有一系列有用的命令。它们可以显示正在运行的进程、杀死进程和改变进程的优先级。本文列举了一些经典传统的命令和一些有用新颖的命令。本文提到的命令会实现某个单一功能。它们可以结合起来——这也是Unix设计程序的理念。其它命令&#xff0c;例如htop,会在命令的上…
阅读更多...
c# datagridviewcomboboxcell值无效的解决办法

c# datagridviewcomboboxcell值无效的解决办法

一直认为是数据库存储的数据和datagridviewcomboboxcell对不上导致&#xff0c;今天碰到两者对应上了&#xff0c;预览的时候还是提示错误&#xff0c; 查看了下网上其他大神的解决方法&#xff0c;是数据库字段类型有误&#xff0c;查看了下&#xff0c;当下拉菜单中包含中文字…
阅读更多...
python object类

python object类

这个应为写得&#xff0c;写得蛮啰嗦的&#xff0c;建议耐心的人看看&#xff1a;http://www.cafepy.com/article/python_types_and_objects/python_types_and_objects.html 知乎&#xff1a;http://www.zhihu.com/question/19754936 新式类&#xff0c;不学也没关系。看了一堆…
阅读更多...
linux符号命令,Linux_几个符号命令(示例代码)

linux符号命令,Linux_几个符号命令(示例代码)

一、管道符号 | (将前面命令的输出结果传给后面的命令)[[email protected] ~]$ cat /etc/passwd | grep "^root"root:x:0:0:root:/root:/bin/bash二、重定向符号 [>] [[[email protected] ~]# df > /usr/tmp/df.txt # >:输入重定向 即将命令结果重定向给df.…
阅读更多...
pycharm 安装 tensorflow

pycharm 安装 tensorflow

1. 安装python 3.5 链接&#xff1a;https://www.python.org/downloads/release/python-352/ 1.1如果之前安装了其他版本的&#xff0c;可以在你需要的项目中&#xff0c;导入本地需要的解释器 如果遇到安装包不知道安装位置&#xff0c;在C盘中搜索&#xff0c;然后将python3…
阅读更多...
HashTable 源码解读

HashTable 源码解读

很多人都知道HashTable与HashMap的关系&#xff0c;HashTable是线程安全的&#xff0c;HashMap是非线程安全的。在介绍完HashMap之后&#xff0c;趁热介绍一下HashTable。在HashTable中没有像HashMap中那么多关于数据结构的内容。HashTable是线程安全的&#xff0c;因为其源码的…
阅读更多...
C#Semaphore信号量用法

C#Semaphore信号量用法

参考博客&#xff1a;http://www.cnblogs.com/free722/archive/2011/04/03/2004926.html http://www.cnblogs.com/heqichang/archive/2011/12/24/2300301.html 信号量说简单点就是为了线程同步&#xff0c;或者说是为了限制线程能运行的数量。 那它又是怎么限制线程的数量的哩&…
阅读更多...
OC基础--OC中的类方法和对象方法

OC基础--OC中的类方法和对象方法

PS:个人感觉跟C#的静态方法和非静态方法有点类似&#xff0c;仅仅是有点类似。明杰老师说过不要总跟之前学过的语言做比较&#xff0c;但是个人觉得&#xff0c;比较一下可以加深印象吧。重点是自己真的能够区分开&#xff01; 一、OC中的对象方法 1.以减号“-”开头 2.只能让对…
阅读更多...
linux vnc 改端口号,RHEL6下配置vncserver服务（包括修改vnc端口）

linux vnc 改端口号,RHEL6下配置vncserver服务（包括修改vnc端口）

RHEL6下配置vncserver服务(包括修改vnc端口)(2012-04-13 23:36:07)标签&#xff1a;it配置完vsftpd后&#xff0c;还必须要开的服务就是vnc啦&#xff0c;首先&#xff0c;在root用户下利用yum源安装vncserver:yum list | grep vncyum install tigervnc-server.i686安装完成后&…
阅读更多...
最新文章

Copyright @ 2022~2023