一.按钮       

       按钮是网页中不可缺少的一种组件，例如页面中搜索、注册等按钮。按钮还广泛应用于表单、下拉菜单、模态框等场景中。

1.预定义样式类

       Bootstrap提供了btn来定义按钮，btn定义了基本的按钮样式类。此外，Bootstrap定义了多个预定义的按钮样式，每个样式都有自己的语义目的。



 

例：预定义按钮样式示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="container">
		<button type="button" class="btn btn-primary">primary</button>
		<button type="button" class="btn btn-secondary">secondary</button>
		<button type="button" class="btn btn-success">success</button>
		<button type="button" class="btn btn-danger">danger</button>
		<button type="button" class="btn btn-warning">warning</button>
		<button type="button" class="btn btn-info">info</button>
		<button type="button" class="btn btn-light">light</button>
		<button type="button" class="btn btn-dark">dark</button>
		<button type="button" class="btn btn-link">link</button>
	</body>
</html>

 结果图：

 2.设计边框颜色

     按钮设计时，如果不希望使用沉重的背景颜色，可以使用.btn-outline-*替换预定义样式类。使用.btn-outline-*类可以没置按钮的边框，*可以从prirnary、secondary、success、danger.warning、info、light和dark中进行选择。

例：设计边框颜色示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="container">
		<button type="button" class="btn btn-outline-primary">primary</button>
		<button type="button" class="btn btn-outline-secondary">secondary</button>
		<button type="button" class="btn btn-outline-success">success</button>
		<button type="button" class="btn btn-outline-danger">danger</button>
		<button type="button" class="btn btn-outline-warning">warning</button>
		<button type="button" class="btn btn-outline-info">info</button>
		<button type="button" class="btn btn-outline-light">light</button>
		<button type="button" class="btn btn-outline-dark">dark</button>
		<button type="button" class="btn btn-outline-link">link</button>
	</body>
</html>

结果图：

3.设计大小 

使用.btn-lg、.btn-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>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
    <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>
</body>

</html>

结果图：

4.激活和禁用状态 

     给按钮添加.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>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
    <button type="button" class="btn btn-primary btn-lg">原始按钮</button>
    <button type="button" class="btn btn-primary btn-lg active">激活按钮</button>
    <button type="button" class="btn btn-primary btn-lg disabled">禁用按钮</button>
</body>

</html>

结果图：

5.按钮标签

Bootstrap使用btn类来定义按钮，btn可以在<button>元素上使用，也可以在<a>、<input>元素
上使用，同样能带来按钮效果。

例：

<!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>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
    <a class="btn btn-primary" href="#" role="button">Link</a>
    <button class="btn btn-primary" type="submit">Button</button>
    <input class="btn btn-primary" type="button" value="Input">
    <input class="btn btn-primary" type="submit" value="Submit">
    <input class="btn btn-primary" type="reset" value="Reset">
</body>

</html>

结果图：

二、按钮组

如果想要将多个按钮组合放在一起，可以使用按钮组来实现。

1.定义按钮组
 将多个<a>或<button>元素放在一个含有.btn-group类容器中，便可形成一个按钮组。

例：创建一个基本按钮组

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
	<div class="btn-group">
		<button type="button" class="btn btn-secondary">1</button>
		<button type="button" class="btn btn-secondary">2</button>
		<button type="button" class="btn btn-secondary">3</button>
		<button type="button" class="btn btn-secondary">4</button>
		<button type="button" class="btn btn-secondary">5</button>
	</div>
</body>

</html>

 结果图：

 2.工具栏按钮组

根据需要使用样式定义，对按钮进行群组、间隔等定义，将按钮组的组合成为更复杂组件的按钮
工具栏。把多个基本按钮组放在一个.btn-toolbar类容器中就形成了工具栏按钮组。

例：创建一个工具栏按钮组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="container">
		<div class="btn-toolbar">
			<div class="btn-group mr-2">
				<button type="button" class="btn btn-primary">上一页</button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-secondary">1</button>
				<button type="button" class="btn btn-secondary">2</button>
				<button type="button" class="btn btn-secondary">3</button>
				<button type="button" class="btn btn-secondary">4</button>
			    <button type="button" class="btn btn-secondary">5</button>
			</div>
			<div class="btn-group ml-2">
				<button type="button" class="btn btn-primary">下一页</button>
			</div>
		</div>
	</body>
</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>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
    <div class="btn-toolbar">
        <div class="btn-group mr-2">
            <button type="button" class="btn btn-secondary">1</button>
            <button type="button" class="btn btn-secondary">2</button>
            <button type="button" class="btn btn-secondary">3</button>
            <button type="button" class="btn btn-secondary">4</button>
        </div>
        <div class="input-group">
            <div class="input-group-prepend">
                <div class="input-group-text">@</div>
            </div>
            <input type="text" class="form-control" placeholder="Input group example">
        </div>
    </div>
</body>

</html>

 结果图：

3.设计大小

