目录
Bootstrap
BootStrap下载
官网下载:Bootstrap中文网 (bootcss.com)
推荐用BootStrap3,比较稳定
BootStrap介绍
BootStrap是一套现成的CSS样式集合(是两个推特的员工做出来的)
BootStrap特别适合没有团队的去做易用的、灵活的页面
BootStrap特点
- 好用、好看、直观
- 响应式设计、12列格网、样式向导文档
- 自定义JQuery插件(BootStrap插件是基于JQuery、Less的)
- 丰富的组件
下载BootStrap
下载路径:起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
- 建议下载BootStrap源码
- 下载后解压打开文件:在D:\bootstrap-3.4.1\bootstrap-3.4.1目录下直接复制dist文件夹将它放进你的项目文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 载入刚刚导入进来的dist包中的css -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!--如果要使用bootstrap的js插件,必须先导入jQuery包,这是我之前下好的包-->
<script src="js/jquery-3.5.1.js"></script>
<!--载入刚刚导入进来的dist包中的css-->
<script src="dist/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
JQuery安装与下载教程:(1条消息) JQuery安装与下载教程_Muchen灬的博客-CSDN博客_jquery
BootStrap在线使用
JQuery和BootStrap都有在线的使用
好处:更快更方便
坏处:要求要有网络,需要用网络加载,一般做开发都用本地文件更好
直接在官网上复制粘贴引入就好
布局容器和栅格网格系统
布局容器
- container 类用于固定宽度的容器(就是宽度两边有留白)
<div class="container">
...
</div>
- container-fluid 类用于100%宽度的容器(就是屏幕占满,不留白)
<div class="container-fluid">
...
</div>
栅格网格系统
以下部分摘自:Bootstrap 网格系统 | 菜鸟教程 (runoob.com)
什么是网格(Grid)?
摘自维基百科:
在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
简单地说,网页设计中的网格用于组织内容,让网站易于浏览,并降低用户端的负载。
什么是 Bootstrap 网格系统(Grid System)?
Bootstrap 官方文档中有关网格系统的描述:
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备、平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑、台式电脑)上的组件和网格。
- 注意:网络系统必须使用到css
-
container、row、xs(xsmall phones),sm(small tablets),md(middle desktops),lg(lager desktops) 即:超小屏(自动)、小屏(750px)、中屏(970px)和大屏(1170px)
-
数据行(row)必须包含在容器(container)中,以便为其赋予适合的对齐方式和内距(padding)
-
在行(row)中可添加列(column),只有列(column)才可以作为行容器(row)的直接元素,但列数不能超过总列数:如12,超过自动换行
-
具体内容应当放在列(column)中
<div class="container" style="background-color: rgb(73, 112, 29);height:100px ;">
<div class="row">
<div class="col-md-4" style="background-color: rgb(244, 224, 7);">占4列</div>
<div class="col-md-8" style="background-color: rgb(245, 34, 6);">占8列</div>
</div>
</div>
Bootstrap 会自动根据你的屏幕大小来找寻适合的大小,如:
<div class="container" >
<div class="row">
<div class="col-md-4 col-lg-4" >占4列</div>
<div class="col-md-8 col-lg-8" >占8列</div>
</div>
</div>
列组合
列组合简单理解为更改数字来合并列(原则:列总和不能超过12,大于12,自动换行)
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">6</div>
<div class="col-sm-6" style="background-color:orange;">6</div>
</div>
<br>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">4</div>
<div class="col-sm-4" style="background-color:orange;">4</div>
<div class="col-sm-4" style="background-color:yellow;">4</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">3</div>
<div class="col-sm-3" style="background-color:orange;">3</div>
<div class="col-sm-3" style="background-color:yellow;">3</div>
<div class="col-sm-3" style="background-color:orange;">3</div>
</div>
<br>
<div class="row">
<div class="col-3" style="background-color:yellow;">3</div>
<div class="col-3" style="background-color:orange;">3</div>
<div class="col-3" style="background-color:yellow;">3</div>
<div class="col-5" style="background-color:orange;">5</div>
</div>
</div>
测试结果:
列偏移
偏移用于增加列的左边距。
例如,如果你有一个列出现在三个Bootstrap列之间,则可以使用偏移功能。
可用于偏移的类有:
- col-xs-offset-*
- col-sm-offset-*
- col-md-offset-*
- col-lg-offset-*
假设我们要在超小显示器中向右移动一列三个Bootstrap列,我们可以使用类“col-xs-offset-2”,例如:
<div class="container-fluid">
<div class="row">
<div class="col-sm-5" style="background-color:yellow;">5</div>
<div class="col-sm-4 col-sm-offset-2" style="background-color:orange;">4</div>
</div>
</div>
测试结果:
列排序
简单理解为列的重排序,就是将列浮动起来(push向右浮动,pull向左浮动)
<div class="container-fluid">
<!--正常-->
<h5>正常</h5><hr>
<div class="row">
<div class="col-sm-1" style="background-color:yellow;">1</div>
<div class="col-sm-1" style="background-color:orange;">1</div>
<div class="col-sm-1" style="background-color:rgb(0, 110, 255);">1</div>
<div class="col-sm-1" style="background-color:rgb(30, 255, 0);">1</div>
</div>
<br>
<!--浮动-->
<h5>浮动</h5><hr>
<div class="row">
<div class="col-sm-1" style="background-color:yellow;">1</div>
<div class="col-sm-1 col-sm-push-4" style="background-color:orange;">1</div>
<div class="col-sm-1" style="background-color:rgb(0, 110, 255);">1</div>
<div class="col-sm-1 col-sm-pull-2" style="background-color:rgb(30, 255, 0);">1</div>
</div>
</div>
测试结果:
嵌套列
我们可以在布局中的任何列中创建一组新的12个Bootstrap列,以便创建嵌套列。
<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
<!-- Nesting Starts -->
<div class="row">
<div class="col-md-6 col3">
<h3>Column 4</h3>
</div>
<div class="col-md-6 col4">
<h3>Column 5</h3>
</div>
</div>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>