Bootstrap_02_(全局CSS之排版&代码&表格)

胡图图.Zzz

已于 2022-04-30 19:02:44 修改

阅读量106

点赞数 2

分类专栏： Bootstrap入门、CSS样式【栅格系统】文章标签： css bootstrap html

于 2022-04-30 18:57:15 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62356088/article/details/124516713

版权

Bootstrap入门、CSS样式【栅格系统】专栏收录该内容

4 篇文章

订阅专栏

排版
1. 页面主体

Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式

段落突出：通过.lead类可以让段落突出显示，我们来看演示代码:

<div class="container">
	<p>卓越人生</p>
	<p class="lead">从卓景开始</p>
	<p>走向人生巅峰</p>
</div>

效果看的出，从卓景开始几个字变大了。这个就是段落突出显示

1. 标题
标题h1--h6和html中的效果一样
副标题：在<h1><small>副标题</small></h1>

在Bootstrap中，标题可以有副标题，副标题比正标题的字体小一点，样式有点不太一样。

<h1>卓越人生，<small>从卓景开始</small></h1>

从卓景开始为副标题

样式：class=”h1”...class=”h6”

在Bootstrap中h1- h6可以作为class的样式。来用

<p class="h1">卓越人生，从卓景开始</p>
<p class="h2">卓越人生，从卓景开始</p>
<p class="h3">卓越人生，从卓景开始</p>
<p class="h4">卓越人生，从卓景开始</p>
<p class="h5">卓越人生，从卓景开始</p>
<p class="h6">卓越人生，从卓景开始</p>

效果和直接写h1-h6的标题标签效果一样

1. 内联文本元素
  1. 标记：class=”mark”

标记，把指定的内容标记出来。示例如下:

标记：I <span class="mark"> like </span> you 很久了

被span标签包起来的文本 you 的样式被添加背景色

线条

1、删除：<del>I like </del> 或者<s>I like</s>
2、下划线：<ins>I like </ins> 或者<u>I like</u>

1. 1. 强调文本
小字体<small>：标准字号的85%
文本加粗：<strong>
文本倾斜：<em>
1. 对齐

居左：class=”text-left”

示例代码:<p class="text-left">卓越人生，从卓京开始</p>

居中：class=”text-center”

示例代码:<p class="text-center">卓越人生，从卓京开始</p>

居右：class=”text-right”

示例代码：<p class="text-right">卓越人生，从卓京开始</p>

注意：span标签无效

改变大小写

大写：class=”text-uppercase”

示例代码：<span class="text-uppercase">i like you</span>

小写：class=”text-lowercase”

示例代码：<span class="text-lowercase">I like you</span>

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

示例代码：<span class="text-capitalize">i like you</span>

缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容

基本缩略语：<abbr title=”完整内容”>

示例代码：<abbr title="超文本标记语言">HTML</abbr>是一门超简单的网页语言<br>

首字母缩略语：<abbr title=”完整内容” class=”initialism”>

示例代码：title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语

注意：这两种的区别在于首字母缩略语的字体是基本缩略语字体的90%大小

地址：<address>

示例代码：<address>家庭地址：浪琴湾</address>
		  <address>公司地址：梅溪湖></address>

会自动调整间距

1. 引用：类似名言名句的格式

默认样式的引用：<blockquote> <footer>

示例：<blockquote>阳光总在风雨后<footer>丹</footer></blockquote>

默认样式为左对齐

右对齐样式引用：<blockquote class=”blockquote-reverse”>

示例代码：<blockquote class="blockquote-reverse">阳光总在风雨后<footer><cite>丹</cite></footer></blockquote>

靠右对齐

1. 列表
有序列表：<ol><li> 同HTML
无序列表：<ul><li> 同HTML
无样式列表：<ul class=”list-unstyled”>,去掉li前面的点

示例代码：

<ul class="list-unstyled">
	<li>花间一壶酒</li>
	<li>独酌无相亲</li>
	<li>举杯邀明月，对影成三人</li>
</ul>

内联列表：<ul class=”list-inline”>，li显示在一行

示例代码：

