AI导航网

技术频道

公众号推荐

微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Bootstrap排版之超大标题

时间：2022-10-08分类：Bootstrap作者：编程之家原文地址

原文链接：https://www.mk2048.com/blog/blog.php?id=jckhj21ab&title=Bootstrap%E6%8E%92%E7%89%88%E4%B9%8B%E8%B6%85%E5%A4%A7%E6%A0%87%E9%A2%98

标题

HTML 中的所有标题标签，

<h1>

到

<h6>

均可使用。另外，还提供了

.h1

到

.h6

类，为的是给内联（inline）属性的文本赋予标题的样式。

h1. Bootstrap heading	Semibold 36px
h2. Bootstrap heading	Semibold 30px
h3. Bootstrap heading	Semibold 24px
h4. Bootstrap heading	Semibold 18px
h5. Bootstrap heading	Semibold 14px
h6. Bootstrap heading	Semibold 12px

复制

<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>

在标题内还可以包含

<small>

标签或赋予

.small

类的元素，可以用来标记副标题。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text

h6. Bootstrap heading Secondary text

复制

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></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）。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

复制

<p>...</p>

中心内容

通过添加

.lead

类可以让段落突出显示。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

复制

<p class="lead">...</p>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

Bootstrip HTML 查询搜索常用格式模版

Bootstrip HTML 查询搜索常用格式模版 <form class="form-inline my-3 d-flex align-items-center justify-content-start" method="get" action=&q

作者：编程之家时间：2024-07-25

如何在按钮上加红色数字

如何在按钮上加红色数字您可以使用Bootstrap的badge组件来在按钮上显示红色数字。以下是一个例子： <button class="btn btn-primary"> My Button <span class="ba...

作者：编程之家时间：2024-07-25

让两个按钮左右排列

要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它们放置在同一行中。你可以将按钮放置在两个 col 中，分别占据一定的列宽。以下是你的模板代码做出的修改： {% extends 'base.html' %} {...

作者：编程之家时间：2024-07-25

status能否设置为布尔值类型，前端采用复选框形式

是的，可以将status设置为布尔类型，这样可以在前端使用复选框形式展示。在模型中的定义可以如下： class Acceptance(models.Model): # ... status = models.BooleanField(default=False) 然后在前端模板中使用{{ fo...

作者：编程之家时间：2024-07-25

Bootstrap 按钮总结

前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自己重新定义class类即可，主要样式要随具体情况而定包括位置任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap提供了一些选项来定义...

作者：编程之家时间：2022-10-08

Python学习-day52-bootstrap

起步导入：<linkrel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.css"><scriptsrc="js/jquery-3.3.1.js"></script><scriptsrc="bootstrap-3.3....

作者：编程之家时间：2022-10-08

bootstrap 模态框

（1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（3）modal-lg定义大尺寸模态框（4）modal-sm定义小尺寸模态框（5）modal-header（6）modal-body（7）modal-footer<!doctypehtml><html><he...

作者：编程之家时间：2022-10-08

BootStrap图片样式

图片在Bootstrap版本3中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width:100%;、 height:auto; 和 display:block; 属性，从而让图片在其父元素中更好的缩放。...

作者：编程之家时间：2022-10-08

bootstrap日期选择

<inputtype="text"class="form-controldatepicker"style="padding:0.375rem0.75rem;"placeholder="开始时间"readonly="true" id="start_time"name=...

作者：编程之家时间：2022-10-08

bootstrap-treeview 使用小记

目录bootstrap-treeview使用小记零、写在前面的话一、功能说明二、特性简述三、实战3.1依赖环境3.2数据源格式3.3Options选项3.4Methods方法3.5Events事件N-2、番外N-1、本文demoN、参考资料bootstrap-treeview使用小...

作者：编程之家时间：2022-10-08