我与狗子的日常4

BootStrap4 Study Diary

  from runoob.com             

• 引入插件

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"></link>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- 对移动设备的友好支持 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

• container 和 container-fluid 容器

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

• 网格系统的5大类

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

• 偏移列 offset-*-*

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

• 文字排版

1.Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
<h1 class="display-1">Display 1</h1>
2.<small> 用于创建字号更小的颜色更浅的文本
3.<mark> 为黄色背景及有一定的内边距:
4.<blockquote> 引用内容
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
5.<dl> 用于解释描述
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> 
6.<kbd> <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p> 键盘按键

• 颜色

1.一些颜色类

<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="text-secondary">副标题。</p>
<p class="text-dark">深灰色文字。</p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
<p class="text-white">白色文本（白色背景上看不清楚）。</p>

2.链接颜色

<div class="container">
<h2>文本颜色</h2>
<p>鼠标移动到链接。</p>
<a href="#" class="text-muted">柔和的链接。</a>
<a href="#" class="text-primary">主要链接。</a>
<a href="#" class="text-success">成功链接。</a>
<a href="#" class="text-info">信息文本链接。</a>
<a href="#" class="text-warning">警告链接。</a>
<a href="#" class="text-danger">危险链接。</a>
<a href="#" class="text-secondary">副标题链接。</a>
<a href="#" class="text-dark">深灰色链接。</a>
<a href="#" class="text-light">浅灰色链接。</a>
</div>

3.背景颜色

<div class="container">
<h2>背景颜色</h2>
<p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
</div>

• 表格

1.基础表格
Bootstrap4 通过 .table 类来设置基础表格的样式 class加在 <table class="table">

2.隔行变色 <table class="table table-striped"> 隔行变色会出现在<tbody>内的行上
3.带边框的表格 .table-bordered 类可以为表格添加边框 <table class="table table-bordered">

4.鼠标悬停状态表格 
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景） <table class="table table-hover">
.table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果 <table class="table table-dark table-hover">

5.黑色条纹表格 联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格 <table class="table table-dark table-striped">

6.表格其他颜色 .table-primary .table-success .table-danger .table-active .table-dark 可以作用在<tr> 标签上

7..table-sm 类用于通过减少内边距来设置较小的表格:

• 图像形状

1.小圆角图片 .rounded 类可以让图片显示圆角效果 <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

2.椭圆形图片 .rounded-circle 类可以设置椭圆形图片 <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

3.缩略图 给图片加边框 .img-thumbnail 类用于设置图片缩略图 大小不会改变，基本没球用

4.图片对齐方式 .float-right 图片右对齐

5.响应式图片 .img-fluid <img class="img-fluid" src="img_chania.jpg" alt="Chania">

• Jumbotron（超大屏幕）

.jumbotron 会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。
<div class="jumbotron jumbotron-fluid"> 会创建一个全屏幕宽度的背景框

• 信息提示框

1.提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现
eg: <div class="alert alert-success">
2.提示框中链接 添加 .alert-link 类来设置匹配提示框颜色的链接
eg：<div class="alert alert-success"><strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。</div>
3.关闭提示框 在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>成功!</strong> 指定操作成功提示信息。
</div>

notice： &times; (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x"。
4.提示框的淡出 .fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果 <div class="alert alert-danger alert-dismissable fade show">

• 按钮

1.按钮样式 可作用于 <a> <button> <input> 标签上
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>

2.按钮添加边框 .btn-outline-primary <button type="button" class="btn btn-outline-primary">主要按钮</button>

3.不同大小按钮 大号 .btn-lg 小号 btn-sm

4.块级按钮 .btn-block

5.激活和禁用的按钮 .active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的 disabled是属性 disabled是属性 disabled是属性 disabled是属性！！！！

• 按钮组

1.<div> 元素上添加 .btn-group 类来创建按钮组 .btn-group-lg|sm 类来设置按钮组的大小。
<div class="btn-group .btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
2. .btn-group-vertical 类来创建垂直的按钮组 <div class="btn-group-vertical">

• 徽章

1.徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化:
<h1>测试标题 <span class="badge badge-primary">New</span></h1>

2.药丸形状的徽章：<span class="badge badge-pill badge-primary">主要</span>

3.将徽章嵌入到按钮内： 
<button type="button" class="btn btn-primary">
Messages <span class="badge badge-light">4</span>
</button>

• 进度条

添加一个带有 .progress 类的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>

1.设置进度条的高度
<div class="progress" style="height:20px;">

2.进度条内添加文本
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
3.设置进度条颜色 bg-primary

4.条纹进度条 .progress-bar-striped 类来设置条纹进度条

5.动画进度条 使用 .progress-bar-animated 类可以为进度条添加动画
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>

6.混合色彩进度条 可以使用在根据用户数据来判断用户达到那个级别
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>

• 分页

1.要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类：当前页面高亮 .active 不可点击设置 .disabled 
.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目

<ul class="pagination pagination-lg">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

2.面包屑导航 .breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>

• 列表

1.要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>

2.要创建一个链接的列表项，可以将<ul> 替换 <div> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>

3.列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:

• card

1. .card 与 .card-body 类来创建一个简单的卡片
<div class="card">
<div class="card-body">简单的卡片</div>
</div>

2. 我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

3.图片卡片 样子不错
图片在上 .card-img-top
<div class="card" style="width:400px">
<img class="card-img-top" src="http://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
图片在下 .card-img-bottom
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
<img class="card-img-bottom" src="http://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
</div>

• 下拉菜单

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
.dropdown 类用来指定一个下拉菜单。 我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。
<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

1.下拉选项间增加分割线 在各个选项之间添加 <div class="dropdown-divider"></div>
2.下拉菜单中的标题 选项前加 <div class="dropdown-header">Dropdown header 1</div> 使用的是 .dropdown-header
3. .active 类可以表示选中项 高亮显示
4.下来选项的对齐方式 如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。 这个我试过不行

• 某个元素的显示与隐藏

<button data-toggle="collapse" data-target="#demo">折叠</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
1 .collapse 类用于指定一个折叠元素 点击按钮后会在隐藏与显示之间切换 控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示
2.简单的手风琴
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
选项一
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
#1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
选项二
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
#2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
<div class="card-body">
#3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
选项三
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
#4 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
<div class="card-body">
#5 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
</div>

• 导航

1.建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
2.导航栏居中展示 <ul class="nav justify-content-center"> 居右展示 <ul class="nav justify-content-end">

3.创建垂直导航栏 .flex-column 类用于创建垂直导航 <ul class="nav flex-column">

4. .nav-tabs 可以将导航转化为选项卡 然后对于选中的选项使用 .active 类来标记。
<ul class="nav nav-tabs"> 
<a class="nav-link active" href="#">Active</a>

5.胶囊导航 .nav-pills 类可以将导航项设置成胶囊形状。 亲测不行 <ul class="nav nav-pills">

6. 等宽 .nav-justified <ul class="nav nav-tabs nav-justified">..</ul>

• 导航栏

1.导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link
<!-- 小屏幕上水平导航栏会切换为垂直的 -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
2. 删除 .navbar-expand-sm 导航栏将变成垂直
3. 设置颜色
<!-- 黑底白字 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝底白字 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
4. .navbar-brand 类用于高亮显示品牌/Logo 当然也可以作用于图片 设置图片自适应导航栏
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
</nav>

5.导航栏文本
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>