bootstrap框架基础使用
bootstrap简介
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。
bootstrap引入和使用
网络引用
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
在这里,你必须引入三个文件,分别是jquery.js、bootstrap.min.js和bootstrap.min.css。这三个文件用于构建bootstrap模板,只有引入了这三个文件,才可以正常使用bootstrap
本地引用
进入bootstrap中文网:https://www.bootcss.com/
下载中文文档
下载之后压缩,会有三个文件夹:
把文件夹添加到项目目录中,然后本地引入
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<!-- 引入bootstrap css文件 -->
<link href="./css/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jquery文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 引入bootstrap js文件 -->
<script src="js/js/bootstrap.min.js"></script>
因为bootstrap的效果都是基于jquery,所以必须引入jquery文件
bootstrap基础
- 实际上,随着移动端的兴起和火热,大众对移动设备的需求也越来越高,而bootstrap就是针对的移动端和pc端结合的响应式框架,它可以使你的代码可以“一套代码,多端使用”。使用起来更加的方便和快捷。
- 响应式就是指,在不同的屏幕比例下,bootstrap可以通过响应式而使页面更加完整的显示出来。
bootstrap组成
bootstrap布局时,实际上就是将屏幕分为12格,然后通过自己的需求来规定如何布局
bootstrap使用时分为四种情况:
1、.col-xs-* 超小设备屏幕(<768px)
2、.col-sm-* 小型设备&平板电脑屏幕(≥768px)
3、.col-md-* 中型设备&台式电脑屏幕(≥992px)
4、.col-lg-* 大型设备&台式电脑屏幕(>=1200px)
实例:
(显示在大型屏幕下显示一排三张图片;中型屏幕下显示一排两张;小型一排显示一张)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css/bootstrap.min.css"/>
<title></title>
</head>
<style type="text/css">
/* 图片格式 */
img{
width: 300px;
height: 300px;
}
p{
font-size: 40px;
}
</style>
<body>
<div class="container"> <!-- 定义一个bootstrap容器 -->
<div class="row"> <!-- 定义行 -->
<div class="col-lg-4 col-md-6 col-sm-12"> <!-- lg--大型屏幕下所占格数; md--中型; sm--小型; -->
<img src="img/kb1.jpg" >
<p>kb1</p>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="img/kb2.jpg" >
<p>kb1</p>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="img/kb3.jpg" >
<p>kb1</p>
</div>
</div>
</div>
</body>
<script src="js/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</html>
结果如下:
大于1200px屏幕大小时:
大于992px小于1200px屏幕大小时:
小屏幕时(750px):
这样,就可以一套代码在不同的终端显示不同的样式格式了
bootstrap组件
bootstrap的组件包括无数可复用的组件,其中包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
在bootstrap中文网中,有bootstrap的组件库,组件库中的组件可以直接复制使用,在需求不太一样的时候,稍微改一下代码就可以了,并且组件都是响应式的。