<!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.代码 -->

    &lt;section&gt;<br>

    <!-- 内联代码 -->

    <code>&lt;section&gt;</code><br>

    <!-- 用户输入 -->

    press <kbd>ctrl + ,</kbd><br>

    <!-- 代码块 -->

    <pre>&lt;p&gt;;Please input…&lt;/p&gt;</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之排版样式的更多相关文章

  1. Bootstrap 一. 排版样式（内联文本元素，对齐，大小写，缩略语，地址文本，引用文本，列表排版 ，代码 ）

    第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...

  2. Bootstrap(2) 排版样式

    1.页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 1 ...

  3. Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

    Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...

  4. 第二百三十二节，Bootstrap排版样式

    Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一．页面排版 Boot ...

  5. bootstrap课程3 bootstrap中常用的排版样式有哪些

    bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...

  6. [bootstrap] 基本css样式和组件

    一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...

  7. bootstrap之css样式

    一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...

  8. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  9. bootstrap之排版类

    bootstrap之排版类

随机推荐

  1. java了解哪些锁

    问题: 1.Java里的锁了解哪些? 说了Lock和synchronized  它们的使用方式和实现原理有什么区别呢?使用的话,synchronize用于方法和代码块,可以锁对象和类以及方法,Lock ...

  2. 20155302 2016-2017-2 《Java程序设计》第九周学习总结

    20155302 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 基本数据库操作相关的JDBC接口或类是位于java.sql包中.在程序中要取得数据库联机,我 ...

  3. 【通信】URLConnection 详细

    通信链接.程序可以通过URLConnection实例向该URL发送请求.读取URL引用的资源. 通常创建一个和 URL的连接,并发送请求.读取此URL引用的资源需要如下几个步骤: 通过调用URL对象o ...

  4. 2017-2018-2 20155303『网络对抗技术』Exp9：Web安全基础

    2017-2018-2 『网络对抗技术』Exp9:Web安全基础 --------CONTENTS-------- 一.基础问题回答 1.SQL注入攻击原理,如何防御? 2.XSS攻击的原理,如何防御 ...

  5. Linux组管理和权限管理

    ⒈Linux组基本介绍 1)在Linux中的每个用户必须属于一个组,不能独立于组外. 2)Linux中每个文件都有所有者.所在组.其它组的概念 ①所有者 一般(默认)为文件的创建者,谁创建了该文件,就 ...

  6. ASP.NET MVC + EF 更新的几种方式（超赞）

    1.常用 db.Entry(实体).State = EntityState.Modified;db.SaveChanges(); 2.指定更新 db.Configuration.ValidateOnS ...

  7. DBSCAN密度聚类

    1. 密度聚类概念 DBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种很典型的密 ...

  8. 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 ...

  9. centos6.5/centos7安装部署企业内部知识管理社区系统wecenter

    企业内部知识系统wecenter社区系统安装及部署 centos 6.5环境安装 因为是公司内部使用在线人数不会太多,使用yum安装lamp环境即可 1.安装lamp基本环境 yum -y insta ...

  10. 关于windows2008r2系统80端口被system进程占用的问题

    80端口被system占用的问题   今天启动tomcat的时候发现无法启动80端口被占用 通过netstat -ano查看,发现被pid=4的进程占用 检查进程发现是system进程pid=4给占用 ...