目录
一、Bootstrap
1、简介
Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架,具有简单、灵活的特性,拥有样式库、组件和插件。常用来开发响应式布局和移动设备优先的web项目,能够帮助开发者快速搭建前端页面。
2、组成
(1)基本结构:栅格系统
(2)丰富的CSS样式库:只需要改变标签的class属性值,就可以给标签应用不同的样式
(3)布局组件:有丰富的组件库
(4)插件:基于jQuery的插件,功能强大
3、浏览器
内核:Blink,WebKit、Trident
4、视口(Viewport)
视口:能将大分辨率尺寸网页缩小在手机浏览器
(1)布局视口(layout viewport ):是指网页的宽度
(2)视觉视口(visual viewport):是指用户正在看到的网站的区域,这个区域的宽度等同于移动设备的浏览器窗口的宽度。
(3)理想视口(ideal viewport):是指对设备来讲最理想的视口尺寸
(4)视口的设置:在<meta>标签中,将name属性设为viewport,即可设置视口。在终端中以理想视口打开网页
5、分辨率
6、可缩放矢量图形(SVG)
可缩放矢量图形(Scalable Vector Graphics,SVG)是一种开放标准的描述矢量图形的语言,它基于XML(可扩展标记语言)
(1)SVG使用标签的方式定义各种图形,外层标签是<svg>
(2)它的属性主要包括x、y、width、height,用数字表示,每个数字之间用空格或逗号隔开,表示定义一个在左上角(x、y)坐标位置,宽度为width,高度为height的矩形
二、BootStrap的环境配置
1、页面中导入本地文件
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>
2、使用CDN加速器
(1)CDN的全称是Content Delivery Network,即内容为分发网络。其基本思路是尽可能避开互联网上有可能影像数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。
(2)用法:(前提是必须联网)
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
三、BootStrap的全局的CSS样式
1、布局容器
(1)container:用于固定宽度并支持相应式布局的容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
div{
width: 300px;
height: 180px;
background-color:rgb(255, 120, 145);
}
</style>
<body>
<br><br>
<div class="container"></div>
</body>
</html>
(2)container-fluid:类用于 100% 宽度,占据全部视口(viewport)的容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
div{
width: 300px;
height: 180px;
background-color:rgb(255, 120, 145);
}
</style>
<body>
<br><br>
<div class="container-fluid"></div>
</body>
</html>
2、文字排版样式
class=“ text-left ” | 文字左对齐 |
class=“ text-right ” | 文字右对齐 |
class=“ text-center ” | 文字居中对齐 |
class=“ text-justify ” | 文字两端对齐 |
class=“ text-nowrap ” | 禁止文本换行 |
3、设置字母的大小写
class = “text-lowercase” | 字母小写 |
class = “text-uppercase” | 字母大写 |
class = “text-capitalize” | 首字母大写 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
div{
width: 300px;
height: 180px;
background-color:rgb(156, 210, 245);
}
</style>
<body>
<br><br>
<div class="container text-center text-uppercase">
西安邮电大学
abcd
</div>
</body>
</html>
4、列表样式
(1)无样式列表
class = “list-unstyled”
(2)内联列表
class = “list-inline”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
div{
width: 300px;
height: 180px;
background-color:rgb(156, 210, 245);
}
</style>
<body>
<br><br>
<ul class="list-inline">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body&g