<!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. 多目标遗传算法 ------ NSGA-II （部分源码解析）二元锦标赛选择 tourselect.c

    tourselect.c  文件中共有两个函数: selection (population *old_pop, population *new_pop) individual* tournament ...

  2. JavaScript中的栈和堆内存，作用域

    1.栈 stack”和“堆 heap”            简单的来讲,stack上分配的内存系统自动释放,heap上分配的内存,系统不释放,哪怕程序退出,那一块内存还是在那里.stack一般是静态 ...

  3. python学习笔记8--面向对象--属性和方法详解

    属性: 公有属性  (属于类,每个类一份) 普通属性  (属于对象,每个对象一份) 私有属性    (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法:(按作用) 构造方法 析构函数 方法: ...

  4. 用贪心算法近似求解 Loading Balance 问题(作业调度的负载均衡)

    一,Loading Balance 问题描述:有 m 台相同的机器及 n 个作业,其中 m={M(1),M(2),……M(m)}.n = {J(1),J(2),……J(n)}.每个作业都有一个处理时间 ...

  5. json 不能 dumps datetime 解决办法

    backend.myviews.json_time.py from datetime import date import json from datetime import datetime cla ...

  6. asp.net mvc Htmlhelper简单扩展

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. 文本编辑框QTextEdit

    QTextEdit类是一个多行文本框控件,可以显示多行文本内容,当文本内容超出控件显示范围时,可以显示水平个垂直滚动条,Qtextedit不仅可以用来显示文本还可以用来显示HTML文档 import ...

  8. MacOs -bash: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory

    1解决iterm远程登录主机报错 -bash: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or ...

  9. F - Set of Strings

    You are given a string q. A sequence of k strings s1, s2, ..., sk is called beautiful, if the concat ...

  10. JavaScript练习 - 正反选练习

    正反选练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...