Bootstrap学习

最新推荐文章于 2022-05-13 15:50:34 发布

老范183

最新推荐文章于 2022-05-13 15:50:34 发布

阅读量198

点赞数 1

文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_42542609/article/details/104260917

版权

之前学bootstrap的时候没写博客真是遗憾，项目做完，估计现在早都忘了bootstrap怎么用了，正好课程讲了，就身边再把笔记补一边，这里就只写怎么配置，还有我认为以前没用到，有必要记一下的东西，其实主要是给自己看的
但还是会发原创公开，毕竟想恰点积分
1.下载跳过，本机有
2.HBuilder新建个项目
在这里插入图片描述

css放到css目录下，js放到就是目录下

在页面中引入

<!DOCTYPE html>
<html>

	<head>
		<!-- 引入 Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<h1>Hello, world!</h1>
	</body>

</html>

之后用什么从文档中找，然后复制粘贴修改就ok
这里随便说几个

表格

<!DOCTYPE html>
<html>

	<head>
		<!-- 引入 Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div class="table-responsive">
			<table class="table table-hover">
				<caption>响应式表格布局</caption>
				<thead>
					<tr>
						<th>产品</th>
						<th>付款日期</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>产品1</td>
						<td>23/11/2013</td>
						<td>待发货</td>
					</tr>
					<tr>
						<td>产品2</td>
						<td>10/11/2013</td>
						<td>发货中</td>
					</tr>
					<tr>
						<td>产品3</td>
						<td>20/10/2013</td>
						<td>待确认</td>
					</tr>
					<tr>
						<td>产品4</td>
						<td>20/10/2013</td>
						<td>已退货</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>

</html>

在这里插入图片描述
table自己就有响应式
忽然觉得其实也没比EasyUi好看多少。

网格系统

看文档，说的挺清楚的。

下拉菜单

在这里插入图片描述
直接把这个代码复制，粘贴，修改就行

模态框

这个看上去挺有用的，而且我也没用过，之前项目中是用一种很蠢的方式解决的

模态框是覆盖在父窗体上的子窗体，用来显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动，子窗体可提供信息，交互等。
文档上插件里，自己复制过去改一改，就知道每个属性干嘛的了。
简单搞一搞

<!DOCTYPE html>
<html>

	<head>
		<!-- 引入 Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<!-- 按钮触发模态框 -->
		<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">去登录...</button>
		<!-- 模态框Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="myModalLabel">登录窗口</h4>
					</div>
					<div class="modal-body">用户名</div><br>
					<div class="modal-body">密码</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary">登录</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
		<script>
			$(function() {
				$('#myModal').modal('hide')
			});
		</script>
		<script>
			$(function() {
				$('#myModal').on('hide.bs.modal',
					function() {
						alert('你关闭了模态框登录窗口...');
					})
			});
		</script>
	</body>

</html>

标签页，简单易懂版

<!DOCTYPE html>
<html>

	<head>
		<!-- 引入 Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<ul id="myTab" class="nav nav-tabs">
			<li class="active">
				<a href="#page1" data-toggle="tab">
					显示面板一
				</a>
			</li>
			<li>
				<a href="#page2" data-toggle="tab">显示面板二</a>
			</li>
		</ul>
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="page1">
				<p>标签页面板一</p>
			</div>
			<div class="tab-pane fade" id="page2">
				<p>标签页面板二</p>
			</div>
		</div>
	</body>

</html>