bootstrap guide

bootstrap

- 1. bootstrap 简单介绍
- 2. demo演示
- 3. 关于bootstrap使用注意的点

1. bootstrap 简单介绍

起源

 来自Twitter，是目前最受欢迎的前端框架。基于HTML、CSS、Javascript。Bootstrap js组件依赖于jquery 3.X简洁灵活，使得Web开发更加快捷。

官网
https://getbootstrap.com/
中文文档网站
https://v3.bootcss.com/
cdn引入

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"><!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

页面引入

	// css样式<link rel="stylesheet" href="css/bootstrap.css" />// bootstrap js组件 依赖jQuery<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>// bootstrap js组件操作<script type="text/javascript" src="js/bootstrap.js" ></script>

2. demo演示

下拉框按钮组件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../css/bootstrap.css" /><script type="text/javascript" src="../../js/jquery-3.4.1.js" ></script><script type="text/javascript" src="../js/bootstrap.js" ></script><script>$(function() {// ready..});</script></head><body><!-- 下拉框按钮 --><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">do sth.. <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">菜单</a></li><li><a href="#">跳转</a></li><li><a href="#">修改</a></li><li role="separator" class="divider"></li><li><a href="#">新增</a></li></ul></div></body>
</html>

2. js插件（结合jQuery）模态框 modal

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../css/bootstrap.css" /><script type="text/javascript" src="../../js/jquery-3.4.1.js" ></script><script type="text/javascript" src="../js/bootstrap.js" ></script><script>$(function() {// ready..$("#save").on("click", function() {// 隐藏模态框$("#myModal").modal("hide");});});</script></head><body><!-- Button trigger modal  按钮触发模态框 data-target:取到对应的模态框--><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">弹出模态框</button><!-- Modal 模态框 不显示 通过js触发 弹出 --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">请填写您的信息</h4></div><div class="modal-body">wirte some html code... <br/>email: <input type="text" /></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" id="save">保存</button></div></div></div></div></body>
</html>