Bootstrap【第二章】—全局CSS之排版、代码、表格

用户10196776

发布于 2022-11-20 14:21:16

2K0

文章被收录于专栏：SpringBoot+MyBatis前端SpringBoot+MyBatis前端

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.2. 标题

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

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

1.3. 内联文本元素

1.3.1. 标记：class=”mark”

标记，把指定的内容标记出来。示例如下: 标记：I <span class="mark"> like </span> you 很久了被span标签包起来的文本 you 的样式被添加背景色

1.3.2. 线条

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

1.3.3. 强调文本

1、小字体<small>：标准字号的85% 2、文本加粗：<strong> 3、文本倾斜：<em>

1.4. 对齐

1、居左：class=”text-left” 2、居中：class=”text-center” 3、居右：class=”text-right”

1.5. 改变大小写 3

大写：class=”text-uppercase”

示例代码：<span class="text-uppercase">i like you</span> 2 .小写：class=”text-lowercase” 示例代码：<span class="text-lowercase">I like you</span> 3.首字母大写：class=”text-capitalize” 示例代码：<span class="text-capitalize">i like you</span>

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

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

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

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

示例代码：title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语注意：这两种的区别在于首字母缩略语的字体是基本缩略语字体的90%大小

1.7. 地址：<address>

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

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

1、默认样式的引用：<blockquote>   <footer>
示例：<blockquote>阳光总在风雨后<footer>丹</footer></blockquote>
默认样式为左对齐
2、右对齐样式引用：<blockquote class=”blockquote-reverse”>
示例代码：<blockquote class="blockquote-reverse">阳光总在风雨后<footer><cite>丹</cite></footer></blockquote>
靠右对齐

1.9. 列表

有序列表：<ol><li> 同HTML
无序列表：<ul><li> 同HTML
无样式列表：<ul class=”list-unstyled”>,去掉li前面的点
内联列表：<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>

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

2. 代码

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>

3. 表格

咱们先来看一下我们平常写的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>

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

1. 条纹状表格：<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>

隔行就有背景色

1. 带边框表格：<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>

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

1. 鼠标悬停：<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>

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

1. 紧缩表格：<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>

设置行为灰色

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

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

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

设置行为黄色

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-30，如有侵权请联系 cloudcommunity@tencent.com 删除

c++

编程算法

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

c++

编程算法

html

登录后参与评论

0 条评论

热度

Bootstrap【第二章】—全局CSS之排版、代码、表格

Bootstrap【第二章】—全局CSS之排版、代码、表格

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