Bootstrap[02]全局CSS之排版、代码、表格

最新推荐文章于 2024-10-29 14:54:04 发布

对太阳心动

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量104

点赞数 2

文章标签： css bootstrap html 前端 javascript

本文链接：https://blog.csdn.net/weixin_62026595/article/details/124509959

版权

一：排版

1.1 页面主体 : 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"> donnot like </span> you 很久了

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

1.3.2 线条：

1.2 删除：<del>I like </del> 或者<s>I like</s>

1.3 下划线：<ins>I like </ins> 或者<u>I like</u>

1.3.3 强调文本

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

1.4 对齐

居左：class=”text-left”

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

居中：class=”text-center”

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

注意：span标签无效

1.5改变大小写:

大写：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>

1.6缩略语

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

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

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

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

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

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

1.7 引用：类似名言名句的格式

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

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

默认样式为左对齐

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

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

靠右对齐

1.8列表

有序列表：<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>

二：代码

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

示例代码：

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

code标签包裹的内容加样式

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

示例代码：

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

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

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

示例代码：

<pre>

花间一壶酒，独酌无相亲

举杯邀明月，

对影成三人

</pre>

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

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

代码示例：

<pre class="pre-scrollable">

花间一壶酒，独酌无相亲

举杯邀明月，

对影成三人

</pre>

示例图片效果

三：表格

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

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

带边框表格：<table class=”table table-bordered”>
鼠标悬停：<table class=”table table-hover”>
紧缩表格：<table class=”table-condensed”>
状态类
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>

设置行为绿色

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>

设置行为红色

响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”

<tr class="table table-responsive">

<td>1</td>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>

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