1.1 下拉菜单
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页编码的类型-->
<meta charset="utf-8">
<!--使用最新的支持H5浏览器内核来解析-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
<title>Bootstrap的模板</title>
<style type="text/css">
#dp{
height: 200px;
}
</style>
<!-- 导入文件：bootstrap.css -->
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="dropdown" id="dp">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
学习前端
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<!--1.标题不可点击-->
<li class="dropdown-header">
静态页面(不可点击)
</li>
<li role="presentation">
<a href="#">CSS</a>
</li>
<!--2.分割线-->
<li role="presentation" class="divider"></li>
<!--3.动态页面-->
<li class="dropdown-header">
动态页面
</li>
<li role="presentation">
<a href="#">Vue.js</a>
</li>
<li role="presentation">
<a href="#">javaScript</a>
</li>
<li role="presentation">
<a href="#">jQuery</a>
</li>
<!--4.禁用项目-->
<li role="presentation" class="disabled">
<a role="menuitem" tabindex="-1" href="#">nodejs(栏目开发中)</a>
</li>
</ul>
</div>
<!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 -->
<script src="../static/js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="../static/js/popper.js"></script>
<!-- 加载 Bootstrap的所有 JavaScript插件-->
<script src="../static/js/bootstrap.min.js"></script>
</body>
</html>
执行结果
1.2 按钮组
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页编码的类型-->
<meta charset="utf-8">
<!--使用最新的支持H5浏览器内核来解析-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap按钮组</title>
<!-- 导入文件：bootstrap.css -->
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--1.按钮组-->
<div class="btn-group" role="group" aria-label="web">
<h4>按钮组</h4>
<button type="button" class="btn btn-default">javaScript</button>
<button type="button" class="btn btn-default">jQuery</button>
<button type="button" class="btn btn-default">Vue.js</button>
</div>
<!--2.按钮工具栏-->
<div class="btn-toolbar" role="toolbar" aria-label="learning">
<h4>按钮工具栏</h4>
<div class="btn-group" role="group" aria-label="java">
<button type="button" class="btn btn-default">集合</button>
<button type="button" class="btn btn-default">多线程</button>
<button type="button" class="btn btn-default">网络编程</button>
</div>
<div class="btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">jsp</button>
<button type="button" class="btn btn-default">javaScript</button>
<button type="button" class="btn btn-default">react.js</button>
</div>
<div class="btn-group" role="group" aria-label="framework">
<button type="button" class="btn btn-default">spring</button>
<button type="button" class="btn btn-default">springBoot</button>
<button type="button" class="btn btn-default">Mybatis</button>
</div>
</div>
<!--3.按钮组大小-->
<h4>按钮组大小</h4>
<div class="btn-group btn-group-lg" role="group" aria-label="web">
<button type="button" class="btn btn-default">javaScript</button>
<button type="button" class="btn btn-default">jQuery</button>
<button type="button" class="btn btn-default">Vue.js</button>
</div><br/>
<div class="btn-group btn-group" role="group" aria-label="web">
<button type="button" class="btn btn-default">javaScript</button>
<button type="button" class="btn btn-default"
最低0.47元/天 解锁文章
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
