Bootstrap2【上手教程】

2022-11-18 20:51:13 浏览数 (1)

目录

一、思维导图

二、排版（代码里面有注解）

三、代码（代码里面有注解）

四、表格（代码里面有注解）

       一、思维导图

带你们了解一下这一章会给你们带来什么？你们会学什么？简不简单学？

二、排版（代码里面有注解）  页面主体：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:水平 里面的jquery文件可以去网上下载，先给你们看效果图，后放代码

代码语言：javascript复制
		<!-- 引用文件 -->
		<!-- 先引用jq库 -->
		<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>Bootstarp:排版、代码、表格</p>
			<p class="lead">Bootstarp:排版、代码、表格</p>
		<h3 class="mark">1.2 标题</h3>
			<h1>卓越人生，<small>从现在开始</small></h1>
			<p class="h1">卓越人生，从现在开始</p>
			<p class="h2">卓越人生，从现在开始</p>
			<p class="h3">卓越人生，从现在开始</p>
			<p class="h4">卓越人生，从现在开始</p>
			<p class="h5">卓越人生，从现在开始</p>
			<p class="h6">卓越人生，从现在开始</p>
		<h3 class="mark">1.3 内联文本元素</h3>
			<!-- 标记： -->
			I <span class="mark"> like </span> you 很久了
			<!-- 删除： -->
			<del>I like </del> 或者<s>I like</s>
			<!-- 下划线： -->
			<ins>I like </ins> 或者<u>I like</u>
			<p><small>you like</small></p>
			<strong><p>you like</strong></p>
			<h1><p><em>you like</em></p></h1>
		<h3 class="mark">1.4 对齐</h3>
			<!-- 居左： -->
			<p class="text-left">卓越人生，从现在开始</p>
			<!-- 居中： -->
			<p class="text-center">卓越人生，从现在开始</p>
			<!-- 居右 -->：
			<p class="text-right">卓越人生，从现在开始</p>
		<h3 class="mark">1.5 改变大小写</h3>
			<!-- 1、大写：class=”text-uppercase” -->
			<span class="text-uppercase">i like you</span><hr />
			<!-- 2、小写：class=”text-lowercase” -->
			<span class="text-lowercase">I like you</span><hr />
			<!-- 3、首字母大写：class=”text-capitalize” -->
			<span class="text-capitalize">i like you</span><hr />
		<h3 class="mark">1.6 略缩语</h3>
			<!-- 1、基本缩略语：<abbr title=”完整内容”> -->
			<abbr title="超文本标记语言">HTML</abbr>是一门超简单的网页语言<br>
			<!-- 2、首字母缩略语：<abbr title=”完整内容” class=”initialism”> -->
			<abbr title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语
		<h3 class="mark">1.7 地址</h3>
			<address>家庭地址：浪琴湾</address>
		    <address>公司地址：梅溪湖></address>
		<h3 class="mark">1.8 引用</h3>
			<!-- 1、默认样式的引用：<blockquote>   <footer> -->
			<blockquote>阳光总在风雨后<footer>丹</footer></blockquote>
			<!-- 2、右对齐样式引用：<blockquote class=”blockquote-reverse”> -->
			<blockquote class="blockquote-reverse">阳光总在风雨后<footer><cite>丹</cite></footer></blockquote>
		<h3 class="mark">1.9 列表</h3>
			<!-- 1、有序列表：<ol><li> 同HTML
				 2、无序列表：<ul><li> 同HTML
				 3、无样式列表：<ul class=”list-unstyled”>,去掉li前面的点 -->
			<ul class="list-unstyled">
			<li>花间一壶酒</li>
			<li>独酌无相亲</li>
			<li>举杯邀明月</li>
			<li>对影成三人</li></ul>

三、代码（代码里面有注解）

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

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

基本代码块：多行代码可以使用<pre>标签，设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>

代码语言：javascript复制
<h2>二、代码</h2>
		<h3 class="mark">2.1 内联代码</h3>
			<!-- 4、内联列表：<ul class=”list-inline”>，li显示在一行 -->
			<ul class="list-inline">
			<li>月既不解饮</li>
			<li>影徒随我身</li>
			<li>暂伴月将影</li>
			<li>行乐须及春</li</ul>
			<!-- 5、<dl class=”dl-horizontal”>。 horizontal:水平 -->
			<dl class="dl-horizontal">
				<dt>首页</dt>
					<dd>这是首页的信息</dd>
				<dt>卓京品牌</dt>
					<dd>卓越人生，从现在开始</dd>
			</dl>
			<!-- 2.1.通过<code>标签包裹内联样式的代码片段 -->
			<code>举杯邀明月，</code>对影成三人。
		<h3 class="mark">2.2 用户输入</h3>
			<!-- 2.2.通过<kbd>标签标记用户通过键盘输入的内容 -->
			<kbd>Ctrl C</kbd>
		<h3 class="mark">2.3 基本代码块</h3>
			<!-- 2.3.多行代码可以使用<pre>标签 -->
			<pre>
				花间一壶酒，独酌无相亲 
				举杯邀明月，
				对影成三人
			</pre>
		<h3 class="mark">2.4 程序输出</h3>
			<!-- <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”:鼠标悬停在行或者单元格上时设置的颜色     .class=”success”:表示成功或积极的动作     Class=”info”:表示普通的提示信息或动作     Class=”warning”:表示警告或需要用户注意     Class=”danger”:表示危险或潜在的带来负面影响的动作

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

代码语言：javascript复制
<h2>三、表格</h2>
		<h3 class="mark">3.1 基本表格</h3>
			<!-- 3.1.<table class=”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>
		<h3 class="mark">3.2 条纹表格</h3>
			<!-- 3.2.<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>
		<h3 class="mark">3.3 边框表格</h3>
			<!-- 3.3.<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>
		<h3 class="mark">3.4 鼠标悬停表格</h3>
			<!-- 3.4.<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>
		<h3 class="mark">3.5 紧缩表格</h3>
			<!-- 3.5.<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>
		<h3 class="mark">3.6 状态表格</h3>
			<tr class="active">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>18</td>
			</tr>
			<tr class="success">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>18</td>
			</tr>
			<tr class="info">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>18</td>
			</tr>
			<tr class="warning">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>18</td>
			</tr>
			<tr class="danger">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>18</td>
			</tr>
		<h3 class="mark">3.7 响应式表格</h3>
			<tr class="table table-responsive">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>18</td>
			</tr>
		<br />

今天分享到这里啦，能学多少算多少，不积硅步，无以至千里！加油，IT人。

class list table text title

0 人点赞