备注:
官网:https://v3.bootcss.com/
CDN库:http://www.bootcdn.cn/bootstrap/
引入Bootstrap有几种方式:
1.可以先将源码文件下载至本地,再通过link
引入:<link rel="stylesheet" href="css/bootstrap.css">
2.也可以通过CDN库直接复制链接
1.媒体查询
媒体查询就是可以根据设备显示器的特性(视口宽度、屏幕比例、设备方向-横向或者竖向等)为其设定CSS样式,属于响应式布局。
看下面的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: yellow;
}
@media screen and (min- 500px) {
div{
width: 200px;
height: 200px;
background: #1b6d85;
}
}
@media screen and (min- 800px) {
div{
width: 300px;
height: 300px;
background: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
当页面尺寸大于800px的时候,div的颜色就是red,
当页面尺寸大于800px的时候,div的颜色就是#1b6d85,
当页面尺寸大于800px的时候,div的颜色就是yellow.
2.布局容器
<div class="container">
.container 类用于固定宽度并支持响应式布局的容器。
</div>
<div class="container-fluid">
.container-fluid类用于 100% 宽度,占据全部视口(viewport)的容器。
</div>
3.栅格系统(系统会自动分为最多12列)
1.创建栅格系统的容器
# 每一行row包含在一个容器container中
<div class="container">
<div class="row">
...
</div>
</div>
2.创建合适的栅格系统
<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-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
# 每个row代表一行(12份)
# col-md-数字”中的“数字”从1-12中取,数字等于几,就占几份;
除了col-md-数字
之外还有其他的几种:
.c0l-xs- 无论屏幕宽度如何,单元格都在一行,宽度按照百分比设置;试用于手机;
.col-sm- 屏幕大于768px时,单元格在一行显示;屏幕小于768px时,独占一行;试用于平板;
.col-md- 屏幕大于992px时,单元格在一行显示;屏幕小于992px时,独占一行;试用于桌面显示器;
.col-lg- 屏幕大于1200px时,单元格在一行显示;屏幕小于1200px时,独占一行;适用于大型桌面显示器;
例子如下:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">屏幕分别为3种情况的时候,分别占每行的几份</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
4.排版
HTML 中的所有标题标签,<h1> 到 <h6>
均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<span class="h1">我是p标签的h1标签</span><br/><br/>
<span class="h2">我是p标签的h2标签</span><br/><br/>
<span class="h3">我是p标签的h3标签</span><br/><br/>
<span class="h4">我是p标签的h4标签</span><br/><br/>
<span class="h5">我是p标签的h5标签</span><br/><br/>
<span class="h6">我是p标签的h6标签</span><br/><br/>
刚刚学习,各位大佬如发现不足之处还请指出。