bootstrap之排版样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>排版样式</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head> <body style="margin:50px;">
<!-- 1.页面主体 -->
<p>Bootstrap框架</p>
<p>Bootstrap框架</p>
<!-- lead:创建包含段落突出文本 -->
<p class="lead">Bootstrap框架</p>
<p>Bootstrap框架</p> <!-- 2.标题 -->
<!-- small元素作为副标题 -->
<h1>Bootstrap框架<small>小标题</small></h1>
<h2>Bootstrap框架<small>小标题</small></h2>
<h3>Bootstrap框架<small>小标题</small></h3>
<h4>Bootstrap框架<small>小标题</small></h4>
<h5>Bootstrap框架<small>小标题</small></h5>
<h6>Bootstrap框架<small>小标题</small></h6>
<!-- 内联元素使用标题字体 -->
<span class="h1">Bootstrap框架</span> <!-- 3.内联文本元素 -->
<!-- mark:添加标记 -->
<p>Bootstrap框架</p>
<p><mark>Bootstrap框架</mark></p>
<p class="mark">Bootstrap框架</p> <!-- 各种加线条的文本 -->
<!--
del:删除的文本
s:无用的文本
ins:插入的文本
u:下划线文本
-->
<del>删除的文本</del>
<s>无用的文本</s>
<ins>插入的文本</ins>
<u>下划线文本</u> <!-- 各种强调的文本 -->
<!--
small:标准字号的85%
strong:加粗700
em:倾斜
-->
<small>标准字号的85%</small>
<strong>加粗700</strong>
<em>倾斜</em> <!-- 4.设置文本对齐 -->
<!--
text-left:居左
text-center:居中
text-right:居右
text-justify:两端对齐
text-nowrap:不换行
-->
<p class="text-left">居左</p>
<p class="text-center">居中</p>
<p class="text-right">居右</p>
<p class="text-justify">两端对齐</p>
<p class="text-nowrap">不换行</p> <!-- 5.设置英文文本大小写 -->
<!--
text-lowercase:小写
text-uppercase:大写
text-capitalize:首字母大写
-->
<p class="text-lowercase">Bootstrap小写</p>
<p class="text-uppercase">Bootstrap:大写</p>
<p class="text-capitalize">bootstrap:首字母大写</p> <!-- 6.缩略语 -->
<!-- <abbr title="Bootstrap" class="initialism"></abbr> -->
<h1>Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr></h1> <!-- 7.地址文本 -->
<address>
<strong>Twitter</strong><br>
795 Folsom<br>
<abbr title="Phone">P:</abbr>(+86)12345678901
</address> <!-- 8.引用文本 -->
<blockquote>Bootstrap框架</blockquote>
<!-- 反向 -->
<blockquote class="blockquote-reverse">
Bootstrap框架
</blockquote> <!-- 9.列表排版 -->
<!-- list-unstyled:移除默认样式 -->
<ul class="list-unstyled">
<li>bootstrap</li>
<li>bootstrap</li>
<li>bootstrap</li>
<li>bootstrap</li>
<li>bootstrap</li>
</ul>
<!-- list-inline:设置成内联样式 -->
<ul class="list-inline">
<li>bootstrap</li>
<li>bootstrap</li>
<li>bootstrap</li>
<li>bootstrap</li>
<li>bootstrap</li>
</ul> <!-- dl-horizontal:水平排列描述列表 -->
<dl>
<dt>默认</dt>
<dd>Bootstrap框架提供常规方法</dd>
</dl>
<dl class="dl-horizontal">
<dt>dl-horizontal</dt>
<dd>Bootstrap框架提供常规方法</dd>
</dl> <!-- 10.代码 -->
<section><br>
<!-- 内联代码 -->
<code><section></code><br>
<!-- 用户输入 -->
press <kbd>ctrl + ,</kbd><br>
<!-- 代码块 -->
<pre><p>;Please input…</p></pre><br> <!-- 标记变量 -->
<var>Bootstrap标记</var><br> <!-- 程序输出 -->
<samp>程序输出</samp> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
bootstrap之排版样式的更多相关文章
- Bootstrap 一. 排版样式(内联文本元素,对齐,大小写,缩略语,地址文本,引用文本,列表排版 ,代码 )
第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...
- Bootstrap(2) 排版样式
1.页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 1 ...
- Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素
Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...
- 第二百三十二节,Bootstrap排版样式
Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一.页面排版 Boot ...
- bootstrap课程3 bootstrap中常用的排版样式有哪些
bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...
- [bootstrap] 基本css样式和组件
一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...
- bootstrap之css样式
一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- bootstrap之排版类
bootstrap之排版类
随机推荐
- java了解哪些锁
问题: 1.Java里的锁了解哪些? 说了Lock和synchronized 它们的使用方式和实现原理有什么区别呢?使用的话,synchronize用于方法和代码块,可以锁对象和类以及方法,Lock ...
- 20155302 2016-2017-2 《Java程序设计》第九周学习总结
20155302 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 基本数据库操作相关的JDBC接口或类是位于java.sql包中.在程序中要取得数据库联机,我 ...
- 【通信】URLConnection 详细
通信链接.程序可以通过URLConnection实例向该URL发送请求.读取URL引用的资源. 通常创建一个和 URL的连接,并发送请求.读取此URL引用的资源需要如下几个步骤: 通过调用URL对象o ...
- 2017-2018-2 20155303『网络对抗技术』Exp9:Web安全基础
2017-2018-2 『网络对抗技术』Exp9:Web安全基础 --------CONTENTS-------- 一.基础问题回答 1.SQL注入攻击原理,如何防御? 2.XSS攻击的原理,如何防御 ...
- Linux组管理和权限管理
⒈Linux组基本介绍 1)在Linux中的每个用户必须属于一个组,不能独立于组外. 2)Linux中每个文件都有所有者.所在组.其它组的概念 ①所有者 一般(默认)为文件的创建者,谁创建了该文件,就 ...
- ASP.NET MVC + EF 更新的几种方式(超赞)
1.常用 db.Entry(实体).State = EntityState.Modified;db.SaveChanges(); 2.指定更新 db.Configuration.ValidateOnS ...
- DBSCAN密度聚类
1. 密度聚类概念 DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种很典型的密 ...
- php数据库的增删改查
1.查询: 数据的显示,这里就可以嵌入php来进行数据的输出 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...
- centos6.5/centos7安装部署企业内部知识管理社区系统wecenter
企业内部知识系统wecenter社区系统安装及部署 centos 6.5环境安装 因为是公司内部使用在线人数不会太多,使用yum安装lamp环境即可 1.安装lamp基本环境 yum -y insta ...
- 关于windows2008r2系统80端口被system进程占用的问题
80端口被system占用的问题 今天启动tomcat的时候发现无法启动80端口被占用 通过netstat -ano查看,发现被pid=4的进程占用 检查进程发现是system进程pid=4给占用 ...