Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记02——移动端页面布局
Bootstrap响应式Web开发笔记03——Bootstrap栅格系统
一、组件所用的头部文件
<head>
<meta charset="UTF-8">
<title>按钮组件</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js" defer></script>
<script src="js/bootstrap.bundle.js" defer></script>
<script src="js/jQuery.js" defer></script>
<script src="js/popper.min.js" defer></script>
</head>
二、按钮组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮组件</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js" defer></script>
<script src="js/bootstrap.bundle.js" defer></script>
<script src="js/jQuery.js" defer></script>
<script src="js/popper.min.js" defer></script>
</head>
<body>
<h2>按钮样式</h2>
<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-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>
<h2>设置按钮边框</h2>
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light">浅色</button>
<button type="button" class="btn btn-outline-link text-dark">连接</button>
<div class="container">
<h2>不同大小的按钮</h2>
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">大号按钮</button>
</div>
<div class="container">
<h2>块级按钮</h2>
<button type="button" class="btn btn-primary btn-block">按钮 1</button>
<button type="button" class="btn btn-default btn-block">按钮 2</button>
<h2>大的块级按钮</h2>
<button type="button" class="btn btn-primary btn-lg btn-block">按钮 1</button>
<button type="button" class="btn btn-default btn-lg btn-block">按钮 2</button>
<h2>小的块级按钮</h2>
<button type="button" class="btn btn-primary btn-sm btn-block">按钮 1</button>
<button type="button" class="btn btn-default btn-sm btn-block">按钮 2</button>
</div>
<div class="container">
<h2>按钮状态</h2>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
</div>
<div class="container">
<h2>按钮组</h2>
<p>.btn-group 类用于创建按钮组：</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮1</button>
<button type="button" class="btn btn-primary">按钮1</button>
</div>
</div>
<div class="container">
<h2>按钮组大小</h2>
<p>我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。</p>
<h3>大按钮:</h3>
<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>
<h3>默认按钮:</h3>
<div class="btn-group">
<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>
<h3>小按钮:</h3>
<div class="btn-group btn-group-sm">
<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>
</div>
<div class="container">
<h2>垂直按钮组</h2>
<p>U可以使用 .btn-group-vertical 类来创建垂直的按钮组：</p>
<div class="btn-group-vertical">
<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>
</div>
<div class="container">
<h2>内嵌按钮组</h2>
<p>按钮组设置下拉菜单:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
</div>
<div class="container">
<h2>拆分按钮下拉菜单</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</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="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
<div class="container">
<h2>垂直按钮组及下拉菜单</h2>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
</div>
</body>
</html>
三、导航组件
1.组件源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<title>导航</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jQuery.js" defer></script>
<script src="js/popper.min.js" defer></script>
<script src="js/bootstrap.min.js" defer></script>
<script src="js/bootstrap.bundle.js" defer></script>
</head>
<body>
<div class="container">
<h2>导航</h2>
<p>简单的水平导航:</p>
<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>
<div class="container">
<h2>导航</h2>
<p>左对齐导航 (默认):</p>
<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>
<p class="text-center">居中对齐导航:</p>
<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>
<p class="text-right">右对齐导航:</p>
<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>
<div class="container">
<h2>垂直导航</h2>
<p>.flex-column 类用于创建垂直导航：</p>
<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>
</div>
<div class="container">
<h2>选项卡</h2>
<p>选项卡导航:</p>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
<div class="container">
<h2>胶囊</h2>
<p>胶囊导航:</p>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
<div class="container">
<h2>导航等宽</h2>
<p>.nav-justified 类可以设置导航项齐行等宽显示。</p>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
<br>
<p>Justified tabs:</p>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
<div class="container">
<h2>胶囊导航带下拉菜单</h2>
<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>
</div>
<div class="container">
<h2>选项卡下拉菜单</h2>
<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>
</div>
<div class="container">
<h2>选项卡切换</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<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 id="home" class="container tab-pane active"><br>
<h3>选项卡1</h3>
<p>这是选项卡1</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>选项卡2</h3>
<p>这是选项卡2</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>选项卡3</h3>
<p>这是选项卡3</p>
</div>
</div>
</div>
<div class="container">
<h2>胶囊选项卡切换</h2>
<br>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#homex">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1x">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2x">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="homex" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
</div>
<div id="menu1x" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<div id="menu2x" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem aperiam.</p>
</div>
</div>
</div>
<br/>
<h2>简单水平导航栏</h2>
<nav class="navbar navbar-expand-sm bg-light">
<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>
<br>
<div class="container-fluid">
<h3>简单的导航栏实例</h3>
<p>导航栏一般放在页面的顶部。</p>
<p>我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。</p>
</div>
<h2>垂直导航栏</h2>
<nav class="navbar bg-light">
<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>
<br>
<div class="container-fluid">
<h3>垂直导航栏</h3>
<p>导航栏一般在页面头部。</p>
</div>
<br/>
<h2>不同颜色导航栏</h2>
<div class="container">
<h3>不同颜色导航栏</h3>
<p>对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。</p>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
</nav>
<br/>
<h2>品牌log导航栏</h2>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">Logo</a>
<a class="navbar-brand" href="#">
<img src="../img/100.png">
</a>
<!-- 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>
<div class="container-fluid">
<h3>品牌/Logo</h3>
<p>.navbar-brand 类用于高亮显示品牌/Logo:</p>
</div>
<br/>
<h2>折叠导航栏</h2>
<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>
<br>
<div class="container">
<h3>折叠导航栏</h3>
<p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
<p>提示: 如果你删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。</p>
</div>
<br/>
<h2>导航栏下拉菜单</h2>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- 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>
<!-- Dropdown -->
<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>
<br>
<div class="container">
<h3>导航栏使用下拉菜单</h3>
<p>导航栏上可以设置下拉菜单。</p>
</div>
<br/>
<h2>导航栏表单（搜索）</h2>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success" type="button">Search</button>
</form>
</nav>
<br>
<div class="container">
<h3>导航栏的表单</h3>
<p>导航栏的表单 form 元素使用 class="form-inline" 类来排版输入框与按钮：</p>
</div>
<br/>
<h2>导航栏文本</h2>
<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>
<br>
<div class="container">
<h3>导航栏文本</h3>
<p>使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。</p>
</div>
<br/>
<h2>导航栏固定位置</h2>
<!--固定头部-->
<!--<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">-->
<!--<a class="navbar-brand" href="#">Logo</a>-->
<!--<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>-->
<!--</ul>-->
<!--</nav>-->
<!--固定底部-->
<!--<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">-->
<!--<a class="navbar-brand" href="#">Logo</a>-->
<!--<ul class="navbar-nav">-->
<!--<li class="nav-item">-->
<!--<a class="nav-link" href="javascript:void(0)">Link</a>-->
<!--</li>-->
<!--<li class="nav-item">-->
<!--<a class="nav-link" href="javascript:void(0)">Link</a>-->
<!--</li>-->
<!--</ul>-->
<!--</nav>-->
<div class="container-fluid" style="margin-top:80px">
<h3>固定导航栏</h3>
<p>导航栏可以固定在头部或者底部。</p>
<h1>滚动页面查看效果。</h1>
</div>
<br/>
<h2>普通面包屑导航</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
</body>
</html>
2.组件案例：课工场导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<title>课工场</title>
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<script src="../js/jQuery.js" defer></script>
<script src="../js/popper.min.js" defer></script>
<script src="../js/bootstrap.bundle.js" defer></script>
<script src="../js/bootstrap.min.js" defer></script>
<style>
@media screen and (max-width: 768px) {
.expand {
position: absolute;
left: 50%;
top: 15px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!--品牌log-->
<a class="navbar-brand" href="#">
<img src="../img/logo.png">
</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="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">入门</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">岗位课</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">技能课</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">微社区</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
学员
<!--危险色，白字，胶囊边框，内边距 下1 左右2-->
<span class="bg-danger text-white rounded-pill pb-1 pl-2 pr-2">new</span>
</a>
</li>
</ul>
</div>
<!--普通导航-->
<ul class="nav expand">
<li class="nav-item">
<a class="nav-link text-secondary" href="#">登录</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">注册</a>
</li>
</ul>
<!--表单导航:小屏幕隐藏，大屏幕显示-->
<form class="form-inline d-none d-md-block">
<input class="form-control" type="text" placeholder="输入搜索内容">
<button class="btn btn-success ml-2" type="button">搜索</button>
</form>
</nav>
</body>
</html>
3.组件案例：美联英语导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<title>导航</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jQuery.js" defer></script>
<script src="js/popper.min.js" defer></script>
<script src="js/bootstrap.bundle.js" defer></script>
<script src="js/bootstrap.min.js" defer></script>
<style>
html {
font-size: 18px;
}
@media screen and (min-width: 768px) {
nav {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
.nav-link {
width: 8rem;
height: 4rem;
line-height: 4rem;
padding: 0;
text-align: center;
color: #ffffff !important;
}
.nav-link:hover {
background: #aaa;
color: #ffffff !important;
}
.dropdown-item {
background-color: #343a40;
color: white !important;
}
.dropdown-item:hover {
background-color: white !important;
color: #343a40 !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="image/logo_09.png"/>
</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="#">
<svg t="1616240472126" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3194" width="18" height="18">
<path d="M569.6 19.2c-32-25.6-76.8-25.6-108.8 0l-448 422.4c-12.8 19.2-19.2 44.8 0 64 12.8 19.2 38.4 19.2 57.6 0l6.4-6.4v441.6c0 44.8 38.4 83.2 83.2 83.2h236.8v-249.6c0-32 25.6-57.6 57.6-57.6h115.2c32 0 57.6 25.6 57.6 57.6V1024h243.2c44.8 0 83.2-38.4 83.2-83.2V505.6c19.2 19.2 44.8 12.8 57.6 0 12.8-19.2 12.8-44.8 0-57.6L569.6 19.2z"
p-id="3195" fill="#ffffff"></path>
</svg>
首页
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg t="1616240595699" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4352" width="18" height="18">
<path d="M160 894c0 17.7 14.3 32 32 32h286V550H160v344z m386 32h286c17.7 0 32-14.3 32-32V550H546v376z m334-616H732.4c13.6-21.4 21.6-46.8 21.6-74 0-76.1-61.9-138-138-138-41.4 0-78.7 18.4-104 47.4-25.3-29-62.6-47.4-104-47.4-76.1 0-138 61.9-138 138 0 27.2 7.9 52.6 21.6 74H144c-17.7 0-32 14.3-32 32v140h366V310h68v172h366V342c0-17.7-14.3-32-32-32z m-402-4h-70c-38.6 0-70-31.4-70-70s31.4-70 70-70 70 31.4 70 70v70z m138 0h-70v-70c0-38.6 31.4-70 70-70s70 31.4 70 70-31.4 70-70 70z"
p-id="4353" fill="#ffffff"></path>
</svg>
通用英语
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg t="1616240634646" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="5360" width="18" height="18">
<path d="M295.581454 931.441151 92.254451 728.115155l562.02665-562.031684 203.325996 203.325996L295.581454 931.441151 295.581454 931.441151zM295.581454 931.441151M988.661735 143.042181 880.643352 35.02984c-26.31967-26.31967-70.851666-24.461989-99.461973 4.153353L679.701633 140.662939l203.325996 203.325996L984.507375 242.510195C1013.111641 213.893847 1014.976371 169.360844 988.661735 143.042181L988.661735 143.042181zM988.661735 143.042181M73.372554 760.101509 1.485823 1022.19971l262.070009-71.887738L73.372554 760.101509zM73.372554 760.101509"
p-id="5361" fill="#ffffff"></path>
</svg>
海外考试</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg t="1616240668252" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="6422" width="18" height="18">
<path d="M565.333333 605.866667c-44.8-38.4-40.533333-55.466667-98.133333-55.466667s-93.866667 12.8-78.933333 93.866667 57.6 44.8 53.333333 104.533333 10.666667 74.666667 19.2 89.6 38.4 57.6 49.066667-2.133333 29.866667-93.866667 53.333333-123.733333S610.133333 644.266667 565.333333 605.866667zM407.466667 465.066667c2.133333-29.866667 51.2-61.866667 85.333333-76.8s64-19.2 59.733333-44.8S539.733333 298.666667 488.533333 298.666667s-29.866667 70.4-72.533333 27.733333 8.533333-29.866667 29.866667-40.533333 42.666667-49.066667 6.4-51.2-29.866667 17.066667-59.733333 6.4-42.666667 38.4-61.866667 29.866667c-12.8-4.266667-44.8-29.866667-68.266667-53.333333-44.8 36.266667-78.933333 83.2-102.4 138.666667 6.4 72.533333 44.8 108.8 44.8 108.8s19.2 46.933333 140.8 104.533333c0 0 23.466667 2.133333-4.266667-25.6s-55.466667-59.733333-23.466667-76.8 42.666667-17.066667 51.2 17.066667S405.333333 497.066667 407.466667 465.066667zM893.866667 475.733333c0-4.266667 0-6.4-2.133333-10.666667 0-8.533333-2.133333-17.066667-4.266667-23.466667 0-4.266667-2.133333-8.533333-2.133333-12.8-2.133333-8.533333-4.266667-14.933333-6.4-23.466667 0-4.266667-2.133333-6.4-2.133333-10.666667-4.266667-10.666667-6.4-21.333333-10.666667-29.866667-2.133333-4.266667-4.266667-8.533333-6.4-12.8-2.133333-6.4-6.4-10.666667-8.533333-17.066667-2.133333-4.266667-6.4-10.666667-8.533333-14.933333-2.133333-4.266667-4.266667-8.533333-8.533333-12.8-4.266667-4.266667-6.4-10.666667-10.666667-14.933333-2.133333-2.133333-4.266667-6.4-6.4-8.533333-14.933333-19.2-32-38.4-51.2-55.466667-2.133333 0-2.133333-2.133333-4.266667-2.133333-6.4-6.4-12.8-10.666667-21.333333-17.066667 0 0 0 0-2.133333 0-29.866667-23.466667-64-42.666667-100.266667-55.466667-10.666667 17.066667-21.333333 38.4-34.133333 46.933333-19.2 10.666667-17.066667 53.333333 19.2 49.066667 0 0-10.666667 10.666667 0 49.066667s27.733333 46.933333 81.066667 25.6c23.466667-8.533333 40.533333-4.266667 38.4 19.2-6.4 49.066667-42.666667 46.933333-14.933333 125.866667 17.066667 49.066667 59.733333 66.133333 76.8 104.533333 8.533333 21.333333 42.666667 38.4 70.4 53.333333 2.133333-10.666667 6.4-21.333333 8.533333-29.866667 0-4.266667 2.133333-8.533333 2.133333-12.8 2.133333-8.533333 2.133333-14.933333 4.266667-23.466667 0-4.266667 0-6.4 2.133333-10.666667 0-10.666667 2.133333-23.466667 2.133333-34.133333C896 499.2 896 488.533333 893.866667 475.733333zM748.8 601.6c-14.933333 8.533333-14.933333 29.866667-2.133333 40.533333 12.8 10.666667 38.4 25.6 46.933333 0S763.733333 593.066667 748.8 601.6zM512 42.666667C251.733333 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667zM512 938.666667C277.333333 938.666667 85.333333 746.666667 85.333333 512S277.333333 85.333333 512 85.333333c234.666667 0 426.666667 192 426.666667 426.666667S746.666667 938.666667 512 938.666667z"
p-id="6423" fill="#ffffff"></path>
</svg>
青少英语</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg t="1616240727200" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="7486" width="18" height="18">
<path d="M178 816.2h667.9v48.7H178zM712.4 652.8l-133.6-3.4V448.9c-13.8-1.2-27.6-2.5-41.5-3.4-21.9-1.4-43.7 0-65.6 0.7-8.9 0.3-17.7 0.4-26.5 0.2v205.1l-133.6-2.4c-57.2 0-133.6 50.3-133.6 109.5v23.2h668v-37.1c0-59.1-76.5-91.9-133.6-91.9z"
fill="#ffffff" p-id="7487"></path>
<path d="M512 319.4m-160.2 0a160.2 160.2 0 1 0 320.4 0 160.2 160.2 0 1 0-320.4 0Z"
fill="#ffffff" p-id="7488"></path>
</svg>
行业英语</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg t="1616240771721" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="9207" width="18" height="18">
<path d="M919.84384 210.41664H241.17248L229.40672 113.3568c-1.92-15.83616-16.5376-28.79488-32.49664-28.79488H190.464c-2.72384 0-5.30944 0.384-7.7312 1.09056H99.77344c-19.14368 0-34.81088 14.3616-34.81088 31.90784s15.6672 31.90784 34.816 31.90784H169.3184L235.7248 697.344c1.92 15.84128 16.54272 28.8 32.49664 28.8h6.4512c2.69312 0 5.25824-0.37888 7.6544-1.07008h548.82304c19.14368 0 34.80576-14.35648 34.80576-31.90784 0-17.55136-15.66208-31.90784-34.80576-31.90784H295.81824l-8.13056-67.11296h545.1776c15.95392 0 31.89248-12.72832 35.42016-28.288l74.15296-327.14752c3.52768-15.55456-6.64064-28.288-22.59456-28.288zM294.58944 865.72032c0 42.8032 34.70336 77.51168 77.51168 77.51168s77.50656-34.70336 77.50656-77.5168c0-42.8032-34.69824-77.50656-77.50656-77.50656s-77.5168 34.70336-77.5168 77.51168z m384.23552 0c0 42.8032 34.70336 77.51168 77.5168 77.51168s77.50656-34.70336 77.50656-77.5168c0-42.8032-34.70336-77.50656-77.51168-77.50656-42.8032 0-77.51168 34.70336-77.51168 77.51168z"
p-id="9208" fill="#ffffff"></path>
</svg>
在线购买</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg t="1616240800819" class="icon" viewBox="0 0 1086 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="10836" width="18" height="18">
<path d="M744.50334 99.489489a202.113314 202.113314 0 0 1 9.474062 78.950514c0 15.000598-8.684556 85.266554-6.316041 107.372698a78.950513 78.950513 0 0 0 13.421587 33.94872 157.901027 157.901027 0 0 1 0 86.845565 127.110326 127.110326 0 0 1-15.790103 45.001793c-8.684556 12.632082-26.843175 13.421587-34.738225 27.632679s0 53.686349-8.684557 73.423978-29.21169 28.422185-30.7907 62.370905l30.7907 4.737031a236.85154 236.85154 0 0 0 48.159813 78.950513l48.159813 13.421587 174.480635 75.002988c51.317834 22.106144 91.582595 30.001195 110.530718 84.477049v148.426965H0v-148.426965c21.316639-50.528329 70.265957-58.42338 121.58379-82.108533s119.215275-52.107339 175.27014-75.002988l48.159813-13.421587a236.85154 236.85154 0 0 0 48.159813-78.950514l22.895649-5.526536c-4.737031-29.21169-22.895649-31.580205-30.001195-52.107338S379.751969 502.926612 377.383454 473.714922a104.214678 104.214678 0 0 1-23.685154-5.526536c-30.001195-18.948123-30.7907-95.530121-33.948721-127.899831 0-14.211092 18.948123-26.053669 13.421587-52.896844C300.801456 129.490684 347.382258 56.066707 420.806236 31.592048a255.010158 255.010158 0 0 1 236.85154-4.737031l21.316638 21.316639 36.317236 6.316041a101.056657 101.056657 0 0 1 29.21169 45.001792z"
fill="#ffffff" p-id="10837"></path>
</svg>
全球师资</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
更多栏目
</a>
<div class="dropdown-menu bg-dark">
<a class="dropdown-item" href="#">全球师资</a>
<a class="dropdown-item" href="#">学员案例</a>
<a class="dropdown-item" href="#">免费体验</a>
<a class="dropdown-item" href="#">英语胶囊</a>
<a class="dropdown-item" href="#">精彩动态</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>
四、表单组件.
1.组件源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<title>表单组件</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jQuery.js" defer></script>
<script src="js/popper.min.js" defer></script>
<script src="js/bootstrap.bundle.js" defer></script>
<script src="js/bootstrap.min.js" defer></script>
</head>
<body>
<!------------------------------------------表单------------------------------------------>
<div class="container">
<h2>堆叠表单</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="form-group">
<label for="tel">Tel:</label>
<input type="tel" class="form-control" id="tel" placeholder="Enter Tel">
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="datetime-local" class="form-control" id="date" placeholder="Enter Date">
</div>
<div class="form-group">
<label for="num">Date:</label>
<input type="number" class="form-control" id="num" placeholder="Enter Date">
</div>
<div class="form-group">
<label for="color">Color:</label>
<input type="color" class="form-control" id="color" placeholder="Enter Date">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="container">
<h2>内联表单</h2>
<p>屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单。</p>
<form class="form-inline">
<label for="email1">Email:</label>
<input type="email" class="form-control" id="email1" placeholder="Enter email">
<label for="pwd1">Password:</label>
<input type="password" class="form-control" id="pwd1" placeholder="Enter password">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!------------------------------------------表单控件------------------------------------------>
<hr/>
<div class="container">
<h2>表单控件: input</h2>
<p>以下实例使用两个 input 元素，一个是 text，一个是 password ：</p>
<form>
<div class="form-group">
<label for="usr2">用户名:</label>
<input type="text" class="form-control" id="usr2">
</div>
<div class="form-group">
<label for="pwd2">密码:</label>
<input type="password" class="form-control" id="pwd2">
</div>
</form>
</div>
<div class="container">
<h2>多行文本，表单控件: textarea</h2>
<p>以下实例演示了 textarea 的样式。</p>
<form>
<div class="form-group">
<label for="comment">评论:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</form>
</div>
<div class="container">
<h2>表单控件: checkbox</h2>
<p>以下实例包含了三个选项。最后一个是禁用的：</p>
<form>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">选项1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">选项2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>选项3
</label>
</div>
</form>
</div>
<div class="container">
<h2>表单控件: checkbox</h2>
<p>以下实例包含了三个选项。最后一个是禁用的，使用 .form-check-inline 类可以让选项显示在同一行上：</p>
<form>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">选项1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">选项2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>选项3
</label>
</div>
</form>
</div>
<div class="container">
<h2>表单控件: radio</h2>
<p>以下实例包含了三个选项。最后一个是禁用的：</p>
<form>
<div class="radio">
<label><input type="radio" name="optradio">单选1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">单选2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>单选3</label>
</div>
</form>
</div>
<div class="container">
<h2>表单控件: radio</h2>
<p>以下实例包含了三个选项。最后一个是禁用的，使用 .radio-inline 类可以让选项显示在同一行上：</p>
<form>
<label class="radio-inline"><input type="radio" name="optradio">选项1</label>
<label class="radio-inline"><input type="radio" name="optradio">选项2</label>
<label class="radio-inline"><input type="radio" name="optradio" disabled>选项3</label>
</form>
</div>
<div class="container">
<h2>表单控件: select</h2>
<p>以下表单包含了两个下拉菜单 (select 列表):</p>
<form>
<div class="form-group">
<label for="sel1">单选下拉菜单:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for="sel2">多选下拉菜单(按住 shift 键，可以选取多个选项):</label>
<!--multiples设置为显示选项-->
<select multiple class="form-control" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
<!------------------------------------------输入框------------------------------------------>
<hr/>
<div class="container mt-3">
<h3>输入框组</h3>
<p> .input-group .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮，.input-group-prepend 类添加在前面，.input-group-append 添加在后面。</p>
<p>使用 .input-group-text 类来设置文本的样式。</p>
<form action="/action_page.php">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" id="usr" name="username">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">
<div class="input-group-append">
<span class="input-group-text">@runoob.com</span>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="container mt-3">
<h1>输入框大小</h1>
<p>使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框：</p>
<form>
<div class="input-group mb-3 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">Small</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Default</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<form>
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Large</span>
</div>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="container mt-3">
<h3>多个输入框和文本</h3>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">姓名</span>
</div>
<input type="text" class="form-control" placeholder="姓">
<input type="text" class="form-control" placeholder="名">
</div>
</form>
<form>
<div class="input-group mb-3">
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text">年</span>
</div>
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text">月</span>
</div>
<input type="number" class="form-control">
<div class="input-group-append">
<span class="input-group-text">日</span>
</div>
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
</div>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="container mt-3">
<h3>复选框与单选框</h3>
<p>文本信息可以使用复选框与单选框替代：</p>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text" class="form-control" placeholder="RUNOOB">
</div>
</form>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" class="form-control" placeholder="GOOGLE">
</div>
</form>
</div>
<div class="container mt-3">
<h1>输入框添加按钮组</h1>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Basic Button</button>
</div>
<input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-success" type="submit">Go</button>
</div>
</div>
<div class="input-group mb-3">
<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>
<div class="container mt-3">
<h3>设置下拉菜单</h3>
<p>输入框中添加下拉菜单不需要使用 .dropdown 类。</p>
<form>
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend">
<!--
dropdown-toggle：显示下拉三角
data-toggle="dropdown"：设置为下拉按钮
-->
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
选择网站
</button>
<!--
dropdown-menu：下拉菜单
dropdown-item：下拉选项
-->
<div class="dropdown-menu">
<a class="dropdown-item" href="https://www.google.com">谷歌</a>
<a class="dropdown-item" href="https://www.runoob.com">菜鸟</a>
<a class="dropdown-item" href="https://www.taobao.com">淘宝</a>
<a class="dropdown-item" href="JavaScript:;">JavaScript</a>
</div>
</div>
<input type="text" class="form-control" placeholder="网站地址">
</div>
</form>
</div>
<div class="container mt-3">
<h2>输入框组标签</h2>
<p>在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应。</p>
<p>点击标签后可以聚焦输入框：</p>
<form>
<label for="demo">这里输入您的邮箱:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<div class="input-group-append">
<span class="input-group-text">@runoob.com</span>
</div>
</div>
</form>
</div>
<!------------------------------------------下拉菜单------------------------------------------>
<hr/>
<div class="container">
<h2>下拉菜单</h2>
<p>.dropdown 类用来指定一个下拉菜单。</p>
<p>.dropdown-menu 类来设置实际下拉菜单。</p>
<p>我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
选择
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">选择 1</a>
<a class="dropdown-item" href="#">选择 2</a>
<a class="dropdown-item" href="#">选择 3</a>
</div>
</div>
</div>
<div class="container">
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="container">
<h2>下拉菜单中分割线</h2>
<p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：</p>
<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 class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
<div class="container">
<h2>下拉菜单中标题</h2>
<p>.dropdown-header 类用于在下拉菜单中添加标题：</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<h5 class="dropdown-header">标题1</h5>
<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 class="dropdown-divider"></div>
<h5 class="dropdown-header">标题2</h5>
<a class="dropdown-item" href="#">Another link</a>
</div>
</div>
</div>
<div class="container">
<h2>下拉菜单可用禁用</h2>
<p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。</p>
<p>.disabled 类禁用下拉菜单的选项</p>
<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="#">Normal</a>
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
</div>
</div>
</div>
<div class="container">
<h2>下拉菜单对齐方式</h2>
<p>如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu dropdown-menu-right">
<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">
<h2>下拉菜单弹出方向</h2>
<p>.dropup .dropdown .dropright .dropleft 类用于设置下拉菜单向（上/下/右/左）弹出：</p><br>
<!-- Default dropright button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
左下拉框
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">选项1</a>
<a class="dropdown-item" href="#">选项2</a>
<a class="dropdown-item" href="#">选项3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">选项4</a>
</div>
</div>
<!-- 双按钮下拉框 -->
<div class="btn-group dropright">
<!--显示按钮-->
<button type="button" class="btn btn-secondary">
右下拉框
</button>
<!--右边三角按钮-->
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
<a class="dropdown-item" href="#">选项1</a>
<a class="dropdown-item" href="#">选项2</a>
<a class="dropdown-item" href="#">选项3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">选项4</a>
</div>
</div>
</div>
<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 class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary 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 class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success 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 class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info 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 class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning 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 class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger 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>
</html>
2.组件案例：登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<title>登录</title>
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<script src="../js/jQuery.js" defer></script>
<script src="../js/popper.min.js" defer></script>
<script src="../js/bootstrap.bundle.js" defer></script>
<script src="../js/bootstrap.min.js" defer></script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-12 col-md-6 offset-3">
<h2 class="text-center">登录</h2>
</div>
</div>
<form>
<div class="row">
<div class="col-12 col-md-6 offset-3">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">用户名</span>
</div>
<input type="email" class="form-control" id="email" placeholder="请输入用户名">
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-12 col-md-6 offset-3">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">密码</span>
</div>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 offset-3">
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
</div>
<div class="row m-3">
<div class="col-12 col-md-6 offset-3">
<button type="button" class="btn btn-light btn-block">登录</button>
</div>
</div>
<div class="row m-3">
<div class="col-12 col-md-6 offset-3">
<button type="button" class="btn btn-light btn-block">注册</button>
</div>
</div>
</form>
</div>
</body>
</html>
五、卡片组件
1.组件源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<title>登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jQuery.js" defer></script>
<script src="js/popper.min.js" defer></script>
<script src="js/bootstrap.bundle.js" defer></script>
<script src="js/bootstrap.min.js" defer></script>
</head>
<body>
<div class="container">
<h2>简单的卡片</h2>
<div class="card">
<div class="card-body">简单的卡片</div>
</div>
</div>
<div class="container">
<h2>卡片头部和底部</h2>
<div class="card">
<div class="card-header">头部</div>
<div class="card-body">内容</div>
<div class="card-footer">底部</div>
</div>
</div>
<div class="container">
<h2>多种颜色卡片</h2>
<div class="card">
<div class="card-body">白色卡片</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">蓝色卡片</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">绿色卡盘</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">青色卡片</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">黄色卡片</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">红色卡片</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">灰色卡片</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">黑色卡片</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">浅色卡片</div>
</div>
</div>
<div class="container">
<h2>标题、文本和链接</h2>
<div class="card">
<div class="card-body">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">这是卡片内容</p>
<a href="#" class="card-link">链接1</a>
<a href="#" class="card-link">链接2</a>
</div>
</div>
</div>
<div class="container">
<h2>图片卡片</h2>
<p>图片在头部 (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image"
style="width:100%">
<div class="card-body">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">卡片内容</p>
<a href="#" class="btn btn-primary">卡片链接</a>
</div>
</div>
<br>
<p>图片在底部(card-img-bottom):</p>
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">卡片内容</p>
<a href="#" class="btn btn-primary">卡片链接</a>
</div>
<img class="card-img-bottom" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image"
style="width:100%">
</div>
</div>
<div class="container">
<h2>文字覆盖图片、图片背景卡片</h2>
<p>如果图片要设置为背景，可以使用 .card-img-overlay 类:</p>
<div class="card img-fluid" style="width:500px">
<img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image"
style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">卡片标题</h4>
<p class="card-text">卡片内容</p>
<a href="#" class="btn btn-primary">卡片链接</a>
</div>
</div>
</div>
</body>
</html>
2.组件案例：音乐排行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width">
<title>音乐排行榜</title>
<link rel="stylesheet" href="../css/bootstrap.min.css"/>
<script src="../js/jQuery.js" defer></script>
<script src="../js/popper.min.js" defer></script>
<script src="../js/bootstrap.bundle.js" defer></script>
<script src="../js/bootstrap.min.js" defer></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 col-md-2">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-6 col-md-2">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
<div class="col-md-2 col-6">
<div class="card">
<img class="card-img-top" src="../img/1.jpg">
<div class="card-body">
<p class="card-text text-center">齐秦-女人花</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
