bootstrap

时间:2021-11-17 10:40:58

访问Bootstrap中文网,下载bootstrap中文文档,选择用于生产环境的bootstrap。

在官网使用ctrl+f查找想要的内容。

这里记一下Visual Studio Code软件的用法:

可以点击  F1——sni——html打开html.json文件,里面可以配置常用的代码,

引入文档:

 <!DOCTYPE html>
<html>
<head>
<title>bootstrap入门</title>
<meta charset="UTF-8"> <!--不能乱码-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--手机设备可以正常显示-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<!--引入bootstrap.min.css文件-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!--需要先引入jQuery,如果本地没有jQuery,可以在网上搜索一下,使用http在线的jQuery-->
<script src="js/bootstrap.min.js"></script>
<!--引入bootstrap.min.js文件-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<link rel="stylesheet" href="css/index.css"/>
<!--引入自己写的css-->
</head>
<body>
<div class="container lie">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-8 col-xs-10 ">
<div class="col-md-6 son">
<h2>标题1</h2>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-8 col-xs-10 col-xs-push-1 col-sm-push-1">.col-md-6</div>
</div>
</div>
</body>
</html>