Bootstrap笔记

最新推荐文章于 2024-05-09 23:49:47 发布

Vermouth-1

最新推荐文章于 2024-05-09 23:49:47 发布

阅读量960

点赞数 16

分类专栏：常用笔记文章标签： bootstrap 笔记 javascript

本文链接：https://blog.csdn.net/qq_45601874/article/details/136788793

版权

常用笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Bootstarp笔记

前言

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

1. 下载并在页面引入

在官网下载3.0版本并引入到html文件中

示例

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  </head>
  <body>
      
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" ></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>
  </body>
</html>

2. 布局容器类

.container 类用于固定宽度并支持响应式布局的容器, 占据页面的中间部分，无高度
```
<div class="container">
  ...  
</div>
```
.container-fluid 类用于 100% 宽度 ( 流式布局使用 )，占据全部视口（viewport）的容器，无高度
```
<div class="container-fluid">
  ...
</div>
```

3. 删格系统

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
“行 .row”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
“行 .row” 内应该直接包含.col
如果一“行（row）”中包含了的“列（column）”大于 12，多余的列将被另起一行排列。
移除列的内边距 .row-no-gutters 默认左右都有15px
**列偏移 .col-md-offset-4 ** 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度
**列嵌套 ** 就是在.col 里面嵌套一个行 .row 行里面又有列
列排序 col-md-push-3
表格参照

各项	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列宽	自动	~62px	~81px	~97px
槽宽	30px （每列左右均有 15px）

4. 文本排版

通过添加 .lead 类可以让段落突出显示。 <p class="lead">...</p>
有淡黄色背景的文本标签 <mark>highlight</mark>
有删除线的文本标签 <del>This text.</del>
有下划线的标签 <ins>This document.</ins>
小号文字文本类 .small 和标签<small></small>
加粗文本 <strong>rendered as bold text</strong>
斜体 <em>rendered as italicized text</em>
文本对齐类 .text-left .text-center .text-right 左右和居中对齐类
改变大小写类 .text-lowercase .text-uppercase
当鼠标悬浮时出现标题文字的文本标签 <abbr title="attribute">attr</abbr>
博客文本标签 <blockquote> , 添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

为博客文本标签添加类.blockquote-reverse 文字向右对齐

<blockquote> 
    <p> text </p> 
    <footer>
        Someone famous in 
        <cite title="Source Title">Source Title</cite>
    </footer>
</blockquote>

无样式列表类<ul class="list-unstyled"> </ul
所有 li 都在一行的类 <ul class="list-inline"> <li>...</li> </ul>
水平排列类 <dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
自动截断类 .text-overflow
代码片段标签 <code><section></code>
黑色背景的文本标签，类似键盘按键 <kbd> ctrl </kbd>
代码块文本标签 <pre><p>Sample text here...</p></pre>

5. 表格

基本的表格样式类 .table
条纹状表格样式类 .table-striped 需要先使用基本样式类
带边框的表格样式类 .table-bordered 需要先使用基本样式类
鼠标悬浮时出现背景的样式类 .table-hover 需要先使用基本样式类
紧凑表格样式类 .table-condensed 需要先使用基本样式类

可以在行 tr 或列 td 标签中使用的类，修改单元格的背景色

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作绿色
`.info`	标识普通的提示信息或动作蓝色
`.warning`	标识警告或需要用户注意黄色
`.danger`	标识危险或潜在的带来负面影响的动作红色

创建响应式表格的类 <div class="table-responsive"> <table class="table"> </table> </div>

6. 表单

form标签中将每一个输入框使用** .form-group** 类将 **.form-control**包起来，还可以设置它的尺寸 .form-group-lg
被支持的控件 ： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。只有正确设置了 type 属性的输入控件才能被赋予正确的样式。

建议将输入框组嵌套到表单组中使用

<form>
  <div class="form-group">
    <label>Email address </label>
    <input type="email" class="form-control" placeholder="Email"/>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

内联表单： 为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。让表单里的所有元素都变成行内元素
输出框组类 input-group 让所有的元素组合成一个输入框 搜索框可用

在里面还可以使用类 .input-group-addon 给标签设置一个有背景色的样式

