Bootstrap学习笔记（二）

来源：互联网发布：macbook下载软件免费编辑：程序博客网时间：2024/05/24 01:39

排版

标题

标题分为<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>

这里写图片描述

阅读全文

0 0