<!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. 部署flask

    部署 当我们执行下面的hello.py时,使用的flask自带的服务器,完成了web服务的启动.在生产环境中,flask自带的服务器,无法满足性能要求,我们这里采用Gunicorn做wsgi容器,来部 ...

  2. （二）Git时间--版本控制工具进阶

    1. 忽略文件 Git 会检查代码仓库的目录下是否存在一个名为 .gitignore的文件,如果存在的话,就去一行行读取这个文件中的内容,并把每一行指定的文件或目录 排除 在版本 控制之外. 注意,. ...

  3. PHP7 学习笔记（九）phpsize动态编译openssl扩展 （微信公众平台）

    先吐槽,微信公众平台授权出问题了,尽然访问不了 一.问题描述: 使用PHP中的库函数file_get_contents时出现Unable to find the wrapper "https ...

  4. Django 2.0.1 官方文档翻译:编写你的第一个djang补丁（page 15）

    编写你的第一个djang补丁(page 15) 介绍 有兴趣为社区做一些贡献?可能你发现了django中的一个你想修复的bug,或者你你想添加一个小小的功能. 回馈django就是解决你遇到的问题的最 ...

  5. div锚点链接跳转

    a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="view ...

  6. mongoDB - 日常操作一

    mongodb 启动方式 # 不启动认证 ./mongod --bind_ip 172.16.2.17 --port --fork --logpath=/opt/mongodb/mongodb.log ...

  7. Anaconda的安装和更新

    下载地址官网:https://www.anaconda.com/distribution/ 一.安装 二.下载安装完成后我们来检验一下是否安装成功 点击“开始” —— “Anaconda3(64-bi ...

  8. Hive配置永久显示表字段名并且不显示表名

    1 配置文件 hive/conf下hive-site.xml /mnt/software/hive-1.1.0-cdh5.7.0/conf 2 添加配置项 <!--不显示表名--> < ...

  9. MHA-Failover(GTID，Auto_Position=0)

    最近一位同学遇到的案例:凌晨数据库意外宕机,要求在一主两从的基础上,搭建MHA做故障切换.在部署测试中遇到一些问题找到我,交流的过程挖出一些之前忽略的坑,感谢这位同学无私分享!• GTID环境,KIL ...

  10. mysql 原理~ 乐观锁和悲观锁

    一 简介:今天咱们来聊聊悲观锁和乐观锁 二 悲观锁  1 定义   在关系数据库管理系统里,悲观并发控制(又名“悲观锁”,Pessimistic Concurrency Control,缩写“PCC” ...