bootstrap4--页面基本设置

最新推荐文章于 2024-08-28 13:33:06 发布

张0x0

最新推荐文章于 2024-08-28 13:33:06 发布

阅读量1.3k

点赞数

分类专栏： web前端基础学习文章标签：前端 bootstrap css

本文链接：https://blog.csdn.net/zxn200125/article/details/121924723

版权

本文详细介绍了Bootstrap4中如何设置页面的基本样式，包括默认设置、标题、文本样式标签、文本样式类，如字体、对齐、换行、大小写、列表样式、颜色等。通过各种示例代码展示了如何实现文本的高亮、引用、代码显示、对齐方式、大小写转换和颜色背景的调整。

摘要由CSDN通过智能技术生成

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

默认设置

●font-size：16px

●line-height：1.5

●font-family："Helvetica Neue", Helvetica, Arial, sans-serif

●<p>标签：margin-top:0 margin-bottom:16px

标题设置

在html5中我们已经学过，标题可以使用h1-h6样式进行设置，bootstrap中也是亦然。除此之外，bootstrap中还提供了4个Display类来控制标题样式：.display-1，.display-2，.display-3，.display-4，相对来说，display标题可以输出更大更粗的字体样式。

除了主标题，bootstrap还可以设置内联子标题，只需要在元素两旁添加<small>或者添加.small class就可以得到一个与主标题并排的字号更小颜色更浅的文本

●标题：<h1></h1>，<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>

●标题类：.display-1，.display-2，.display-3，.display-4

●内联子标题：<small></small> / .small

内联子标题通常会与.text-muted样式一起使用，作用是使字体颜色变浅

测试代码：

    <div class="container">
        <h1 class="display-1">display 1</h1>
        <h1 class="display-2">display 2</h1>
        <h1 class="display-3">display 3</h1>
        <h1 class="display-4">display 4</h1>
        <h1>h1 主标题1 <small>副标题1</small></h1>
        <h2>h2 主标题2 <small>副标题2</small></h2>
        <h3>h3 主标题3 <small class="text-muted">副标题3</small></h3>
        <h4>h4 主标题4 <small class="text-muted">副标题4</small></h4>
        <h5>h5 主标题5 <small>副标题5</small></h5>
        <h6>h6 主标题6 <small>副标题6</small></h6>
    </div>

网页效果：