- 💂 个人主页:爱吃豆的土豆
- 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
- 🏆人必有所执，方能有所成！
- 🌈欢迎加入社区，福利多多哦！土豆社区
- 🐋希望大家多多支持😘一起进步呀！
目录
BootStrap
概述及导入
BootStrap前置知识（了解）
BootStrap布局容器及栅格【阶段重点】
布局容器
栅格（核心）
BootStrap响应式工具及列表
BootStrap
概述及导入
目标：
1，知道什么是响应式开发
2，知道如何搭建bootStrap环境
为了进行敏捷开发，为了更快搭建页面，为了让书写的网页可以在各个终端进行展示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
</body>
</html>
|
BootStrap前置知识（了解）
BootStrap布局容器及栅格【阶段重点】
布局容器
目标：可以掌握BootStrap中布局系统
BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。相当于一个画板。
帮助手册位置：全局CSS样式-------》概览--------》布局容器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
div{
border:2px solid red;
}
</style>
</head>
<body>
<div class="container">
要求：居中，两端有留白
</div>
<div class="container-fluid">
要求：占据视口100%宽度
</div>
</body>
</html>
|
布局容器：相当于BootStrap的一个画板，所有的bootStrap组件都建议放置于此。
BootStrap操作时，就是使用class进行赋值，就可以引入BootStrap样式。
栅格（核心）
栅格是通过数格子来完成一行的布局的。
col-lg-? 在这一行占用?列
col-lg-? 书写顺序决定在这一行的占用位置
示例1：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
div{
border:1px solid red;
height:100px;
}
</style>
</head>
<body>
<!--要求：一个元素占一行-->
<div class="container">
<div class="row">
<div class="col-lg-12" style="border: 1px solid blue;">
11111111111111
</div>
</div>
</div>
</body>
</html>
|
示例2：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
div{
border:1px solid red;
height:100px;
}
</style>
</head>
<body>
<!--要求：三个元素平分一行-->
<div class="container">
<div class="row">
<div class="col-lg-4" style="border: 1px solid blue;">
11111111111111
</div>
<div class="col-lg-4" style="border: 1px solid blue;">
22222222222222
</div>
<div class="col-lg-4" style="border: 1px solid blue;">
33333333333333
</div>
</div>
</div>
</body>
</html>
|
改变视口，就相当于改变屏幕尺寸就会在 四个屏幕尺寸之间切换。
若需要设置一个尺寸，同步其他屏幕，就需要设置xs
若需要设置一个尺寸，不影响其他屏幕，就需要设置lg
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
div{
border:1px solid red;
height:100px;
}
</style>
</head>
<body>
<!--要求：三个元素平分一行，各个尺寸下 lg md sm xs-->
<div class="container">
<div class="row">
<div class="col-xs-4" style="border: 1px solid blue;">
11111111111111
</div>
<div class="col-xs-4" style="border: 1px solid blue;">
22222222222222
</div>
<div class="col-xs-4" style="border: 1px solid blue;">
33333333333333
</div>
</div>
</div>
</body>
</html>
|
答案：
<div class="container">
<div class="row">
<div class="col-md-6">
11
</div>
<div class="col-md-6">
22
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
div{
border:1px solid red;
height:100px;
}
</style>
</head>
<body>
<!--要求：元素居中展示
-->
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">111111</div>
</div>
</div>
</body>
</html>
|
BootStrap响应式工具及列表
目标：通过学习响应式工具，熟练使用不同屏幕尺寸下，元素显示和隐藏效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
div{
border:1px solid red;
height:100px;
}
</style>
</head>
<body>
<!--要求：中间元素在大尺寸屏幕可见
-->
<div class="container">
<div class="row">
<div class="col-xs-4">111111</div>
<div class="col-xs-4 visible-lg">222222</div>
<div class="col-xs-4">333333</div>
</div>
</div>
</body>
</html>
|
<ul class="list-inline">
<li>爱</li>
<li>吃</li>
<li>土</li>
<li>豆</li>
</ul> |
