Bootstrap 4
Bootstrap4 分页
-
网页开发过程,如果碰到内容过多,一般都会做分页处理。
-
Bootstrap 4
可以很简单的实现分页效果。 -
要创建一个基本的分页可以在
<ul>
元素上添加.pagination
类。然后在<li>
元素上添加.page-item
类<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><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> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
当前页页码状态
.active
类来高亮显示 -
不可点击的分页链接
.disabled
-
分页显示大小
.pagination-lg
类设置大字体的分页条目,.pagination-sm
类设置小字体的分页条目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <ul class="pagination"> <li class="page-item active"> <a class="page-link" href="#">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item disabled"> <a class="page-link" href="#">Next</a> </li> </ul> <ul class="pagination pagination-lg"> <li class="page-item active"> <a class="page-link" href="#">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item disabled"> <a class="page-link" href="#">Next</a> </li> </ul> <ul class="pagination pagination-sm"> <li class="page-item active"> <a class="page-link" href="#">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item disabled"> <a class="page-link" href="#">Next</a> </li> </ul> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
面包屑导航
-
.breadcrumb
和.breadcrumb-item
类用于设置面包屑导航<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <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> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 列表组(一)
-
大部分基础列表组都是无序的。
-
要创建列表组,可以在
<ul>
元素上添加.list-group
类, 在<li>
元素上添加.list-group-item
类<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <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> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
.active
激活状态的列表项 -
.disabled
禁用的列表项<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <ul class="list-group"> <li class="list-group-item active">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item disabled">Third item</li> </ul> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 列表组(二)
-
链接列表项
-
要创建一个链接的列表项,可以将
<ul>
替换为<div>
,<a>
替换<li>
。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action
类<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <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> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
列表项目的颜色可以通过以下列来设置:
.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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <ul class="list-group"> <li class="list-group-item list-group-item-success">成功列表项</li> <li class="list-group-item list-group-item-secondary">次要列表项</li> <li class="list-group-item list-group-item-info">信息列表项</li> <li class="list-group-item list-group-item-warning">警告列表项</li> <li class="list-group-item list-group-item-danger">危险列表项</li> <li class="list-group-item list-group-item-primary">主要列表项</li> <li class="list-group-item list-group-item-dark">深灰色列表项</li> <li class="list-group-item list-group-item-light">浅色列表项</li> </ul> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 卡片(一)
-
可以通过
Bootstrap4
的.card
与.card-body
类来创建一个简单的卡片<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="card"> <div class="card-body">简单的卡片</div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
头部和底部
-
.card-header
类用于创建卡片的头部样式,.card-footer
类用于创建卡片的底部样式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="card"> <div class="card-header">头部</div> <div class="card-body">内容</div> <div class="card-footer">底部</div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 卡片(二)
-
多种颜色卡片
-
Bootstrap 4 提供了多种卡片的背景颜色类:
.bg-primary
,.bg-success
,.bg-info
,.bg-warning
,.bg-danger
,.bg-secondary
,.bg-dark
和.bg-light
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="card"> <div class="card-body">Basic card</div> </div> <br /> <div class="card bg-primary text-white"> <div class="card-body">Primary card</div> </div> <br /> <div class="card bg-success text-white"> <div class="card-body">Success card</div> </div> <br /> <div class="card bg-info text-white"> <div class="card-body">Info card</div> </div> <br /> <div class="card bg-warning text-white"> <div class="card-body">Warning card</div> </div> <br /> <div class="card bg-danger text-white"> <div class="card-body">Danger card</div> </div> <br /> <div class="card bg-secondary text-white"> <div class="card-body">Secondary card</div> </div> <br /> <div class="card bg-dark text-white"> <div class="card-body">Dark card</div> </div> <br /> <div class="card bg-light text-dark"> <div class="card-body">Light card</div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 卡片(三)
-
标题、文本和链接
-
可以在头部元素上使用
.card-title
类来设置卡片的标题 。.card-text
类用于设置卡片正文的内容。.card-link
类用于给链接设置颜色。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <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> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
图片卡片
-
可以给
<img>
添加.card-img-top
(图片在文字上方) 或.card-img-bottom
(图片在文字下方 来设置图片卡片 -
如果图片要设置为背景,可以对内容使用
.card-img-overlay
类
Bootstrap4 下拉菜单(一)
-
Bootstrap4
下拉菜单依赖于popper.min.js
-
下拉菜单是可切换的,是以列表格式显示链接的上下文菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <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> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
-
解析:
-
.dropdown
类用来指定一个下拉菜单 -
按钮或链接需要添加
.dropdown-toggle
和data-toggle="dropdown"
属性 -
添加
.dropdown-menu
类来设置实际下拉菜单,然后在下拉菜单的选项中添加.dropdown-item
类
Bootstrap4 下拉菜单(二)
-
分割线
.dropdown-divider
-
标题
.dropdown-header
-
可用项
.active
-
禁用项
disabled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="dropdown-divider"></div> <div class="“dropdown-header”">标题</div> <a class="dropdown-item active" href="#">Active</a> <a class="dropdown-item disabled" href="#">Disabled</a> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
-
下拉菜单的定位
- 在
.dropdown-menu
类后添加.dropdown-menu-right
类
- 在
-
弹出方向设置
dropright
下拉菜单向右弹出dropup
上拉菜单向上弹出dropleft
下拉菜单向左弹出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> <style> body { padding: 200px; } .container { padding: 10px; } </style> </head> <body> <div class="container"> <div class="dropup"> <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> </div> <div class="container"> <div class="dropleft"> <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> </div> <div class="container"> <div class="dropright"> <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> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 下拉菜单(三)
-
可以在按钮中添加下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <h2>按钮中的下拉菜单</h2> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" > <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 折叠(一)
-
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <h2>简单的折叠</h2> <p>点击按钮内容会再显示与隐藏之间切换。</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo" > 简单的折叠 </button> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
-
解析:
-
.collapse
类用于指定一个折叠元素 (实例中的<div>
); 点击按钮后会在隐藏与显示之间切换。 -
控制内容的隐藏与显示,需要在
<a>
或<button>
元素上添加data-toggle="collapse"
属性。data-target="#id"
属性是对应折叠的内容 (<div id="demo">
)。 -
注意:
<a>
元素上你可以使用href
属性来代替data-target
属性
Bootstrap4 折叠(二)
-
通过扩展卡片组件来显示简单的手风琴
-
注意:使用
data-parent
属性来确保所有的折叠元素在指定的父元素下,这样就能实现在一个折叠选项显示时其他选项就隐藏<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <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> </div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 导航(一)
-
如果你想创建一个简单的水平导航,可以在
<ul>
元素上添加.nav
类,在每个<li>
选项上添加.nav-item
类,在每个链接上添加.nav-link
类<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <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> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
-
导航对齐方式
-
.justify-content-center
类设置导航居中显示,.justify-content-end
类设置导航右对齐<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <ul class="nav justify-content-center"> <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> <ul class="nav justify-content-end"> <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> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 导航(二)
-
垂直导航
.flex-column
-
选项卡
.nav-tabs
类可以将导航转化为选项卡.active
类来标记选中
-
胶囊导航
.nav-pills
类可以将导航项设置成胶囊形状
-
导航等宽
.nav-justified
类可以设置导航项齐行等宽显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <ul class="nav flex-column"> <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> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" 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> <ul class="nav nav-tabs nav-pills"> <li class="nav-item"> <a class="nav-link active" 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> <ul class="nav nav-tabs nav-pills nav-justified"> <li class="nav-item"> <a class="nav-link active" 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> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
胶囊下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../bootstrap.css" />
</head>
<body>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
>Dropdown</a
>
<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>
</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>
</body>
<script src="../jquery.js"></script>
<script src="../popper.min.js"></script>
<script src="../bootstrap.js"></script>
</html>
选项卡下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../bootstrap.css" />
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
>Dropdown</a
>
<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>
</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>
</body>
<script src="../jquery.js"></script>
<script src="../popper.min.js"></script>
<script src="../bootstrap.js"></script>
</html>
动态选项卡
-
选项卡是动态可切换的,可以在每个链接上添加
data-toggle="tab"
属性。 然后在每个选项对应的内容的上添加.tab-pane
类。 -
如果你希望有淡入效果可以在
.tab-pane
后添加.fade
类<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade active container" id="home">Home</div> <div class="tab-pane fade container" id="menu1">Menu 1</div> <div class="tab-pane fade container" id="menu2">Menu 2</div> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
胶囊状动态选项卡
-
胶囊状动态选项卡只需要将以上实例的代码中
data-toggle
属性设置为data-toggle="pill"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade active container" id="home">Home</div> <div class="tab-pane fade container" id="menu1">Menu 1</div> <div class="tab-pane fade container" id="menu2">Menu 2</div> </div> </ul> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 导航栏(一)
-
可以使用
.navbar
类来创建一个标准的导航栏,后面紧跟:.navbar-expand-xl|lg|md|sm
类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 -
导航栏上的选项可以使用
<ul>
元素并添加class="navbar-nav"
类。 然后在<li>
元素上添加.nav-item
类,<a>
元素上使用.nav-link
类<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <!-- 小屏幕上水平导航栏会切换为垂直的 --> <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> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 导航栏(二)
-
垂直导航栏
- 通过删除
.navbar-expand-xl|lg|md|sm
类来创建垂直导航栏
- 通过删除
-
不同颜色导航栏
- 可以使用以下类来创建不同颜色导航栏:
.bg-primary
,.bg-success
,.bg-info
,.bg-warning
,.bg-danger
,.bg-secondary
,.bg-dark
和.bg-light
- 提示: 对于暗色背景需要设置文本颜色为浅色的,对于浅色背景需要设置文本颜色为深色的
- 可以使用以下类来创建不同颜色导航栏:
-
激活和禁用状态: 可以在
<a>
元素上添加.active
类来高亮显示选中的选项。.disabled
类用于设置该链接是不可点击的。 -
品牌/Logo
.navbar-brand
类用于高亮显示品牌/Logo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <nav class="navbar navbar-expand-md bg-success"> <a href="" class="navbar-brand">LOGO</a> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active text-dark" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link active text-dark" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link disabled text-dark" href="#">Link 3</a> </li> </ul> </nav> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 导航栏(三)
-
折叠导航栏
-
通常,小屏幕上我们都会折叠导航栏,通过点击来显示导航选项
-
要创建折叠导航栏,可以在按钮上添加
class="navbar-toggler", data-toggle="collapse"
与data-target="#thetarget"
类。然后在设置了class="collapse navbar-collapse"
类的div
上包裹导航内容(链接),div
元素上的id
匹配按钮data-target
的上指定的id
:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <nav class="navbar navbar-expand-md bg-dark navbar-dark"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-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> </ul> </div> </nav> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 导航栏(四)
-
导航栏使用下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> <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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" > Dropdown link </a> <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> </li> </ul> </nav> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 导航栏(五)
-
导航栏的表单
<form>
元素使用class="form-inline"
类来排版输入框与按钮<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <nav class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline"> <input class="“form-control”" type="text" placeholder="请输入要搜索的内容" /> <button class="btn btn-success" type="submit">搜索</button> </form> </nav> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
.fixed-top
类来实现导航栏固定在顶部 -
.fixed-bottom
类用于设置导航栏固定在底部
Bootstrap4 表单
-
表单元素
<input>
,<textarea>
和<select>
标签在使用.form-control
类的情况下,宽度都是设置为 100% -
Bootstrap 提供了两种类型的表单布局:
-
堆叠表单 (全屏宽度):垂直方向
-
内联表单:水平方向 在
<form>
元素上添加.form-inline
类 -
屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <form> <div class="form-group"> <label for="email">邮箱:</label> <input type="email" class="form-control" id="email" /> </div> <div class="form-group"> <label for="pwd">密码:</label> <input type="password" class="form-control" id="pwd" /> </div> <div class="form-group"> <label for="city">城市</label> <select id="city" class="form-control"> <option>西安</option> <option>宝鸡</option> <option>汉中</option> <option>咸阳</option> </select> </div> <div class="form-group"> <input type="checkbox" id="auth" /> <label for="auto">同意协议</label> </div> <input type="submit" class="form-control btn-info" value="注册" /> </form> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 表单控件
- Bootstrap4 支持以下表单控件
input
textarea
checkbox
radio
select
Bootstrap4 表单控件input
-
Bootstrap 支持所有的
HTML5
输入类型:text
,password
,datetime
,datetime-local
,date, month
,time
,week
,number
,email
,url
,search
,tel
, 以及color
。 -
注意:如果
input
的type
属性未正确声明,输入框的样式将不会显示<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="form-group"> <label for="usr">用户名:</label> <input type="text" class="form-control" id="usr" /> </div> <div class="form-group"> <label for="pwd">密码:</label> <input type="password" class="form-control" id="pwd" /> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 表单控件-复选框(checkbox
)
-
使用
.form-check-inline
类可以让选项显示在同一行上 -
disabled
禁止选中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" />吃饭 </label> </div> <div class="form-check form-check-inline"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" />睡觉 </label> </div> <div class="form-check form-check-inline disabled"> <label class="form-check-label"> <input type="checkbox" class="form-check-input" value="" disabled />写代码 </label> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 表单控件 单选框(radio
)
-
让选项显示在同一行上取消外边的
div
-
disabled
禁止选中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="“radio”"> <label><input type="radio" name="optradio" />吃饭</label> </div> <div class="radio"> <label><input type="radio" name="optradio" />睡觉</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio" disabled />写代码</label> </div> </div> <div class="container"> <label><input type="radio" name="optradio" />吃饭</label> <label><input type="radio" name="optradio" />睡觉</label> <label><input type="radio" name="optradio" disabled />写代码</label> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 表单控件 下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../bootstrap.css" />
</head>
<body>
<div class="container">
<div class="form-group">
<label for="sel1">单选下拉菜单:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</body>
<script src="../jquery.js"></script>
<script src="../bootstrap.js"></script>
</html>
Bootstrap4 输入框组(一)
-
可以使用
.input-group
类来向表单输入框中添加更多的样式,如图标、文本或者按钮。 -
使用
.input-group-prepend
类可以在输入框的的前面添加文本信息,.input-group-append
类添加在输入框的后面。 -
最后,我们还需要使用
.input-group-text
类来设置文本的样式。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <form> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username" /> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Your Email" /> <div class="input-group-append"> <span class="input-group-text">@runoob.com</span> </div> </div> </form> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 输入框组(二)
-
输入框添加按钮组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="input-group"> <input type="text" class="form-control" placeholder="Something clever.." /> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
设置下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="container"> <div class="input-group mt-3 mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" > 选择网站 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="https://www.google.com">GOOGLE</a> <a class="dropdown-item" href="https://www.runoob.com">RUNOOB</a> <a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a> </div> </div> <input type="text" value="" class="form-control" placeholder="网站地址" /> </div> </div> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> <script> const dropdownItems = document.querySelectorAll(".dropdown-item"); const input = document.querySelector("input"); for (let i = 0; i < dropdownItems.length; i++) { dropdownItems[i].onclick = function (e) { // 阻止默认行为跳转 e.preventDefault(); // console.log(this.href); input.value = this.href; }; } </script> </html>
Bootstrap4 轮播(一)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../bootstrap.css" />
<style>
.carousel-item img {
width: 100%;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" />
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" />
</div>
<div class="carousel-item">
<img
src="https://static.runoob.com/images/mix/img_mountains_wide.jpg"
/>
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
<script src="../jquery.js"></script>
<script src="../bootstrap.js"></script>
</html>
Bootstrap4 轮播(二)
- 轮播图片上添加描述
- 在每个
<div class="carousel-item">
内添加<div class="carousel-caption">
来设置轮播图片的描述文本
- 在每个
- 上述实例的类:
.carousel
创建一个轮播.carousel-indicators
为轮播添加一个指示符,就是轮播图底下的一个个小点,轮播的过程可以显示目前是第几张图。.carousel-inner
添加要切换的图片.carousel-item
指定每个图片的内容.carousel-control-prev
添加左侧的按钮,点击会返回上一张。.carousel-control-next
添加右侧按钮,点击会切换到下一张。.carousel-control-prev-icon
与.carousel-control-prev
一起使用,设置左侧的按钮.carousel-control-next-icon
与.carousel-control-next
一起使用,设置右侧的按钮.slide
切换图片的过渡和动画效果,如果你不需要这样的效果,可以删除这个类
Bootstrap4 模态框
-
模态框(
Modal
)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。 -
可以通过添加
.modal-sm
类来创建一个小模态框,.modal-lg
类可以创建一个大模态框。 -
尺寸类放在
<div>
元素的.modal-dialog
类后<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <!-- 按钮:用于打开模态框 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" > 打开模态框 </button> <!-- 模态框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态框头部 --> <div class="modal-header"> <h4 class="modal-title">模态框头部</h4> <button type="button" class="close" data-dismiss="modal"> × </button> </div> <!-- 模态框主体 --> <div class="modal-body"> <form action=""> <div class="form-group"> <label for="username">用户名</label> <input type="text" id="username" class="form-control" /> </div> <div class="form-group"> <label for="password">密码</label> <input type="text" id="password" class="form-control" /> </div> </form> </div> <!-- 模态框底部 --> <div class="modal-footer"> <input type="submit" value="登录" class="btn bg-primary text-light" /> <button class="btn btn-danger" data-dismiss="modal">关闭</button> </div> </div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 提示框
-
提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。
-
通过向元素添加
data-toggle="tooltip"
来来创建提示框。title
属性的内容为提示框显示的内容 -
注意:提示框要写在
jQuery
的初始化代码里: 然后在指定的元素上调用tooltip()
方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <!-- 提示框 --> <a data-toggle="tooltip" title="我是提示内容">鼠标引动到我这里</a> </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> <script> // $('[data-toggle="tooltip"]') jQuery 获取DOM对象 $('[data-toggle="tooltip"]').tooltip(); </script> </html>
-
使用
data-placement
属性来设定提示框显示的方向:top
,bottom
,left
或right
<a data-toggle="tooltip" data-placement="right" title="我是提示内容"> 鼠标引动到我这里 </a>
Bootstrap4 弹出框
-
弹出框控件类似于提示框,它在鼠标点击到元素后显示,与提示框不同的是它可以显示更多的内容。
-
通过向元素添加
data-toggle="popover"
来来创建弹出框。 -
title
属性的内容为弹出框的标题,data-content
属性显示了弹出框的文本内容 -
注意:弹出框要写在
jQuery
的初始化代码里: 然后在指定的元素上调用popover()
方法 -
使用
data-placement
属性来设定提示框显示的方向:top
,bottom
,left
或right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> <style> body { padding: 20px; } </style> </head> <body> <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容" data-placement="right" >多次点我</a > </body> <script src="../jquery.js"></script> <script src="../popper.min.js"></script> <script src="../bootstrap.js"></script> <script> // 初始化调用 $(document).ready(function () { $('[data-toggle="popover"]').popover(); }); </script> </html>
-
使用
data-trigger="focus"
属性来设置在鼠标点击元素外部区域来关闭弹出框<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容" data-placement="right" data-trigger="focus" >多次点我</a >
-
如果你想实现在鼠标移动到元素上显示,移除后消失的效果,可以使用
data-trigger
属性,并设置值为"hover"
<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容" data-placement="right" data-trigger="hover" >多次点我</a >
Bootstrap4 滚动监听(Scrollspy
)
-
滚动监听(
Scrollspy
)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 -
想要监听的元素(通常是
body
)添加data-spy="scroll"
-
然后添加
data-target
属性,它的值为导航栏的id
或class
(.navbar
)。这样就可以联系上可滚动区域 -
注意可滚动项元素上的
id
(<div id="section1">
)必须匹配导航栏上的链接选项(<a href="#section1">
)。 -
可选项
data-offset
属性用于计算滚动位置时,距离顶部的偏移像素。 默认为10 px。 -
设置相对定位: 使用
data-spy="scroll"
的元素需要将其CSS position
属性设置为"relative"
才能起作用。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> <style> body { position: relative; } #navbar { position: fixed; right: 0; top: 100px; } </style> </head> <body data-spy="scroll"> <nav class="navbar navbar-light bg-light" id="navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#option1" class="nav-link">option1</a> </li> <li class="nav-item"> <a href="#option2" class="nav-link">option2</a> </li> </ul> </nav> <div id="option1"> <h1>Option1</h1> <p> Try to scroll this page and look at the navigation bar while scrolling! </p> <div class="bg-success" style="height: 500px"></div> </div> <div id="option2"> <h1>Option2</h1> <p> Try to scroll this page and look at the navigation bar while scrolling! </p> <div class="bg-info" style="height: 500px"></div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 小工具(一)
-
Bootstrap4
提供了一些小工具,可以让我们不用写CSS
代码就能实现想要的效果。 -
边框
- 添加或移除边框
- 边框颜色
- 边框圆角设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <!-- 边框 --> <span class="border"></span> <span class="border border-0"></span> <span class="border border-top-0"></span> <span class="border border-right-0"></span> <span class="border border-bottom-0"></span> <span class="border border-left-0"></span> <!-- 边框颜色 --> <span class="border border-primary"></span> <span class="border border-secondary"></span> <span class="border border-success"></span> <span class="border border-danger"></span> <span class="border border-warning"></span> <span class="border border-info"></span> <span class="border border-light"></span> <span class="border border-dark"></span> <span class="border border-white"></span> <!-- 边框圆角 --> <span class="rounded"></span> <span class="rounded-top"></span> <span class="rounded-right"></span> <span class="rounded-bottom"></span> <span class="rounded-left"></span> <span class="rounded-circle"></span> <span class="rounded-0"></span> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 小工具(二)
-
浮动
.float-right
类用于设置元素右浮动.float-left
设置元素左浮动.clearfix
类用于清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> <style> span { width: 100px; height: 100px; display: block; } </style> </head> <body> <div class="clearfix"> <span class="float-left border border-danger">左浮动</span> <span class="float-right border border-success">右浮动</span> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
响应式浮动
-
可以设置浮动 (
.float-\*-left|right - *
为sm
,md
,lg
或xl
)的方向依赖于屏幕的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../bootstrap.css" />
</head>
<body>
<div class="float-sm-right bg-primary">在大于小屏幕尺寸上右浮动</div>
<br />
<div class="float-md-right bg-info">在大于中等屏幕尺寸上右浮动</div>
<br />
<div class="float-lg-right bg-success">在大于大屏幕尺寸上右浮动</div>
<br />
<div class="float-xl-right bg-warning">在大于超大屏幕尺寸上右浮动</div>
<br />
<div class="float-none bg-secondary">没有浮动</div>
<div class="clearfix">
<span class="float-left border border-danger">左浮动</span>
<span class="float-right border border-success">右浮动</span>
</div>
</body>
<script src="../jquery.js"></script>
<script src="../bootstrap.js"></script>
</html>
Bootstrap4 小工具(三)
-
对齐
- 使用
.mx-auto
类来设置居中对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="mx-auto bg-warning" style="width: 150px">居中显示</div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
- 使用
-
宽度
- 元素上使用
w-*
类 (.w-25, .w-50, .w-75, .w-100, .mw-100
)来设置宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="w-25 bg-warning">宽度 25%</div> <div class="w-50 bg-info">宽度 50%</div> <div class="w-75 bg-success">宽度 75%</div> <div class="w-100 bg-danger">宽度 100%</div> <div class="mw-100 bg-primary">最大宽度 100%</div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
- 元素上使用
-
高度
- 元素上使用
h-*
类(.h-25, .h-50, .h-75, .h-100, .mh-100
)来设置高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <!-- 必须放在一个固定高度的盒子里面 --> <div style="height: 100px"> <div class="w-25 h-25 bg-warning">宽度 25%</div> <div class="w-50 h-50 bg-info">宽度 50%</div> <div class="w-75 h-75 bg-success">宽度 75%</div> <div class="w-100 h-100 bg-danger">宽度 100%</div> <div class="mw-100 mh-100 bg-primary">最大宽度 100%</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
- 元素上使用
Bootstrap4 Flex
(弹性)布局
-
Bootstrap 3
与Bootstrap 4
最大的区别就是Bootstrap 4
使用弹性盒子来布局,而不是使用浮动来布局 -
以下实例使用
d-flex
类创建一个弹性盒子容器,并设置三个弹性子元素 -
创建显示在同一行上的弹性盒子容器可以使用
d-inline-flex
类<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="d-flex bg-secondary text-white"> <div class="bg-info">Flex item 1</div> <div class="bg-warning">Flex item 2</div> <div class="bg-primary">Flex item 3</div> </div> <br /> <div class="d-inline-flex bg-secondary text-white"> <div class="bg-info">Flex item 1</div> <div class="bg-warning">Flex item 2</div> <div class="bg-primary">Flex item 3</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 Flex(弹性)布局
-
水平方向
.flex-row
可以设置弹性子元素水平显示,这是默认的。- 使用
.flex-row-reverse
类用于设置右对齐显示,即与.flex-row
方向相反
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <br /> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
垂直方向
.flex-column
类用于设置弹性子元素垂直方向显示,.flex-column-reverse
用于翻转子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="d-flex flex-column"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <br /> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
内容排列
.justify-content-*
类用于修改弹性子元素的排列方式,*
号允许的值有:start
(默认),end
,center
,between
或around
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="d-flex justify-content-end bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex justify-content-center bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex justify-content-between bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <div class="d-flex justify-content-around bg-secondary mb-3"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
等宽
.flex-fill
类强制设置各个弹性子元素的宽度是一样的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="d-flex"> <div class="p-2 bg-info flex-fill">Flex item 1</div> <div class="p-2 bg-warning flex-fill">Flex item 2</div> <div class="p-2 bg-primary flex-fill">Flex item 3</div> </div> </body> <script src=../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
扩展
.flex-grow-1
用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间,最后一个获取剩余空间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="d-flex"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary flex-grow-1">Flex item 3</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
排序
.order
类可以设置弹性子元素的排序,从.order-1
到.order-12
,数字越低权重越高(.order-1
排在.order-2
之前)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Flex item 1</div> <div class="p-2 bg-warning order-2">Flex item 2</div> <div class="p-2 bg-primary order-1">Flex item 3</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
外边距
.mr-auto
类可以设置子元素右外边距为auto
,即margin-right: auto!important;
,.ml-auto
类可以设置子元素左外边距为auto
,即margin-left: auto!important;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="d-flex bg-secondary"> <div class="p-2 mr-auto mr-auto bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 bg-primary">Flex item 3</div> </div> <br /> <div class="d-flex bg-secondary"> <div class="p-2 bg-info">Flex item 1</div> <div class="p-2 bg-warning">Flex item 2</div> <div class="p-2 ml-auto bg-primary">Flex item 3</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
包裹
- 弹性容器中包裹子元素可以使用以下三个类:
.flex-nowrap
(默认),.flex-wrap
或.flex-wrap-reverse
。设置flex
容器是单行或者多行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> <style> div > div { width: 50%; } </style> </head> <body> <div class="d-flex flex-wrap"> <div class="bg-success">1</div> <div class="bg-info">2</div> <div class="bg-warning">3</div> </div> <br /> <div class="d-flex flex-nowrap"> <div class="bg-success">1</div> <div class="bg-info">2</div> <div class="bg-warning">3</div> </div> <br /> <div class="d-flex flex-wrap-reverse"> <div class="bg-success">1</div> <div class="bg-info">2</div> <div class="bg-warning">3</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
- 弹性容器中包裹子元素可以使用以下三个类:
-
内容对齐
.align-content-*
控制在垂直方向上如何去堆叠子元素,包含的值有:.align-content-start
(默认),.align-content-end
,.align-content-center
,.align-content-between
,.align-content-around
和.align-content-stretch
。- 这些类在只有一行的弹性子元素中是无效的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> <style> .d-flex { height: 100px; border: 1px solid red; } .d-flex div { height: 50px; } </style> </head> <body> <div class="d-flex flex-wrap align-content-start"> <div class="bg-success">1</div> <div class="bg-info">2</div> <div class="bg-warning">3</div> </div> <div class="d-flex flex-wrap align-content-end"> <div class="bg-success">1</div> <div class="bg-info">2</div> <div class="bg-warning">3</div> </div> <div class="d-flex flex-wrap align-content-center"> <div class="bg-success">1</div> <div class="bg-info">2</div> <div class="bg-warning">3</div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
-
子元素对齐
- 要设置单行的子元素对齐可以使用
.align-items-*
类来控制,包含的值有:.align-items-start
,.align-items-end
,.align-items-center
,.align-items-baseline
,和.align-items-stretch
(默认)
- 要设置单行的子元素对齐可以使用
-
指定子元素对齐
- 设置指定子元素对齐对齐可以使用
.align-self-*
类来控制,包含的值有:.align-self-start
,.align-self-end
,.align-self-center
,.align-self-baseline
,和.align-self-stretch
(默认)
- 设置指定子元素对齐对齐可以使用
Bootstrap4 多媒体对象(一)
-
Bootstrap 提供了很好的方式来处理多媒体对象(图片或视频)和内容的布局。应用场景有博客评论、微博等
-
基础多媒体对象
- 要创建一个多媒体对象,可以在容器元素上添加
.media
类,然后将多媒体内容放到子容器上,子容器需要添加.media-body
类,然后添加外边距,内边距等效果 - 想将头像图片显示在右侧,可以在
.media-body
容器后添加图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="media border p-3"> <img src="../图像形状/01.webp" class="mr-3 mt-3 rounded-circle" style="width: 60px" /> <div class="media-body"> <h4>菜鸟教程</h4> <p>学的不仅是技术,更是梦想!!!</p> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
- 要创建一个多媒体对象,可以在容器元素上添加
Bootstrap4 多媒体对象(二)
-
多媒体对象嵌套
- 多媒体对象可以多个嵌套(一个多媒体对象中包含另外一个多媒体对象)
- 要嵌套多媒体对象,可以把新的
.media
容器放到.media-body
容器中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> </head> <body> <div class="media border p-3"> <img src="../图像形状/01.webp" class="mr-3 mt-3 rounded-circle" style="width: 60px" /> <div class="media-body"> <h4>网星软件</h4> <p>学的不仅是技术,更是梦想!!!</p> <div class="media p-3"> <img src="../图像形状/01.webp" class="mr-3 mt-3 rounded-circle" style="width: 45px" /> <div class="media-body"> <h4>网星软件</h4> <p>学的不仅是技术,更是梦想!!!</p> </div> </div> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>
Bootstrap4 多媒体对象(三)
-
可以使用
align-self-*
相关类来设置多媒体对象的图片显示位置<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="../bootstrap.css" /> <style> .media { border: 1px solid red; } </style> </head> <body> <!-- 头部 --> <div class="media"> <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-start mr-3" style="width: 60px" /> <div class="media-body"> <h4>头部 -- 网星软件</h4> <p>学的不仅是技术,更是梦想!!!</p> </div> </div> <!-- 居中 --> <div class="media"> <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-center mr-3" style="width: 60px" /> <div class="media-body"> <h4>居中 -- 网星软件</h4> <p>学的不仅是技术,更是梦想!!!</p> </div> </div> <!-- 底部 --> <div class="media"> <img src="https://static.runoob.com/images/mobile-icon.png" class="align-self-end mr-3" style="width: 60px" /> <div class="media-body"> <h4>底部 -- 网星软件</h4> <p>学的不仅是技术,更是梦想!!!</p> </div> </div> </body> <script src="../jquery.js"></script> <script src="../bootstrap.js"></script> </html>