BootStrap学习笔记-3

最新推荐文章于 2025-03-04 08:01:21 发布

原创最新推荐文章于 2025-03-04 08:01:21 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

BootStrap 专栏收录该内容

7 篇文章

订阅专栏

本文通过实例展示了如何使用 Bootstrap 框架中的 CSS 特性来美化网页元素，包括代码块、变量展示、表格样式等内容。

threeLesson - bootstrap BootStrap CSS -code显示与表格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>BootStrap-CSS</title>
	<meta charset = "utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
</head>
<body>

<div class="container">
	<!-- CSS 代码 -->
	<!-- code 用于个人代码字段标签 <左括号 >右括号-->
		For example <code><section></code>
		<!-- kbd代表用户输入 -->
		我希望现在能键入<kbd>cmd</kbd>命令
		<pre>Sample text here....;</pre>
		x=y+z;<br>
		<!-- 变量等式 -->
		<var>x</var>=<var>y</var>+<var>z</var>;
		<!-- 程序输出 虽然没有什么特殊样式，但是一般用samp标签做程序输出标记-->
		<samp>hello world</samp>
		<hr>
		<!-- CSS 表格 
		class="table-responsive"响应式表格，当表格显示不完全的时候会产生滚动条用于滚动显示table
			class=table 基本表格样式
			table-striped 斑马线样式表格
			table-bordered 1dpx的边框效果
			table-hover 鼠标经过每一行时产生悬停效果
			table-condensed 紧凑型表格样式-->
		<div class="table-responsive">
			<table class="table table-bordered">
			<!-- thead 表格标题有稍微的加粗 
				tr表示table的row
				th表示标题栏里的单元格
				td表示元素栏的单元格
				class=active 设置为灰色选中
				class=success 设置为成功绿色
				class=info 设置为信息蓝色
				class=warning 设置为警告黄色
				class=danger 设置为危险红色-->
				<thead>
					<tr class="active">
						<th>表格标题</th>
						<th>表格标题</th>
						<th>表格标题</th>
					</tr>
				</thead>
				<tbody>
					<tr class="success">
						<td>表格单元格表格单元格表格单元格</td>
						<td>表格单元格表格单元格</td>
						<td>表格单元格表格单元格表格单元格</td>
					</tr>
					<tr class="info">
						<td>表格单元格表格单元格</td>
						<td>表格单元格表格单元格</td>
						<td>表格单元格表格单元格</td>
					</tr>
					<tr class="warning">
						<td>表格单元格表格单元格</td>
						<td>表格单元格表格单元格</td>
						<td>表格单元格表格单元格</td>
					</tr>	
					<tr class="danger">
						<td>表格单元格</td>
						<td>表格单元格</td>
						<td>表格单元格</td>
					</tr>	
					<tr>
						<td>表格单元格</td>
						<td>表格单元格</td>
						<td>表格单元格</td>
					</tr>	
				</tbody>
			</table>
		</div>
		
</div>

</body>
</html>