Day01:
1.container类用于固定宽度并支持响应式布局的容器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> //用于IE浏览器 <meta name="viewport" content="width=divice-width0,initial-scale=1"> //获取当前设备窗口大小，并调整网页大小与之1：1 <title>这是第一个Bootstrap网页</title> <link href="bootstrap.min.css" rel="stylesheet"> //引入本地bootstrap压缩版css样式文件 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> //引入IE9浏览器配置文件 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> //引入IE9浏览器配置文件 </head> <body> <div class="container"> //给div添加一个作为容器的类名，这个类在bootstrap里有样式 <p>你好!!!</p> </div> <script src="jquery-2.2.1.min.js"></script> //添加jquery的js文件 <script src="bootstrap.min.js"></script> //添加bootstra的js文件 </body> </html>
真正开发一般不会引用本地bootstrap的js，css文件
而是下面这三个网上的连接
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
1.container-fluid类 用于 100% 宽度，占据全部视口（viewport）的容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name ="viewport" content ="width=device-width,inital-scale=1">
<title>全局css样式</title>
<link href = "../bootstrap.min.css" rel = "stylesheet">
</head>
<body>
<div class = "container-fluid">
<p>内容哈哈啊哈哈</p>
<a href="">hello</a>
</div>
</body>
</html>2.栅格系统
- 一行只能有12列，多一列就到下一行。
- [class*="col-"]{} 类名模糊匹配
- rgba :red gree blue 透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href = "../bootstrap.min.css" rel="stylesheet">
<style>
.row{
margin-bottom:20px;
}
.row .row{
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom:15px;
background-color: #eeeeee;
border:1px solid #dddddd;
background-color: rgba(86,61,124,.15);
border:1px solid rgba(86,61,124,.2)
}
</style>
</head>
<body>
<div class = "container">
<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>
</body>
</html>
前端 js css bootstrap