004--IDEA使用BootStrap网格
2020-02-03 本文已影响0人
糖纸疯了
1、写在前面
项目中有时候需要使用一些简单的FORM表单或者其他页面，总是不能快速的进行生成，刚好好久没有劫持到前端的学习了，在此记录学习过程
2、核心操作
- 编写BootStrap网格demo
- 编写BootStrap使用媒体查询【当前文件可以直接拷贝，然后运行，不需要下载BootStrap依赖】
3、操作步骤
3.1、编写BootStrap网格demo
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<!-- 避免中文乱码 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<div class="jumbotron text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置浏览器大小查看效果!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4" style="border: 1px solid green">
<h3>第一列</h3>
<p>菜鸟教程</p>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
<div class="col-sm-4" style="border: 1px solid gray">
<h3>第二列</h3>
<p>菜鸟教程..</p>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
<div class="col-sm-4" style="border: 1px solid blue">
<h3>第三列</h3>
<p>菜鸟教程..</p>
<p>学的不仅是技术，更是梦想！！！</p>
</div>
</div>
</div>
<div class="container" style="border: 1px solid gold">
<div class="row">
<div class="col-sm-4" style="border: 1px solid red">左</div>
<div class="col-sm-4" style="border: 1px solid red ">中</div>
<div class="col-sm-4" style="border: 1px solid red ">右</div>
</div>
<div class="row">
<div class="col-sm-4" style="border: 1px solid green">左</div>
<div class="col-sm-4" style="border: 1px solid green ">中</div>
<div class="col-sm-4" style="border: 1px solid green ">右</div>
</div>
</div>
<div class="container" style="border: 1px solid rebeccapurple">
<div class="row">
<div class="col-sm-6" style="border: 1px solid red">左</div>
<div class="col-sm-6" style="border: 1px solid red ">右</div>
</div>
<div class="row">
<div class="col-sm-6" style="border: 1px solid green">左</div>
<div class="col-sm-6" style="border: 1px solid green ">右</div>
</div>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 【本地】包括所有已编译的插件 -->
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- 【远程】直接实用远程的bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
3.2、编写BootStrap使用媒体查询
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<!-- 避免中文乱码 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.my_div{
border: 1px solid red;
}
/*屏幕小于780时，边框变成黑色*/
@media screen and (max-width:780px) {
.my_div {
border: 1px solid black !important;
}
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<div class="jumbotron text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置浏览器大小查看效果!</p>
</div>
<div class="my_div">
进行自定义div展示，使用【媒体查询功能】，屏幕小于780时，边框变成黑色
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 【本地】包括所有已编译的插件 -->
<!--<script src="js/bootstrap.min.js"></script>-->
<!-- 【远程】直接实用远程的bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
