入门Bootstrap框架，满满案例实战“开箱即用”直接复制~
Posted 李猫er
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了入门Bootstrap框架，满满案例实战“开箱即用”直接复制~相关的知识，希望对你有一定的参考价值。
前言
Bootstrap 是一个全球比较流行好用的Web前端开发框架之一，它的强大之处在于它将常见的CSS布局小组件和javascript插件进行完整且完善的封装，即使没有经验的前端工程师和写页面样式灰常头疼的后端工程师，也能迅速掌握使用，大大的提高了开发效率。如果你不会Vue，使用Element-UI可能是有点蒙蒙的，这时候Bootstrap可能是你的另外一个选择。简单，方便，接下来，直接运用吧。
Bootstrap 源码
Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。
不废话，直接用！
布局容器
Bootstrap提供了两种布局容器效果，想要引用Bootstrap的布局效果和Bootstrap的栅格系统效果页面需要包裹在一个 类名为.container或者.container-fluid的div容器中。
<div class="container">
...
</div>
.container-fluid类用于 100% 宽度，占据全部页面/屏幕视口（viewport）的容器，而container则居中在页面/屏幕视口的中间。
<div class="container-fluid">
...
</div>
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。
其中“行（row）”必须包含在.container（固定宽度）或 .container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列，即换行。
栅格系统布局实例
<!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 之栅格系统布局实例</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.row1 {
padding-top: 30px;
height: 300px;
}
.litle {
color: rgb(42, 170, 236);
}
@media (max-width: 768px) {
img {
width: 50%;
}
li {
margin-left: 30px;
font-size: 14px;
}
h2 {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row row1">
<div class="col-md-4 col-xs-12 text-center">
<img src="img/cont1.png" alt="" class="img">
<h2 class="litle">SAE</h2>
<p>云应用</p>
</div>
<div class="col-md-8 col-xs-12">
<h3>应用开发、优化及运行的PaaS云计算平台</h3>
<p>国内第一家公有云计算平台，支持php. Java. Python语言，提供Web应用开发所需的众多服务，国内最好的PaaS云计算平台</p>
<div class="row">
<ul class="col-md-6 col-xs-12">
<li>弹性扩展，负载均衢智能应对大数据处理请求</li>
<li>沙箱技术隔高应用</li>
<li>沙箱技术隔高应用</li>
<div></div>
</ul>
<ul class="col-md-6 col-xs-12">
<li>防火墙防止攻击</li>
<li>99.95%SLA首批可信云认证</li>
<li>免费配赖，零成本创业、</li>
</ul>
</div>
<a href="#">了解详情</a>
</div>
</div>
<div class="row row1">
<div class="col-md-4 col-xs-12 col-md-push-8 text-center">
<img src="img/cont2.png" alt="" class="img">
<h2 class="litle">SAE</h2>
<p>云应用</p>
</div>
<div class="col-md-8 col-xs-12 col-md-pull-4 ">
<h3>应用开发、优化及运行的PaaS云计算平台</h3>
<p>国内第一家公有云计算平台，支持PHP. Java. Python语言，提供Web应用开发所需的众多服务，国内最好的PaaS云计算平台</p>
<div class="row">
<ul class="col-md-6 col-xs-12">
<li>弹性扩展，负载均衢智能应对大数据处理请求</li>
<li>沙箱技术隔高应用</li>
<li>沙箱技术隔高应用</li>
</ul>
<ul class="col-md-6 col-xs-12">
<li>防火墙防止攻击</li>
<li>99.95%SLA首批可信云认证</li>
<li>免费配赖，零成本创业、</li>
</ul>
</div>
<a href="#">了解详情</a>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
</body>
</html>
导航条&轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
.btn_register,
.btn_login {
background-color: #222222;
color: rgb(131, 131, 131);
}
@media (max-width:768px) {
.list {
float: left;
position: absolute;
top: 0;
left: 50%;
}
.list li {
float: left;
top: 0;
left: 50%;
}
}
.navbar {
background-color: black;
}
.navbar {
border-radius: 0px;
}
.navbar-nav a:hover {
color: #fff;
}
#mycegeneric {
transform: translate(0px, -20px);
}
.navbar-right a {
color: #fff;
background-color: rgb(41, 204, 136);
}
</style>
<script>
$(function () {
$('.carousel').carousel({
interval: 2000
});
});
</script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="nav-brand">
<img src="img/logo.png">
</a>
</div>
<div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
<ul class="nav navbar-nav ">
<li><a href="#">首页<span class="sr-only"></span></a></li>
<li><a href="#">品牌故事</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="list nav navbar-right">
<a href="" class="btn navbar-btn btn_login" data-toggle="modal" data-target="#login_modal">登录</a>
<a href="" class="btn navbar-btn btn_register" data-toggle="modal" data-target="#register_modal">注册</a>
</div>
</div>
</nav>
<div id="mycegeneric" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycegeneric" data-slide-to="0" class="active"></li>
<li data-target="#mycegeneric" data-slide-to="1"></li>
<li data-target="#mycegeneric" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner (1).jpg">
<div class="carousel-caption"></div>
</div>
<div class="item流明无法开箱即用
Spring Boot 揭秘与实战 源码分析 - 开箱即用，内藏玄机