<!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. Dubbo协议

    参考dubbo官方文档http://dubbo.apache.org/zh-cn/docs/user/references/protocol/dubbo.html dubbo共支持如下几种通信协议: ...

  2. 微信接口开发之高级篇系列【微信权限封装类WechatAuth】

    ThinkPHP框架目录结构: <?php /** * Created by PhpStorm. * User: Tinywan * Date: 2016/9/11 * Time: 9:55 * ...

  3. springboot(六)SpringBoot问题汇总

    SpringBoot2.0整合Mybatis,取datetime数据类型字段出来时,发现少了8小时. 过程:mysql中注册时间查询出来结果是正确的,只是java程序运行出来后显示少了8小时.经前辈指 ...

  4. MongoDB 时差问题问题

    在读取的时候,需要再次转换回来,比较麻烦. 其实,Mongo本身就已经提供了相应的处理方法,即在实体类中加个属性即可.具体如下: [BsonDateTimeOptions(Kind = DateTim ...

  5. Javaweb学习笔记——（五）——————DOM&XML目录

    1.表单提交方式 *使用submit提交 <form> <input type="submit" /> </form> *使用button提交表 ...

  6. IDAPython学习（一）

    1.概述 IDAPython在IDA中集成了Python解释器,除了提供了Python功能外,使用这个插件还可以编写实现IDC脚本语言的所有Python脚本. IDAPython显著优势在于,它可以充 ...

  7. Hbase 集群安装（Hadoop 2.6.0 hbase0.99.2）

    一:说明 该安装是在hadoop集群安装后进行,详情可见上一篇博客虚拟机centos7系统下安装hadoop ha和yarn ha(详细) .其中涉及五台机器,两台master(机器名:master, ...

  8. Python之print(args)与sys.stdout.write(string)使用总结

    一.sys.stdout.write(string) import sys; # sys.stdout.write(): # 1.默认不换行 # 2.参数必须是字符串 # demo 01 x = &q ...

  9. 分享一款Markdown的css样式

    使用 本样式在这个样式的基础上做了一些修改, 主要是对于表格和代码块以及一些细节的修改. 主要目的是用在chrome的扩展 Markdown Preview Plus中, 替换其内置的样式. 由于 M ...

  10. Database学习 - mysql 数据库 索引

    索引 索引在mysql 中也叫 '键',是存储引擎用来快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能的影响愈发重要. 索引优化应该是对查询性能优化 ...