BootStrap常用组件（全局CSS样式）

最新推荐文章于 2024-05-30 15:01:09 发布

陛下，再来一杯娃哈哈

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量981

点赞数

文章标签： css bootstrap html

本文链接：https://blog.csdn.net/m0_46420078/article/details/122644126

版权

本文详细介绍了BootStrap的全局CSS样式，包括布局容器、排版和表格的样式。在排版部分讲解了标题、页面主体、文本对齐等；表格部分涵盖了全局样式、条纹状表格、带边框的表格以及响应式表格等特性。

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

一、全局CSS样式——概述

1、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

container类	用于固定宽度并支持响应式布局的容器
container-fluid类	用于100%宽度，占据全部视口（viewport）的容器

（1）container类

二、全局CSS样式——排版

1、标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<div class="container">
        <h1>
            一级标题
            <small>西安邮电大学</small>
        </h1>
        <h2>
            二级标题
            <small>计算机科学与技术专业</small>
        </h2>
</div>

2、页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

3、内联文本元素

被删除的文本	<del>HTML5删除文本</del>
插入的文件	<ins>插入文本</ins>
下划线的文本	<u>下划线文本</u>
小号文本	<small></small> 或 .small
着重文本	<strong></strong>
斜体文本	<em></em>

4、文本对齐

class

最低0.47元/天解锁文章

陛下，再来一杯娃哈哈

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
BootStrap常用组件（全局CSS样式）

一、全局CSS样式——概述1、布局容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。container类用于固定宽度ving支持响应式布局的容器 container-fluid类用于100%宽度，占据全部视口（viewport）的容器 ...
复制链接

扫一扫