【03】全局 CSS 样式

一、全局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 = “text-left” 文本左对齐

class = “text-right” 文本右对齐

class = “text-center” 文本中对齐

class = “text-justify ” 文本两端对齐

class = “text-nowrap” 禁止文本换行

<p class="text-right">大雁塔</p>

<p class="text-center">西安邮电大学</p>

5、改变大小写

class =“text-lowercase” 转成小写

class = “text-uppercase” 转成大写

class = “text-capitalize” 首字母大写

<p class="text-lowercase">This is a Pencil</p>

<p class="text-capitalize">student java python go</p>

6、列表

(1)无样式列表

(2)内联列表

通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

三、全局CSS样式——表格

<body>

<div class="container">

<table >

<thead>

<tr>

<th width="50">学号</th>

<th width="100">姓名</th>

<th width="50">性别</th>

<th width="50">年龄</th>

<th width="150">地址</th>

</tr>

</thead>

<tbody>

<tr>

<td>1001</td>

<td>刘备</td>

<td>男</td>

<td>36</td>

<td>小沛</td>

</tr>

<tr>

<td>1002</td>

<td>诸葛亮</td>

<td>男</td>

<td>26</td>

<td>襄阳</td>

</tr>

<tr>

<td>1003</td>

<td>曹操</td>

<td>男</td>

<td>38</td>

<td>许昌</td>

</tr>

<tr>

<td>1004</td>

<td>孙权</td>

<td>男</td>

<td>32</td>

<td>江油</td>

</tr>

</tbody>

</table>

</div>

</body>

1、表格全局类样式

描述:为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。

<table class="table" >

2、条纹状表格——表格隔行变色

描述:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<table class="table table-bordered table-striped" >

3、带边框的表格

描述:添加 .table-bordered 类为表格和其中的每个单元格增加边框。

4、鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

5、紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

<table class="table table-bordered table-striped table-hover table-condensed" >

6、状态类

通过这些状态类可以为行或单元格设置颜色。

.active 鼠标悬停在行或单元格上时所设置的颜色

.success 标识成功或积极的动作

.info 标识普通的提示信息或动作

.warning 标识警告或需要用户注意

.danger 标识危险或潜在的带来负面影响的动作

(1)<tr class="success" >

(2)<tr class="info">

(3)<tr class="warning">

(4)<tr class="danger">

7、响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

垂直方向的内容截断:响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部的内容截断。

————————————————

版权声明:本文为CSDN博主「陛下,再来一杯娃哈哈」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

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