如： <span class="input-group-addon">@</span>

水平排列的表单类： 为form标签添加类.form-horizontal 使 .form-group类变为 .row

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

文本域输入框 支持多行文本的表单控件。可根据需要改变 rows 属性 <textarea class="form-control" rows="3"></textarea>
多选框类 .checkbox 需要在选择框中套一个 div 如果还添加一个类 .disabled 表示所有多选框都不可选
单选框类 .radio 需要在选择框中套一个 div 如果还添加一个类 .disabled 表示所有单选框都不可选

内联单选和多选框 通过将 .checkbox-inline 或 .radio-inline 类 将它们排列在一行

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

静态框类 .form-control-static <p class="form-control-static">email@example.com</p>
form标签中使用标签 <fieldset disabled> ... </fieldset> 包住所有输入框表示 禁用所有输入框
给输入框添加属性 readonly 表示只读
在form-group类的同一个标签上使用 .has-warning .has-error .has-success可以改变输入框的颜色样式

为输入框里面添加图标 在输入框组标签中使用类 .has-feedback

隐藏的提示文本写在 .sr-only 类中

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
    <!-- 图标 -->
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>

设置输入框的尺寸 .input-lg .input-sm 示例：<input class="form-control input-lg" type="text" placeholder=".input-lg">

设置输入框的宽度

<div class="form-horizontal">
    <div class="form-group">
      <div class="col-xs-6">
        <input type="text" class="form-control" placeholder=".col-xs-2">
      </div>
      <div class="col-xs-6">
        <input type="text" class="form-control" placeholder=".col-xs-3">
      </div>
    </div>
</div>

7. 按钮

可作为按钮使用的标签有 <a>、<button> 或 <input> ，给他们添加按钮类 .btn
默认样式的按钮 <a class="btn btn-default" href="#" role="button">Link</a>
注意事项：
- 导航和导航条组件只支持 <button> 元素。
- 不要使用 a 标签 触发事件，如果非要使用需要加上属性 role=“button”
按钮的各种样式类
- .btn-primary 深蓝色
- .btn-success 绿色
- .btn-info 蓝色
- .btn-warning 黄色
- .btn-danger 红色
- .btn-link 链接形式的按钮
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
.btn-block 类可以将其拉伸至父元素100%的宽度
为 <button> 元素添加 disabled 属性，使其表现出禁用状态 , a 标签按钮则使用类 .disabled

8. 图片

通过为图片添加 .img-responsive 类可以让图片支持响应式布局
使用 .center-block 类 让图片水平居中
图片形状
- 圆角图片 <img src="..." alt="..." class="img-rounded">
- 圆形图片 <img src="..." alt="..." class="img-circle">
- 带边框的图片 <img src="..." alt="..." class="img-thumbnail">

9.辅助类

文本颜色类

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

背景颜色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

倒三角符号
```
<span class="caret"></span>
```

快速浮动 !important 被用来明确 CSS 样式的优先级

<style>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}
</style>

<div class="pull-left">...</div>
<div class="pull-right">...</div>

让内容块居中

<style>
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}
</style>

<div class="center-block">...</div>

10. 图标的使用

赋值对应图表的类放到span标签中，设置属性 aria-hidden=“true” 即可
```
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
```

11. 下拉菜单

给div 添加下拉菜单类 .dropdown
给显示的标签添加属性和样式

给隐藏的标签添加关联的属性和样式

<div class="dropdown">
    <!-- 设置显示的类 .dropdown-toggle 和绑定的属性 data-toggle="dropdown" -->
    <a class="dropdown-toggle"  data-toggle="dropdown">
        Dropdown
        <!-- 倒三角符号 -->
        <span class="caret"></span>
    </a>
    <!-- 设置隐藏标签的类 .dropdown-menu -->
    <p class="dropdown-menu">
        text
    </p>
</div>

上拉菜单类 .dropup 用法和下拉菜单一样
在隐藏菜单标签里面使用 .dropdown-header 可以把选项设置为标题
在隐藏菜单标签的选项添加属性 role=“separator” 可以添加分割线

12. 按钮组

