<!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. JMS学习(八)-ActiveMQ Consumer 使用 push 还是 pull 获取消息

    ActiveMQ是一个消息中间件,对于消费者而言有两种方式从消息中间件获取消息: ①Push方式:由消息中间件主动地将消息推送给消费者:②Pull方式:由消费者主动向消息中间件拉取消息.看一段官网对P ...

  2. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  3. luogu P1641 [SCOI2010]生成字符串

    传送门 代码极短 \(O(n^2)\)dp是设\(f_{i,j,k}\)表示前\(i\)位,放了\(j\)个1,后面还可以接着放\(k\)个0的方案,转移的话,如果放0,\(k\)就要减1,反之放了1 ...

  4. mysql 原理 ~ 二阶段提交协议通说

    一 简介: 今天是第二篇,讲解的是mysql的事务日志 二 具体 1 WAL技术(先写日志,再写磁盘) 2 binlog redolog 二阶段提交协议     目的 保持 redo log和binl ...

  5. python - setitem/getitem/delitem类的内置方法

    # class 内置方法: # __setitem__ # __getitem__ # __delitem__ class Test(): X = 100 def __getitem__(self, ...

  6. Mybatis进阶学习笔记——输入映射

    1.输入映射 输入映射支持的类型: 1) 基本的类型,int,String,double 等(*)2) JavaBean 类型(*)3) 包装JavaBean 类型(对象里面包含另一个对象) 1.1基 ...

  7. L-BFGS算法（转载）

    转载链接:http://blog.csdn.net/itplus/article/details/21897715 前面的拟牛顿法.DFP.BFGS.L-BFGS算法简短总结一下就是: 牛顿法不仅使用 ...

  8. freeRTOS中文实用教程3--中断管理之计数信号量

    1.前言 在中断不频繁的系统中,使用二值信号量没有问题,但是中断频繁发生时,则会有中断丢失的问题. 因为中断发生时延迟任务执行,延迟任务执行的过程中,如果又来了两次中断,则只会处理第一次,第二次将会丢 ...

  9. VC++常用数据类型

    原文地址:https://www.cnblogs.com/yincheng01/archive/2008/12/31/2213386.html 一．              VC常用数据类型列表 二 ...

  10. oracle ip 改为 机器名

    1 hosts文件 添加                   ip  机器名   这一行 2 修改listner.ora 和tnsora.ora ip改为机器名 3 重启服务