<ul class="list-inline">
	<li>月既不解饮</li>
	<li>影徒随我身</li>
	<li>暂伴月将影，行乐须及春</li>
</ul>

描述列表：<dl class=”dl-horizontal”>。 horizontal:水平

示例代码：

<dl class="dl-horizontal">
<dt>首页</dt>
	<dd>这是首页的信息</dd>
	<dt>卓京品牌</dt>
	<dd>卓越人生，从卓京开始</dd>
</dl>

代码
1. 内联代码：通过<code>标签包裹内联样式的代码片段

示例代码：

花间一壶酒，独酌无相亲。<code>举杯邀明月，</code>对影成三人。

code标签包裹的内容加样式

1. 用户输入：通过<kbd>标签标记用户通过键盘输入的内容

示例代码：

复制快捷键：<kbd>Ctrl+C</kbd>

给kbd标签包裹起来的内容加样式

1. 基本代码块：多行代码可以使用<pre>标签

示例代码：

<pre>
		花间一壶酒，独酌无相亲 
		举杯邀明月，
		对影成三人
</pre>

pre标签内的内容所有的空格都会原样显示，标签内的文本编辑格式，会按照原样显示

设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>

代码示例：

<pre class="pre-scrollable">
	花间一壶酒，独酌无相亲 
	举杯邀明月，
	对影成三人
</pre>

表格
1. 基本表格：<table class=”table”>

咱们先来看一下我们平常写的table表格

<table>
	<thead>
		<th>编号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>18</td>
		</tr>
.......
	</tbody>
</table>

现在我们的表格是没有任何样式，没有边框没有对齐方式的。

<table class=”table”>
	<thead>
		<th>编号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>18</td>
		</tr>
.......
	</tbody>
</table>

现在再看效果，自动铺满，对齐，标题加粗，添加分割线。。

条纹状表格：<table class=”table table-striped”>

<table class=”table table-striped”>
	<thead>
		<th>编号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>18</td>
		</tr>
.......
	</tbody>
</table>

隔行就有背景色

带边框表格：<table class=”table table-bordered”>

<table class=”table table-bordered”>
	<thead>
		<th>编号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>18</td>
		</tr>
.......
	</tbody>
</table>

顾名思义这个就是有边框的表格

鼠标悬停：<table class=”table table-hover”>

<table class=”table table-hover”>
	<thead>
		<th>编号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>18</td>
		</tr>
.......
	</tbody>
</table>

鼠标移动到行就会显示效果

紧缩表格：<table class=”table-condensed”>

<table class=”table table-condensed”>
	<thead>
		<th>编号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>年龄</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>男</td>
			<td>18</td>
		</tr>
.......
	</tbody>
</table>

顾名思义紧缩表格，就是表格相对来说缩紧一些，仔细看行的上下两条线是不是缩紧了

1. 状态类
  1. class=”active”:鼠标悬停在行或者单元格上时设置的颜色
```
<tr class="active">
	<td>1</td>
	<td>张三</td>
	<td>男</td>
	<td>18</td>
</tr>
```

设置行为灰色

class=”success”:表示成功或积极的动作

<tr class="success">
	<td>1</td>
	<td>张三</td>
	<td>男</td>
	<td>18</td>
</tr>

设置行为绿色

1. 1. Class=”info”:表示普通的提示信息或动作

设置行为蓝色

<tr class="info">
	<td>1</td>
	<td>张三</td>
	<td>男</td>
	<td>18</td>
</tr>

Class=”warning”:表示警告或需要用户注意

<tr class="warning">
	<td>1</td>
	<td>张三</td>
	<td>男</td>
	<td>18</td>
</tr>

设置行为黄色

Class=”danger”:表示危险或潜在的带来负面影响的动作

<tr class="danger">
	<td>1</td>
	<td>张三</td>
	<td>男</td>
	<td>18</td>
</tr>

设置行为红色

1. 响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”
```
<tr class="table table-responsive">
	<td>1</td>
	<td>张三</td>
	<td>男</td>
	<td>18</td>
</tr>
```

响应式上一节课说过，是Bootstrap的最大特点。响应式表格会根据页面缩小，给表格第一行上面添加边框