把所有按钮放到一个 div中，给这个div添加按钮组类 .btn-group 可以把所有按钮紧密组合到一起, 按钮组类可以代替下拉菜单类 .dropdown

类似分页组件类 .btn-toolbar 里面放多个按钮组组成类似分页效果

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

嵌套: 想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中

垂直排列的按钮组类 .btn-group-vertical

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">Button</button>
    <button type="button" class="btn btn-default">Button</button>
</div>

占满整个父级宽度的按钮组

<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default" role="button">Left</a>
    <a href="#" class="btn btn-default" role="button">Middle</a>
    <a href="#" class="btn btn-default" role="button">Right</a>
</div>

13. 输入框组

输入框组类 .input-group
在输入框前后添加内容的类 .input-group-addon

在输入框前后添加按钮内容的类 .input-group-btn 可以把它当成按钮组使用

<div class="input-group">
  <!-- 在输入框前面添加内容 -->
  <span class="input-group-addon" >@</span>
  <input type="text" class="form-control">
  <!-- 在输入框后面添加按钮 -->
  <span class="input-group-btn" > 
      <button class="btn btn-success"> go</button> 
  </span>
</div>

14. 选项卡

使用 .nav .nav-tabs 类给 ul 添加上可以生成一个tab选项卡，宽度占满父级宽度

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

使用 .nav .nav-pills 类给 ul 添加上可以生成一个胶囊式选项卡，宽度占满父级宽度，额外添加**.nav-stacked** 类可以使选项垂直排列
额外添加 .nav-justified 类可以使选项均匀占满整个父级宽度

15. 导航条

导航条的默认高度是 50px。
给 nav 标签添加导航类 .navbar 和 .navbar-default 给导航条设置默认的风格， .navbar-inverse 是黑色风格

在里面添加logo 使用类 .navbar-header 包着一个 .navbar-brand 类 , nav 标签里面最好套一层 .container-fluid

<div class="navbar-header">
    <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
    </a>
</div>

导航条添加表单使用类 .navbar-form 额外添加类 .navbar-left 表示向左浮动

<form class="navbar-form navbar-right" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

对于不包含在 <form> 中的按钮 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中
```
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
```
导航条中的文本: 把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签
导航中的 a 标签：使用 .navbar-link 类可以让链接有正确的默认颜色
导航元素浮动：通过添加 .navbar-left 和 .navbar-right 设置特定方向的浮动样式
给 nav 标签添加 .navbar-fixed-top 类可以让导航条固定在顶部
给 nav 标签添加 .navbar-fixed-bottom 类可以让导航条固定在底部
给 nav 标签添加 .navbar-static-top 类可以让变成静态的

示例

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

16. 分页

给 ul 标签使用类 .pagination 可以给标签添加类似于按钮组的类，会把里面的每一个 li 变成按钮
给里面的 li 添加类 .disabled .active 表示禁用或激活
给里面的 li 添加类 .previous .next 表示让 li 浮动到左侧和右侧
给 ul 添加类 .pagination-sm 可以控制分页组件的大小

把 ul 标签的类 .pagination 替换成 .pager 可以改变分页组件的风格

<ul class="pagination">
    <li>
        <a href="#" >
            <span>上一页</span>
        </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li>
        <a href="#">
            <span>下一页</span>
        </a>
    </li>
</ul>

17. 标签

给 span 标签添加类 .label 和 .label-default 表示给它添加一个背景颜色默认格式的lable

<span class="label label-default">Default</span> <!-- 灰色 -->
<span class="label label-primary">Primary</span> <!-- 深蓝色 -->
<span class="label label-success">Success</span> <!-- 绿色 -->
<span class="label label-info">Info</span> <!-- 蓝色 -->
<span class="label label-warning">Warning</span> <!-- 黄色 -->
<span class="label label-danger">Danger</span> <!-- 红色 -->

18.徽章（未读消息）

给 span 标签添加类 .badge 即可

19.巨幕（背景）

巨幕组件的宽度与浏览器宽度一致并且没有圆角，把此组件放在所有 .container 元素的外面

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

20. 展示缩略图（视频、图片）

使用栅格系统配合类 .thumbnail 可以方便的展示图像、视频、文本等内容

