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只是一套别人写好的前端框架,直接拿来用就好. 不过对于专业的前端而言,如果不去把所有的代码都看一遍来理 ...
随机推荐
- SQL分表
一.为什么要水平分表?简而言之,当单表数据量过大时,无法对其进行有效的维护,以及查询速度严重变慢时,我们就需要对其时行水平分表. 二.什么时候需要水平分表?在数据库结构的设计中,需要充分考虑后期数据的 ...
- Python3之使用Crypto
pip3 install pycryptodome 快速方式:pip3 install -i https://pypi.douban.com/simple pycryptodome PyCrypto ...
- MySQL 8.0.15 配置 MGR单主多从
转载自:http://www.cnblogs.com/zhangzihong/p/10443526.html 一.简介 MySQL Group Replication(简称MGR)字面意思是mysql ...
- Gradle 如何配置将编译的 JAR 发布到 Archiva 中
有时候我们希望将我们的jar 开发包发布到 Archiva 中. 如何配置 Gradle 的编译脚本呢? 首先你需要启用 Gradle 的 Maven-publish 插件. plugins { id ...
- [Luogu] 开关
https://www.luogu.org/problemnew/show/P3870 线段树区间翻转 + 区间查询 #include <iostream> #include <cs ...
- Win10配置Java环境变量
很多同学在学习Java入门的时候被Java环境变量搞的一头雾水,今天这篇文章拓薪教育就来说一下如何在win10下配置环境变量; 下载jdk安装包: 首先我们需要下载jdk的安装包,这里提供jdk的安装 ...
- CPU中断的机制概论
cpu的数学模型是图灵机,图灵机是一个线性运行指令的机器,它的执行序列是完全确定的,中断机制是使得cpu具有异步处理能力的机制,就是先暂停他的序列 来执行一些其他指令.具体来说就是,从硬件实现上,其 ...
- luogu2331
P2331 [SCOI2005]最大子矩阵 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入格式 第一行为n,m,k ...
- 二十八、CentOS系统光盘安装、anaconda概述
常见问题你会感觉 tftp timeout: 防火墙 time out script: 网关没有指定,在dhcpd.conf中 不能下载:vmlinuz和initrd程序和安装的系统版本不一致 内存必 ...
- 基于 intellij IDEA 快速搭建Spring Boot项目
在<一步步搭建 Spring Boot maven 框架的工程>一文中,已经介绍了如何使用Eclipse快速搭建Spring Boot项目.由于最近将开发工具由Eclipse ...