bootstrap基础学习【排版】（一）
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>bootstrap基础学习（一）</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head> <body style="padding-left:20px;">
<strong> 1、标题</strong>
<div class="h1">Bootstrap标题一</div>
<strong>2 副标题small标签<strong>
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<strong>3 段落P</strong>
<p>我是一个普通的段落</p>
<!--4 强调内容除此之外，Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。-->
<strong>4 强调内容除此之外，Bootstrap还通过元素标签:small、strong、em和cite给文本做突出样式处理。</strong>
<p class="lead">这部分内容需要特别强调，我和别人长得不一样</p>
<p class="small">这部分内容需要特别强调，我和别人长得不一样</p>
<!--5 粗体-->
<strong>5 粗体</strong>
<p>我在学习<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知识。</p>
<!--6 斜体-->
<strong>6 斜体</strong>
<p>我正在学习<i>Bootstrap</i>。我发现<i>Bootstrap</i>真的好强大。</p>
<!--7 强调相关的类-->
<strong>7 强调相关的类</strong>
<div class="text-muted">.text-muted 效果 .text-muted：提示，使用浅灰色（#999）</div>
<div class="text-primary">.text-primary效果 .text-primary：主要，使用蓝色（#428bca）</div>
<div class="text-success">.text-success效果 .text-success：成功，使用浅绿色(#3c763d)</div>
<div class="text-info">.text-info效果 .text-info：通知信息，使用浅蓝色（#31708f）</div>
<div class="text-warning">.text-warning效果 .text-warning：警告，使用黄色（#8a6d3b）</div>
<div class="text-danger">.text-danger效果 .text-danger：危险，使用褐色（#a94442）</div>
<!--8 文本对齐风格-->
<strong>8 文本对齐风格</strong>
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>
<!--9 列表 六种 （普通列表 、有序列表 、去点列表 、内联列表 、描述列表 、水平描述列表）-->
<strong>9 列表 六种 （普通列表 、有序列表 、去点列表 、内联列表 、描述列表 、水平描述列表）</strong>
<h5>普通列表</h5>
<ul>
<li>列表项目</li>
<li>列表项目</li>
</ul>
<h5>有序列表</h5>
<ol>
<li>项目列表一</li>
<li>项目列表二</li>
</ol>
<h5>有序列表嵌套</h5>
<ol>
<li>有序列表</li>
<li>
有序列表
<ol>
<li>有序列表(2)</li>
<li>有序列表(2)</li>
</ol>
</li>
<li>有序列表</li>
</ol>
<!--10 去点列表-->
<strong>10 去点列表</strong>
<ul class="list-unstyled">
<li>不带项目符号</li>
<li>不带项目符号</li>
</ul>
<!--11 内联列表-->
<strong>11 内联列表</strong>
城市：
<ul class="list-inline">
<li>北京</li>
<li>上海</li>
<li>南京</li>
<li>厦门</li>
</ul>
<!--12 定义列表-->
<strong>12 定义列表 Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果</strong>
<dl>
<dt>北京</dt>
<dd>北京是中国的首都，是政治文化集中地</dd>
<dt>上海</dt>
<dd>上海号称东方的巴黎</dd>
</dl>
<!--13 水平定义列表-->
<strong>13 水平定义列表 Bootstrap可以给dl添加类名“.dl-horizontal”给定义列表实现水平显示效果。只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果</strong>
<dl class="dl-horizontal">
<dt>北京</dt>
<dd>北京是中国的首都，是政治文化集中地</dd>
<dt>上海</dt>
<dd>上海号称东方的巴黎</dd>
</dl>
<!--14 代码-->
<strong>14 代码1、code：一般是针对于单个单词或单个句子的代码2、pre：一般是针对于多行代码（也就是成块的代码）3、kbd:一般是表示用户要通过键盘输入的内容</strong>
code风格：
<div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre></code>和<code><kbd></code></div>
pre风格：
<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>
kbd风格：
<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
<strong>15 代码（二）高度超出340px，就会在Y轴出现滚动条</strong>
<pre class="pre-scrollable">
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
</pre>
<strong>16 表格 <br />
☑ .table：基础表格<br />
☑ .table-striped：斑马线表格<br />
☑ .table-bordered：带边框的表格<br />
☑ .table-hover：鼠标悬停高亮的表格 <br />
☑ .table-condensed：紧凑型表格<br />
☑ .table-responsive：响应式表格</strong>
<h1>基础表格</h1>
<table class="table">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
<h1>斑马线表格</h1>
<table class="table table-striped">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
<h1>带边框的表格</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
<h1>鼠标悬浮高亮的表格</h1>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
<h1>紧凑型表格</h1>
<table class="table table-condensed">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
<h1>响应式表格</h1>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
</div> <strong>17 表格行的类 注意要实现悬浮状态，需要在<table>标签上加入table-hover类</strong>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>类名</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>.active</td>
<td>表示当前活动的信息</td>
</tr>
<tr class="success">
<td>.success</td>
<td>表示成功或者正确的行为</td>
</tr>
<tr class="info">
<td>.info</td>
<td>表示中立的信息或行为</td>
</tr>
<tr class="warning">
<td>.warning</td>
<td>表示警告，需要特别注意</td>
</tr>
<tr class="danger">
<td>.danger</td>
<td>表示危险或者可能是错误的行为</td>
</tr>
</tbody>
</table>
</body> </html>
bootstrap基础学习【排版】（一）的更多相关文章
- Bootstrap<基础三> 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...
- bootstrap基础学习【导航条、分页导航】（五）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【网格系统】（三）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【表单含按钮】（二）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【Bootstrap基础学习】00 序
其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQu ...
- bootstrap基础学习小记（二）排版、列表、代码风格、表格
排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...
- 【Bootstrap基础学习】05 Bootstrap学习总结
好吧,Copy了几天,这个总结算是把我对Bootstrap的一些理解写一下吧. Bootstrap只是一套别人写好的前端框架,直接拿来用就好. 不过对于专业的前端而言,如果不去把所有的代码都看一遍来理 ...
随机推荐
- Windows服务启动时候报错1053
用.net 开发了一个C#语言的windows服务,在本地和测试环境,安装启动都正常,在新的线上环境报错,不能启动-报出-错误1053:服务没有及时响应启动或控制请求. 后来发现时线上.NET FRA ...
- 【题解】P3069 [USACO13JAN]牛的阵容Cow Lineup-C++
题目传送门 思路这道题目可以通过尺取法来完成 (我才不管什么必须用队列)什么是尺取法呢?顾名思义,像尺子一样取一段,借用挑战书上面的话说,尺取法通常是对数组保存一对下标,即所选取的区间的左右端点,然后 ...
- 【极大化剪枝】Power Hungry Cows-C++【没有用A*！】【超级简单！】
Description小KITTY想要快速计算整数P的幂 (1 <= P <=10,000),它们需要你的帮助.因为计算极大数的幂,所以它们同一时间仅能使用2个存储器,每个存储器可记录某个 ...
- learning express step(二)
install express-generator C:\Users\admin\WebstormProjects\learning-express-step2>npm install expr ...
- 【概率论】4-1:随机变量的期望(The Expectation of a Random Variable Part I)
title: [概率论]4-1:随机变量的期望(The Expectation of a Random Variable Part I) categories: - Mathematic - Prob ...
- python 获取主机名称和ip地址
python2.7 #!/usr/bin/env python # Python Network Programming Cookbook -- Chapter - # This program is ...
- Ubuntu 14.04 用户操作
新建用户sudo adduser linuxidc 修改hosts文件sudo gedit /etc/hosts ubuntu修改主机名sudo gedit /etc/hostname 删除用户在ro ...
- AGC024E Sequence Growing Hard
题意 给出\(n\),\(m\),\(mu\),问有多少个序列组\((A_0,A_1,\dots,A_n)\)满足: 序列\(Ai\)的长度恰好为\(i\) 所有元素均在\([1,m]\) \(A_{ ...
- redhat7.4安装git(按照官网从源码安装)
按照官方文档建议使用源码安装 1.为什么不用yum安装 yum安装确实简单,只用一行命令就可以了,但是yum安装的版本太低. //安装前使用info查看git版本信息等 yum info git yu ...
- Hadoop环境搭建|第三篇：spark环境搭建
一.环境搭建 1.1.上传spark安装包 创建文件夹用于存放spark安装文件命令:mkdir spark 1.2.解压spark安装包 命令:tar -zxvf spark-2.1.0-bin-h ...