Bootstrap提供了.btn-group-lg，.btn-group-sm类作用在.btn-group类的容器，可以控制按钮组下的每个子按钮，实现样式缩放。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="container">
		<div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-secondary">大号按钮组</button>
			<button type="button" class="btn btn-secondary">大号按钮组</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-secondary">默认按钮组</button>
			<button type="button" class="btn btn-secondary">默认按钮组</button>
		</div>
		<div class="btn-group btn-group-sm">
			<button type="button" class="btn btn-secondary">小号按钮组</button>
			<button type="button" class="btn btn-secondary">小号按钮组</button>
		</div>
	</body>
</html>

结果图：

4.嵌套按钮 

 将.btn-group放在另一个.btn-group里，可以实现按钮组与下拉菜单的组合。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="container">
		<div class="btn-group">
			<button type="button" class="btn btn-secondary">免费注册</button>
			<button type="button" class="btn btn-secondary">手机逛淘宝</button>
		
		<div class="btn-group">
			<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">我的淘宝</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="#">已买到的宝贝</a>
				<a class="dropdown-item" href="#">我的足迹</a>
			</div>
		</div> 
		</div>
	</body>
</html>

结果图：

 5.垂直排列

将一组按钮放在含有.btn-group-vertical类的容器中，就形成了垂直分布的按钮组。
例：

<!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>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
    <div class="btn-group-vertical">
    	<button type="button" class="btn-primary">图书</button>
    	<button type="button" class="btn-primary">家居</button>
    	<button type="button" class="btn-secondary">文具</button>
    	<button type="button" class="btn-secondary">服饰</button>
    	<div class="dropdown">
    		<button type="button" class="btn-info" data-toggle = "dropdown">食品</button>
    		<div class="dropdown-menu">
    			<button type="button" class="dropdown-item">休闲食品</button>
    			<button type="button" class="dropdown-item">生鲜食品</button>
    		</div>
    	</div>
    </div>
</body>

</html>

结果图：

 三、下拉菜单

下拉菜单是网页中常见的组件之一，Bootstrap定义了一套完整的下拉菜单组件。设计出合理，美观的下拉菜单，不仅可以合理布局页面，还可以为网页增色。
1.定义下拉菜单

下拉菜单组件应包含在.dropdown容器中，或使用
position: relative的容器。该容器包含两部分，即触发元素和下拉菜单。触发元素可以是<a>或
<button>元素，下拉菜单包含在.dropdown-menu容器中。

下拉菜单的实现思路:
当用户单击页面中选项按钮时，页面会展示当前选项下的菜单选项;
当用户再次单击页面中的该选项按钮时，页面会自动隐藏当前选项按钮下的菜单选项。

例：基本的下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="container">
		<div class="dropdown">
			<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">HTML5</a>
				<a href="#" class="dropdown-item">CSS3</a>
				<a href="#" class="dropdown-item">JavaScript</a>
			</div>
		</div>
	</body>
</html>

结果图：

 2.设置下拉菜单的样式

例：下拉菜单向右展开示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="container">
		<div class="dropright">
			<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">HTML5</a>
				<a href="#" class="dropdown-item">CSS3</a>
				<a href="#" class="dropdown-item">JavaScript</a>
			</div>
		</div>
	</body>
</html>

结果图：

例：激活和禁用菜单项示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button>
        <div class="dropdown-menu">
            <button type="button" class="dropdown-item active">HTML5</button>
            <button type="button" class="dropdown-item">CSS3</button>
            <button type="button" class="dropdown-item disabled">JavaScript</button>
        </div>
    </div>
</body>

</html>

 结果图：

例：设置下拉菜单项右对齐

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
    <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">web前端开发技术</button>
        <div class="dropdown-menu dropdown-menu-right">
            <button type="button" class="dropdown-item">HTML5</button>
            <button type="button" class="dropdown-item">CSS3</button>
            <button type="button" class="dropdown-item">JavaScript</button>
        </div>
    </div>
</body>

</html>

 结果图：

 例：菜单内容示例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body class="container">
		<div class="dropdown">
			<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
			<div class="dropdown-menu">
				<h6 class="dropdown-header">菜单标题1</h6>
				<button type="button" class="dropdown-item">菜单项1</button>
				<button type="button" class="dropdown-item">菜单项2</button>
				<div class="dropdown-divider"></div>
				<h6 class="dropdown-header">菜单标题2</h6>
				<button type="button" class="dropdown-item">菜单项3</button>
				<button type="button" class="dropdown-item">菜单项4</button>
			</div>
		</div>
	</body>
</html>

结果图：

 例：菜单内容示例2

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class="container">
    <div class="dropdown" style="max-width: 200px;">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</button>
        <div class="dropdown-menu">
            <p class="px-4">
                下面显示一个表单
            </p>
            <form class="px-4 py-2">
                <div class="form-group">
                	<label>Email address</label>
                	<input type="email" class="form-control" placeholder="email@example.com" />
                </div>
                <div class="form-group">
                	<label>Password</label>
                	<input type="password" class="form-control" placeholder="Password" />
                </div>
            </form>
        </div>
    </div>
</body>

</html>

结果图：

​​​​​​​ 

# bootstrap # 前端 # html
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生