Bootstrap学习笔记（二）

最新推荐文章于 2019-09-29 18:20:57 发布

Noocl

最新推荐文章于 2019-09-29 18:20:57 发布

阅读量486

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/Noocl/article/details/78535975

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

排版

标题

标题分为<h1><h2><h3><h4><h5><h6>，对应的字体如下表所示。

标题	h1	h2	h3	h4	h5	h6
字体	36px	30px	24px	18px	14px	12px

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
    <title>排版</title>
</head>
<body>
    <div style="height: 30px"></div>
    <div class="container" style="background: #eee" >
        <h1 class="h1">标题：title</h1>    
        <h2 class="h2">标题：title</h2>
        <h3 class="h3">标题：title</h3>
        <h4 class="h4">标题：title</h4>
        <h5 class="h5">标题：title</h5>
        <h6 class="h6">标题：title</h6>
    </div>
</body>
</html>

这里写图片描述
在h系统的标题里面还可以内嵌两个标题标签，分别是大标题<big>，小标题<small>，示例如下

<div class="container" style="background: #eee" >
    <h1 class="h1">标题：title<small>小标题：small</small><big>大标题：big</big></h1>  
    <h2 class="h2">标题：title<small>小标题：small</small><big>大标题：big</big></h2>
    <h3 class="h3">标题：title<small>小标题：small</small><big>大标题：big</big></h3>
    <h4 class="h4">标题：title<small>小标题：small</small><big>大标题：big</big></h4>
    <h5 class="h5">标题：title<small>小标题：small</small><big>大标题：big</big></h5>
    <h6 class="h6">标题：title<small>小标题：small</small><big>大标题：big</big></h6>
</div>

这里写图片描述

页面主体

Bootstrap的全局font-size是14px，相当于h5字号的大小，ine-height是1.428。
在<p>标签内部加lead属性会使段落的字体变大加粗，效果更明显。
示例如下

<div class="container" style="background: #eee">
    <p >
        Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    </p>
    <p class="lead">
        Nullam id dolor id nibh ultricies vehicula.
    </p>
</div>

这里写图片描述

内联文本元素

	删除线	下划线	斜体	加粗	标记	小号文本	大号文本
bootstrap	<s>	<ins>	<em>	<strong>	<mark>	<small>	<big>
html	<del>	<u>	<i>	<b>

<div class="container" style="background: #eee">
    <div>
        &lt;mark&gt;<mark>标记 </mark>文本 <br/>
        &lt;del&gt;<del>删除线 </del> <br/>
        &lt;s&gt;<s>删除线 </s> <br/>
        &lt;ins&gt;<ins>下划线 </ins> <br/>
        &lt;u&gt;<u>下划线 </u> <br/>
        &lt;em&gt;<em>斜体 </em> <br/>
        &lt;i&gt;<i>斜体 </i> <br/>
        &lt;b&gt;<b>加粗 </b> <br/>
        &lt;strong&gt;<strong>加粗 </strong> <br/>
        &lt;small&gt;<small>小号文本small</small> <br/>
        &lt;big&gt;<big>大号文本big</big>
    </div>
</div>

这里写图片描述

Noocl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记（二）

排版标题标题分为<h1><h2><h3><h4><h5><h6>，对应的字体如下表所示。标题 h1 h2 h3 h4 h5 h6 字体 36px 30px 24px 18px 14px 12px<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="vi
复制链接

扫一扫