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

最新推荐文章于 2024-10-17 15:53:46 发布
最新推荐文章于 2024-10-17 15:53:46 发布
阅读量89 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61607136/article/details/124517007
版权

 1、思维导图

2、排版

 页面主体：Bootstrap将全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式
段落突出：通过.lead类可以让段落突出显示，
标题：
        1. h1- h6
        2.<h1><small>副标题</small></h1>
        3.class=”h1”...class=”h6”
内联文本元素:
        标记：class=”mark”
        线条:1、删除：<del>I like </del> 或者<s>I like</s>
                 2、下划线：<ins>I like </ins> 或者<u>I like</u>
        强调文本: 1、小字体<small>：标准字号的85%
                         2、文本加粗：<strong>
                         3、文本倾斜：<em>
        对齐:
            1、居左：class=”text-left”
            2、居中：class=”text-center”
            3、居右：class=”text-right”
       改变大小写:
          1、大写：class=”text-uppercase”
         2、小写：class=”text-lowercase”
         3、首字母大写：class=”text-capitalize”
    缩略词
        1.当鼠标悬停在缩写和缩写词上就会显示完整内容
        2.基本缩略语：<abbr title=”完整内容”>
        3.首字母缩略语：<abbr title=”完整内容” class=”initialism”>
    地址:
         让联系信息以最近日常使用格式呈现
         <address></address>
    引用:
         1、默认样式的引用：<blockquote>   <footer>
         2、右对齐样式引用：<blockquote class=”blockquote-reverse”>
    列表:
        1、有序列表：<ol><li> 同HTML
        2、无序列表：<ul><li> 同HTML
        3、无样式列表：<ul class=”list-unstyled”>,去掉li前面的点
        4、内联列表：<ul class=”list-inline”>，li显示在一行
        5、描述列表：<dl class=”dl-horizontal”>。 horizontal:水平
 

