Bootstrap框架
一、Bootstrap简介
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JavaScript的。
二.Bootstrap 特点
(1)**跨设备、跨浏览器:**可以兼容所有现代浏览器,包括比较诟病的IE7、8。
(2)**响应式布局:**不但可以支持PC端的各种分辨率的显示,还支持移动端PAD、手机等屏幕的响应式切换显示。
(3)**提供的全面的组件:**Bootstrap提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组件,方便开发者调用。
(4)**内置 jQuery:**插件Bootstrap提供了很多实用性的jquery插件,这些插件方便开发者实现Web中各种常规特效。
(5)**支持 HTML5、CSS3:**HTML5语义化标签和CSS3属性,都得到很好的支持。
(6)**支持 LESS 动态样式:**LESS使用变量、嵌套、操作混合编码,编写更快、更灵活的CSS。它和Bootstrap能很好的配合开发。
三、栅格系统
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
参数 Bootstrap3
超小屏幕(<768px) | 小屏幕(>=768px) | 中等屏幕(>=992px) | 超大屏幕(>=1200px) | |
---|---|---|---|---|
列数 | 12 | 12 | 12 | 12 |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
最大宽度 | None(自动) | 750px | 970px | 1170px |
参数 Bootstrap4
超小屏幕(<576px) | 小屏幕(>=576px) | 中等屏幕(>=768px) | 大屏幕(>=992px) | 超大屏幕(>=1200px) | |
---|---|---|---|---|---|
列数 | 12 | 12 | 12 | 12 | 12 |
类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
最大宽度 | None(自动) | 540px | 720px | 960px | 1140px |
123
类 | 超小屏幕(<768px) | 小屏幕(>=768px) | 中等屏幕(>=992px) | 超大屏幕(>=1200px) |
---|---|---|---|---|
.visible-xs- | 可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm- | 隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md- | 隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg- | 隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden=xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm- | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md- | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg- | 可见 | 可见 | 可见 | 隐藏 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.css">
<style>
.row{
background-color: yellow;
text-align: center;
}
.row div{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<!-- bootstrap 将1行分成12列 -->
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
</div>
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
<div class="row">
<div class="col-md-12">12</div>