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

明思齐

已于 2022-05-03 23:18:57 修改

阅读量1.1k

点赞数 3

文章标签： html bootstrap javascript

于 2022-04-30 22:10:50 首次发布

本文链接：https://blog.csdn.net/m0_61911999/article/details/124519367

版权

前言：今天要学习的是Bootstrap的全局CSS之排版&代码&表格

一张图概括今天的内容：

一、排版

   1.1、页面主题
       1、段落突出：通过.lead类可以让段落突出显示
       例如：<p class="lead">我家门前有两颗枣树</p>
   1.2、标题
       1.标题h1--h6和html中的效果一样
       2.副标题：在<h1><small>副标题</small></h1>
       3.在Bootstrap中，标题可以有副标题，副标题比正标题的字体小一点，样式有点不太一样
       例如：<p class="h1">我在等风，也在等你</p>
   1.3、内联文本元素
       1.标记：class=”mark” (把指定的内容标记出来)
       例如：I <span class="mark"> missing </span> you
       被span标签包起来的文本 you 的样式被添加背景色
       2.线条
       1、删除：<del>like </del> OR<s>like</s>
       2、下划线：<ins>like </ins> OR<u>like</u>
       3.强调文本
       1、小字体<small>：标准字号的85%
       2、文本加粗：<strong>
       3、文本倾斜：<em>
   1.4、对齐
       1、居左：class=”text-left”

       2、居中：class=”text-center”

       3、居右：class=”text-right”

       注意：span标签无效！！！
   1.5、改变大小写
       1、大写：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、缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容
       1、基本缩略语：<abbr title=”完整内容”>
       示例代码：<abbr title="超文本标记语言">HTML</abbr>
       2、首字母缩略语：<abbr title=”完整内容” class=”initialism”>
       示例代码：title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语
       注意：这两种的区别在于首字母缩略语的字体是基本缩略语字体的90%大小
   1.7、地址：<address>会自动调整间距
       示例代码：<address>家庭地址：xxx</address>
   1.8、引用：类似名言名句的格式
       1、默认样式的引用：<blockquote> <footer> (默认样式为左对齐)
       示例代码：<blockquote>阳光正好<footer>sum</footer></blockquote>
       2、右对齐样式引用：<blockquote class=”blockquote-reverse”>(靠右对齐)
       示例代码：<blockquote class="blockquote-reverse">阳光正好<footer><cite>sum</cite></footer></blockquote>
   1.9、列表
       1、有序列表：<ol><li> 同HTML
       2、无序列表：<ul><li> 同HTML
       3、无样式列表：<ul class=”list-unstyled”>
       示例代码：
       <ul class="list-unstyled">
       <li>少年不俱岁月长</li>
       <li>彼方尚有荣光在</li>
       </ul>
       4、内联列表：<ul class=”list-inline”>，li显示在一行
       示例代码：
       <ul class="list-inline">
       <li>月既不解饮</li>
       <li>影徒随我身</li>
       <li>暂伴月将影，行乐须及春</li>
       </ul>
       5、描述列表：<dl class=”dl-horizontal”>。 horizontal:水平
       示例代码：
       <dl class="dl-horizontal">
       <dt>丁达尔</dt>
       <dd>光效应</dd>
       </dl>

效果图如下：