3、代码演示以及效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Bootstrap第二次课</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js">
		</script>
		<script type="text/javascript" src="js/bootstrap.js">
		</script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
	<body>
		<!-- 全局CSS样式 -->
		<h2>一、排版</h2>
		<h3 class="mark">1.1 段落突出</h3>
		<p>哈哈哈</p>
		<p class="lead">哈哈哈</p>
 
		<h3 class="mark">1.2 标题</h3>
		<h1>哈哈哈</h1>
		<p class="h1">哈哈哈</p>
		<h3 class="mark">1.3 内联文本元素</h3>
		<del>哈哈哈</del>
		<s>哈哈哈</s>
		<u>啊哈哈</u>
		<ins>哈哈哈</ins>
		<strong>哈哈哈</strong>
		<em>啊哈哈</em>
 
		<h3 class="mark">1.4 对齐</h3>
		<p class="text-left">牛哇</p>
		<p class="text-center">sajdksadadja</p>
		<p class="text-right">sdasd</p>
		<h3 class="mark">1.5 改变大小写</h3>
		<p class="text-uppercase">sjdfhjfsjdfh</p>
		<p class="text-capitalize">hhhajs</p>
		<p class="text-lowercase">HDSAJHDJAS</p>
		<h3 class="mark">1.6 略缩语</h3>
		<abbr title="谭">张三</abbr>
		<abbr title="hahha" class="initialism">哈哈哈</abbr>
		<h3 class="mark">1.7 地址</h3>
		<address>hahha</address>
		<address>adjsakdjkas</address>
		<h3 class="mark">1.8 引用</h3>
		<blockquote>
			合计阿萨黄金时代
			<footer>
				<cite title="">aaa</cite>
			</footer>
		</blockquote>
		<blockquote class="blockquote-reverse">hadjkhjaa
		</blockquote>
		<h3 class="mark">1.9 列表</h3>
		<ol>
			<li>jhdfjfjsd</li>
			<li>jsklgjfa</li>
		</ol>
		<ul>
			<li>hfjashjk</li>
			<li>dhdfsadjkh</li>
		</ul>
		<ol class="list-unstyled">
			<li>jhdfjfjsd</li>
			<li>jsklgjfa</li>
		</ol>
		<ul class="list-inline">
			<li>hfjashjk</li>
			<li>dhdfsadjkh</li>
		</ul>
 
 
		<h2>二、代码</h2>
		<h3 class="mark">2.1 内联代码</h3>
		<code>hdfjksa</code>
 
		<h3 class="mark">2.2 用户输入</h3>
		<kbd>的话真的觉得撒谎</kbd>
 
		<h3 class="mark">2.3 基本代码块</h3>
		<pre>
			sdajka
				djsak
					jfdsk
		</pre>
		<h3 class="mark">2.4 程序输出</h3>
			<samp>hfjsd</samp>
 
 
		<h2>三、表格</h2>
		<h3 class="mark">3.1 基本表格</h3>
		<table class="table">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>17</td>
				<td>湘潭</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>女</td>
				<td>17</td>
				<td>娄底</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>女</td>
				<td>18</td>
				<td>郴州</td>
			</tr>
			<tr>
				<td>5</td>
				<td>单八</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
		</table>
 
		<h3 class="mark">3.2 条纹表格</h3>
		<table class="table table-striped">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>17</td>
				<td>湘潭</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>女</td>
				<td>17</td>
				<td>娄底</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>女</td>
				<td>18</td>
				<td>郴州</td>
			</tr>
			<tr>
				<td>5</td>
				<td>单八</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
		</table>
 
		<h3 class="mark">3.3 边框表格</h3>
		<table class="table table-bordered">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>17</td>
				<td>湘潭</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>女</td>
				<td>17</td>
				<td>娄底</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>女</td>
				<td>18</td>
				<td>郴州</td>
			</tr>
			<tr>
				<td>5</td>
				<td>单八</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
		</table>
 
		<h3 class="mark">3.4 鼠标悬停表格</h3>
		<table class="table table-hover">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>17</td>
				<td>湘潭</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>女</td>
				<td>17</td>
				<td>娄底</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>女</td>
				<td>18</td>
				<td>郴州</td>
			</tr>
			<tr>
				<td>5</td>
				<td>单八</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
		</table>
 
		<h3 class="mark">3.5 紧缩表格</h3>
		<table class="table table-condensed">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>17</td>
				<td>湘潭</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>女</td>
				<td>17</td>
				<td>娄底</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>女</td>
				<td>18</td>
				<td>郴州</td>
			</tr>
			<tr>
				<td>5</td>
				<td>单八</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
		</table>
 
		<h3 class="mark">3.6 状态表格</h3>
		<table class="table table-hover">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr class="success">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>17</td>
				<td>湘潭</td>
			</tr>
			<tr class="info">
				<td>2</td>
				<td>李四</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
			<tr class="warning">
				<td>3</td>
				<td>王五</td>
				<td>女</td>
				<td>17</td>
				<td>娄底</td>
			</tr>
			<tr  class="active">
				<td>4</td>
				<td>赵六</td>
				<td>女</td>
				<td>18</td>
				<td>郴州</td>
			</tr>
			<tr class="danger">
				<td>5</td>
				<td>单八</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
		</table>
 
		<h3 class="mark">3.7 响应式表格</h3>
		<table class="table table-hover table-responsive">
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
				<td>地址</td>
			</tr>
			<tr class="success">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>17</td>
				<td>湘潭</td>
			</tr>
			<tr class="info">
				<td>2</td>
				<td>李四</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
			<tr class="warning">
				<td>3</td>
				<td>王五</td>
				<td>女</td>
				<td>17</td>
				<td>娄底</td>
			</tr>
			<tr  class="active">
				<td>4</td>
				<td>赵六</td>
				<td>女</td>
				<td>18</td>
				<td>郴州</td>
			</tr>
			<tr class="danger">
				<td>5</td>
				<td>单八</td>
				<td>男</td>
				<td>18</td>
				<td>岳阳</td>
			</tr>
		</table>
 
		<br />
		<br />
		<br />
		<br />
	</body>
</html>

 

 

 

 

 

