目录
一.什么是Bootstrap
- Booststrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序
- 它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速的创建一致性和现代外观的页面布局和UI组件
- Bootstrap最初由Twitter的一些工程师创建，旨在简化Web开发的过程
- 它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求
- 使用Bootstrap，开发人员可以更加专注于网站或应用程序的功能和逻辑，而不必从头开始编写CSS样式和设计页面布局
- 它提供了响应式布局的支持，使得页面能够自适应不同的设备和屏幕尺寸
- 此外，Bootstrap还提供了丰富的UI组件（如导航栏、按钮、表单、模态框等），使开发人员能够轻松地在项目中使用这些现成的组件
- 总而言之，Bootstrap是一个强大的开发工具，可以帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序
二.Bootstrap引入
1.CDN加速链接
压缩文档链接引入：
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js
2.注意
- 网络连接引入在本地不会提示相关的补充
- 下载本地文档较为友好
Bootstrap的js代码是基于jQuery的
在使用bootstrap做动态效果时一定要引入jQuery!!!
三.布局容器
布局容器是指用于组织和排列其他元素的容器或容器类，在前端开发中，常用的布局容器有以下三种：
1.块级布局容器
- 块级布局容器会生成一个块级框，它可以使用display属性设置为"block"、"flex"或者"grid"。块级容器会独占一行，并通过CSS属性进行自上而下的垂直排列。
2.留白
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.c1 {
height: 1000px;
width: 1000px;
background-color: red;
}
.c2 {
height: 1000px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div class="container c1"></div> /*左右两侧有留白*/
<div class="container-fluid c2"></div> /*左右两侧没有留白*/
</body>
</html>四.栅格系统
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 本地 链接 引入方法 -->
<!-- Websource 文件夹 拷贝到当前文件夹下即可使用 -->
<script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script>
<script src="Websource\Bootstrap\js\bootstrap.min.js"></script>
<link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css">
<!-- CDN 链接 引入方法 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script>
<style>
.c1 {
height: 100px;
background-color: red;
border: 5px solid black;
}
.c2 {
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
</div>
</div>
</body>
</html>五.栅格参数
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 |
针对不同的显示器，要加上不同的参数
六.按钮组
1.颜色
javascript
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>2.大小
javascript
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>七.图片
1.形状
javascript
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">2.颜色
javascript
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>3.清除浮动
javascript
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}八.图标
span标签
javascript
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>可以改颜色（操作普通文本方法相同）
javascript
<script>
.c {color:red;}
</script>