代码展示：

        <!-- 固定容器 -->
		<div class="container">
		<!-- 全局CSS样式 -->
		<h1>一、排版</h1>
		<h3 class="mark">1.1 段落突出</h3>
			<p>学无止境</p>
			<p class="lead">学无止境</p>
		
		<h3 class="mark">1.2 标题</h3>
			<h2>春天尚在场</h2>
			<p class="h2">春天尚在场</p>
			<h2>
				老师说：
				<small>苦尽甘来</small>
			</h2>
		
		<h3 class="mark">1.3 内联文本元素</h3>
			<p class="mark">夏天</p>
			<!-- 删除 <del> or <s>-->
			<del>春秋</del> <s>冬夏</s>
			<br />
			<!-- 下划线 <u> or <ins>-->
			<u>湖南</u> <ins>洞庭湖</ins>
			<br />
			<!--小字体<small> 标准字号的85% -->
			<!--加粗<strong> 倾斜<em> -->
			<p>明思齐</p>
			<small>明思齐</small>
			<strong>明思齐</strong>
			<em>明思齐</em>
			
		<h3 class="mark">1.4 对齐</h3>
			<p>坚持不懈</p>
			<p class="text-left">坚持不懈</p>
			<p class="text-center">坚持不懈</p>
			<p class="text-right">坚持不懈</p>
		
		<h3 class="mark">1.5 改变大小写</h3>
			<p>you</p>
			<!--首字母大写<text-capitalize> 小写<text-uppercase> 大写<text-lowercase>-->
			<p class="text-uppercase">you</p>
			<p class="text-capitalize">you</p>
			<p class="text-lowercase">you</p>
		
		<h3 class="mark">1.6 略缩语</h3>
			<p>hhh</p>
			<abbr title="JavaBase">hhh</abbr>
			<abbr title="Oracle" class="initialism">IMY</abbr>
		
		<h3 class="mark">1.7 地址</h3>
			<address>家庭地址：xxx </address>
			<address>学校地址：xxx </address>
		
		<h3 class="mark">1.8 引用</h3>
		<!--默认引用 -->
		<blockquote>青山不改，绿水长流<footer>lxy</footer></blockquote>
		<!--右对齐引用 -->
		<blockquote class="blockquote-reverse">青山不改，绿水长流<footer><cite>lxy</cite></footer></blockquote>
		
		<h3 class="mark">1.9 列表</h3>
		<!--有序列表 <ol><li> -->
		<ol>
			<li>宝剑锋从磨砺出</li>
			<li>梅花香自苦寒来</li>
		</ol>
		<!--无序列表 <ul><li> -->
		<ul>
			<li>远赴人间惊鸿宴</li>
			<li>一睹人间盛世颜</li>
		</ul>
		<!--无样式列表 <ul class=”list-unstyled”> -->
		<ul class="list-unstyled">
			<li>远赴山海</li>
			<li>与你共存</li>
		</ul>
		</div>

二、代码

    2.1、内联代码：通过<code>标签包裹内联样式的代码片段
       示例代码：远赴山海<code>与你共存</code>
       code标签包裹的内容加样式
   2.2、用户输入：通过<kbd>标签标记用户通过键盘输入的内容
       示例：<kbd>他</kbd>
   2.3、基本代码块：多行代码可以使用<pre>标签
       示例代码：
       <pre>
       花间一壶酒，独酌无相亲
       举杯邀明月，对影成三人
       </pre>
  pre标签内的内容所有的空格都会原样显示，标签内的文本编辑格式，会按照原样显示
  设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>

效果图如下：

代码展示：

	    <h1>二、代码</h1>
		<h3 class="mark">2.1 内联代码</h3>
		我们的人生
		<code>精彩无比</code>
		
		<h3 class="mark">2.2 用户输入</h3>
			<kbd>落霞与孤鹜齐飞</kbd>
		
		<h3 class="mark">2.3 基本代码块</h3>
			<pre class="pre-scrollable">
				落霞与孤鹜齐飞，
				秋水共长天一色。
				无人问津的日子里也要好好生活！
			</pre>
		
		<h3 class="mark">2.4 程序输出</h3>
			<p>问灵十八载，等一不归人</p>
			<samp>问灵十八载，等一不归人</samp>
		<hr />

三、表格

    3.1.基本表格：<table class=”table”>
   3.2.条纹状表格：<table class=”table table-striped”> 隔行就有背景色
   3.3.带边框表格：<table class=”table table-bordered”>
   3.4.鼠标悬停：<table class=”table table-hover”>鼠标移动到行就会显示效果
   3.5.紧缩表格：<table class=”table-condensed”>
   紧缩表格，就是表格相对来说缩紧一些
   3.6.状态类
       1、class=”active”:鼠标悬停在行或者单元格上时设置的颜色
       2、class=”success”:表示成功或积极的动作
       3、 Class=”info”:表示普通的提示信息或动作
       4、Class=”warning”:表示警告或需要用户注意
       5、Class=”danger”:表示危险或潜在的带来负面影响的动作
   3.7.响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”

效果图如下：

代码展示：其余表格，可由此代码类推

        <h3 class="mark">3.7 响应式表格</h3>
		<table class="table table-hover table-responsive">
			<tr class="info">
				<td>姓名</td>
				<td>性别</td>
				<td>爱好</td>
				<td>地址</td>
				<td>成就</td>
			</tr>
			<tr class="danger">
				<td>牛顿</td>
				<td>男</td>
				<td>三大定律</td>
				<td>英国</td>
				<td>万有引力定律</td>
			</tr>
			<tr class="success">
				<td>爱因斯坦</td>
				<td>男</td>
				<td>质能方程</td>
				<td>德国</td>
				<td>E=MC2</td>
			</tr>
			<tr class="warning">
				<td>薛定谔</td>
				<td>男</td>
				<td>薛定谔方程</td>
				<td>英国</td>
				<td>薛定谔方程</td>
			</tr>
		</table>