zzhaifx
关注
Bootstrap入门（一）
qq_62331938的博客
04-27 2284
前言 大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Bootstrap 学习一门新的技术我们终究都逃不过三个W。What,Why,Where。 1.What——Bootstrap是什么？ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍...
Bootstrap2：排版，代码，表格
weixin_60786293的博客
04-30 479
上期我们讲了Bootstrap有关页面美化的一些简单用法，这期我们继续深入了解他的其他功能 Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式 段落突出：通过.lead类可以让段落突出显示，我们来看演示代码: <div class="container"> <p>卓越人生</p> <p class="lead"..
2.3Bootstrap表格
为者常成，行者常至
05-03 2238
1、基本案例 2、条纹状表格 3、带边框的表格 4、鼠标悬停 5、紧缩表格 6、状态clas
Bootstrap【第二章】全局CSS之排版&代码&表格
明思齐的博客
04-30 1155
前言：今天要学习的是Bootstrap的全局CSS之排版&代码&表格 一张图概括今天的内容： 一、排版 1.1、页面主题 1、段落突出：通过.lead类可以让段落突出显示 例如：<p class="lead">我家门前有两颗枣树</p> 1.2、标题 1.标题h1--h6和html中的效果一样 2.副标题：在<h1><small>副标题</small...
Bootstrap学习笔记（二） table表格&表单
可爱的我可爱的code
08-19 2576
1.表格 标准格式： &lt;table&gt; &lt;caption&gt;...&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;...&lt;/th&gt; &lt;th&gt;...&lt;/th&gt; &lt;/tr&gt;
Bootstrap_02_全局CSS之排版&代码&表格
m0_64848027的博客
05-01 636
一.Bootstrap 排版 1.页面主体 Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式。 段落突出：通过lead类可以让段落突出显示，我们来看演示代码: <div class="container"> <p>卓越人生</p> <p class="lead">从卓京开始</p> <p
Bootstrap_02_全局CSS之排版、代码、表格
m0_60837612的博客
05-03 1052
Bootstrap_02_全局CSS之排版、代码、表格
Bootstrap3.3.6 中文手册-全局CSS样式
04-19
下面将详细介绍Bootstrap 3.3.6中关于全局CSS样式方面的知识点。 首先，Bootstrap的文档类型应该设置为HTML5，这是因为Bootstrap使用了某些只在HTML5中定义的元素和CSS属性。在文档的部分，开发者需要添加viewport...
Bootstrap【第二章】—全局CSS之排版、代码、表格
m0_62019369的博客
04-30 163
1. 排版 1.1. 页面主体 Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式 段落突出：通过.lead类可以让段落突出显示，我们来看演示代码: <div class="container"> <p>卓越人生</p> <p class="lead">从现在开始</p> <p>..
Bootstrap 表格的可选样式
热门推荐
歪脖先生的博客
03-06 1万+
表格的可选样式除了 .table 类之外，Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed，分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥，可以根据需要，为一个表格应用多个类。1、带条纹背景的表格为 &lt;table&gt; 添...
Bootstrap表格
weixin_44543307的博客
06-17 516
Bootstrap表格 开发工具与关键技术：VS Bootstrap 作者：木林森 撰写时间：2019年6月16日 之前我们分享了layui表格，今天我们就来分享另一种表格——Bootstrap表格。 在写编程时我们经常会用到表格，那我们是使用layui表格还是使用Bootstrap表格，这个就需要根据实际的情况进行选择了。 如果你想要设计一个有自己特点的表格，那就建议使用Bootstrap表格...
Bootstrap1-了解Bootstrap
qq_60478234的博客
03-31 1029
1、什么是Bootstrap Bootstrap来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。是一个CSS/HTML框架。http://1、什么是Bootstrap ...
Html乘法
xige1995的博客
10-14 307
【代码】Html乘法。
用html做跨平台应用程序——千丝冥缘应用——跨平台软件开发
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
10-16 404
可视化编辑：提供直观的可视化工具，让设计师能够快速创建和布局页面元素，无需深入了解代码。丰富的组件库：包含各种预定义的组件，如按钮、表单、导航栏等，节省设计时间。响应式设计支持：轻松实现适应不同屏幕尺寸和设备的布局，确保在多种终端上都有良好的用户体验。
如何将 ECharts 图表插入 HTML Canvas
最新发布
exlink2012的专栏
10-17 326
通过这种方法，我们成功地将 ECharts 生成的图表插入到了 HTML Canvas 中的指定位置。这为我们提供了更大的灵活性，允许我们在 Canvas 中组合多种元素，包括 ECharts 图表。在 Canvas 中添加多个 ECharts 图表在图表周围绘制额外的图形或文本将整个 Canvas 导出为图片。
web前端--html 5---qq注册
2301_81851270的博客
10-16 944
<input type="text" name="username" id="username" placeholder="昵称">登录繁体
HTML快速入门--第一节--五个基本标签
PangQinghua的博客
10-13 486
html，图片标签；超链接标签；列表标签；表格标签；表单标签
HTML快速入门--第二节--css选择器
PangQinghua的博客
10-13 460
CSS相关概念，样式表，样式表选择器
Bootstrap3.3.6移动优先的全局CSS样式解析
"Bootstrap3.3.6 中文手册-全局CSS样式" Bootstrap 是一个流行的前端开发框架，用于构建响应式和移动设备优先的网站。在3.3.6这个版本中，它提供了一系列全局的CSS样式，使得基本的HTML元素能够通过特定的class得到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zzhaifx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值