<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="..." alt="...">
            <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
        	...
        </div>
    </div>
</div>

21. 提示框

给div 添加类 .alert 和 .alert-success 可以生成提示框

<div class="alert alert-success" role="alert">...</div>  <!-- 绿色 -->
<div class="alert alert-info" role="alert">...</div>  <!-- 蓝色 -->
<div class="alert alert-warning" role="alert">...</div> <!-- 黄色 -->
<div class="alert alert-danger" role="alert">...</div> <!-- 红色 -->

可以关闭的提示框在里面设置一个按钮添加类和属性 .close data-dismiss="alert" 即可

<div class="alert alert-success" role="alert">
    内容
    <button type="button" class="close" data-dismiss="alert">
        <!-- 关闭符号 -->
        &times;
    </button>
</div>

用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色

22. 进度条

给外层标签设置类 .progress 和里面的二级标签设置已完成进度类 .progress-bar 需要设置宽度为百分比表示已完成的进度 ，设置样式最小宽度 min-width: 2em; 让文本可见

<div class="progress">
    <div class="progress-bar" style="width: 60%;">
        <!-- .sr-only 表示隐藏的内容需要触发 -->
        <span >60% Complete</span>
    </div>
</div>

进度条的样式类, 在类 .progress-bar 的基础上添加以下类可以改变进度样式
- .progress-bar-success 绿色
- .progress-bar-info 蓝色
- .progress-bar-warning 黄色
- .progress-bar-danger 红色
条纹样式, 在类 .progress-bar 的基础上添加 .progress-bar-striped
动态效果, 在类 .progress-bar 的基础上添加 .progress-bar-striped

23. 媒体对象（评论组件）

最外层使用类 .media 里面内容分为左边和评论内容分别使用类 .media-left 和 .media-body 评论内容还可以套一个标题类用于表示用户名 .media-heading

示例

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

媒体列表嵌套媒体组件（多级评论）

在最外层添加一个媒体列表类 .media-list
里面可以添加多个媒体 .media
媒体的类 .media-body 又可以添加一个 .media 表示回复评论

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">评论人</h4>
      <p> 评论内容</p>
      <div class="media">
          <div class="media-left">头像</div>
          <div class="media-body">
              <h4 class="media-heading">A 回复 B</h4>
      		  <p> 回复内容</p>
          </div>
      </div>
    </div>
  </li>
</ul>

24. 列表组

给ul 添加类让他成为列表组 .list-group 给里面的每个 li 添加类 .list-group-item 即可
给div 添加类让他成为列表组 .list-group 给里面的每个 a 添加类 .list-group-item 即可构建一个链接列表组
使用类改变列表项 li 或 a 或 button 的样式
- list-group-item-success 绿色
- list-group-item-info 蓝色
- list-group-item-warning 黄色
- list-group-item-danger 红色

添加类 .list-group-item-heading .list-group-item-text设置列表项的标题和文本

<div class="list-group">
  <!-- active 属性默认选中 -->
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

25. 面板

面板类： .panel 和panel-default组件所做的只是设置基本的边框（border）和内补（padding）来包含内容

在面板类里面可以添加面板标题类和面板主体类 .panel-heading .panel-body

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

面板的样式： 在类 .panel 同级添加类
- .panel-primary 深蓝色
- .panel-success 绿色
- .panel-info 蓝色
- .panel-warning 黄色
- .panel-danger 红色

26. 具有响应式特性的嵌入内容

在外层添加两个类，基本嵌入类 .embed-responsive 创建固定尺寸比例的类.embed-responsive-4by3

里面的 iframe 标签添加一个 .embed-responsive-item 类

<div class="embed-responsive embed-responsive-4by3">
    <!-- src可以放一个链接用于嵌入另一个页面 -->
    <iframe class="embed-responsive-item" src=""></iframe>
</div>

把 Well 用在元素上，就能有嵌入（inset）的简单效果
```
<div class="well">...</div>
```

Vermouth-1

关注

16
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap笔记

Bootstarp笔记前言Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。1. 下载并在页面引入在官网下载3.0版本并引入到html文件中示例<!doctype html><html lang="zh-CN"> <
复制链接

扫一扫