一、关于bootstrap
bootstrap是Twitter公司推出的一款相对流行的前端框架，使用bootstrap可以快速搭建整洁大方、美观、可响应的用户界面。
[响应式布局]：同一套代码可以适应不同分辨率的设备。bootstrap使用栅格系统来实现。container>row>col···：容器>行>列。
二、Bootstrap开发包的结构
css：该文件夹提供了bootstrap预先定义好的css样式，方便开发者轻松地使用，从而迅速搭建用户界面。
js：该文件夹提供了支持bootstrap所需的JavaScript文件，例如使用响应式导航，必须要导入bootstrap.min.js文件。注意：由于bootstrap是基于jQuery的，使用bootstrap.min.js文件之前一定要先导入JQuery文件。
fonts：该文件夹提供了许多bootstrap的字体文件，可以轻松使用bootstrap中提供的图标。
小贴士：文件拓展名含min的是经过压缩的文件，建议导入含min的bootstrap文件。经过压缩后，文件能够更快加载，既安全又能够提升性能。
使用bootstrap将bootstrap在官网下载用于生产的开发包解压复制在项目下即可，在HBuilder环境中目录如下：
三、尝试建议第一个bootstrap项目
按照步骤，依次在头文件head中使用link标签、script标签导入bootstrap.min.css、jQuery.3.5.1min.js、bootstrap.min.js这三个文件。
bootstrap中，row左右各带15px间距。若想去除：margin-left:-15px;
上述的container、row、col其实都是css中的样式类名。依照不同分辨率的设备，列分为了col-sm-x(小屏幕),col-lg-x(大屏幕)、col-sm-md-x(中屏幕)。
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个bootstrap项目</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jQueryv3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
h1
{
background: lime;
height: 100px;
line-height: 100px;
color: white;
font-size: 50px;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>你好，Bootstrap！</h1>
</div>
</div>
</div>
</body>
</html>
更多推荐
使用Bootstrap搭建响应式布局
发布评论