Bootstrap-组件

最新推荐文章于 2022-12-21 18:08:39 发布

guardwhy

最新推荐文章于 2022-12-21 18:08:39 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/112253484

版权

10.1 下拉菜单代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> &

摘要由CSDN通过智能技术生成

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元/天解锁文章

guardwhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-组件

10.1 下拉菜单代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
复制链接

扫一扫