bootstrap框架基础知识点整理
Posted 大忽悠爱忽悠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap框架基础知识点整理相关的知识，希望对你有一定的参考价值。
bootstrap框架
基本模板及代码注释
<!doctype html>
<html lang="zh-CN"><!--当前html页面使用中文简体-->
<head>
<meta charset="utf-8"><!--设置html页面的字符集-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--使用IE最新的渲染模式，展示页面-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
viewport:视口，浏览器网页上的可视区域
视口作用:用于移动设备将大型页面进行比例缩放演示
以下设置只在移动设备上生效
width=device-width:设置视口的宽度 device-width:设备宽度
initial-scale=1:初始化缩放设置 移动设备打开网页时的缩放级别 100% 正常
1~5
-->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 javascript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery-1.11.3.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
视口设置
视口常见的设置:
布局容器
布局容器帮助手册网址链接
注意: 任意元素使用了布局容器的样式，都会称为布局容器，建议使用div作为布局容器
布局容器之container
特点： 居中，两端有留白
代码:
<!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>模板1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--布局容器1： container-->
<div class="container" style="border: 3px solid red;">
11111
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
布局容器2—container-fluid
特点: 占据了视口100%的宽度
代码:
<!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>模板1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--布局容器2： container-fluid -->
<div class="container-fluid" style="border: 3px solid red;">
11111
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
栅格系统
栅格系统帮助文档链接
栅格系统的特点和案例
案例演示:
<!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>模板1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--定义一个布局容器-->
<div class="container">
<!--在布局容器中定义一行-->
<div class="row">
<!--在行上，定义列-->
<!--lg是当前pc屏幕尺寸，是固定的-->
<div class="col-lg-2" style="border: solid 2px red;">
当前元素占两列
</div>
<div class="col-lg-4" style="border: solid 2px red;">
当前元素占四列
</div>
<div class="col-lg-4" style="border: solid 2px red;">
当前元素占六列
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
注意点
- 列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上
- 列元素的占用列数，定义列元素的大小
- 如果列元素的占用列数，总和小于等于12，这些列元素还排列在一行上
- 如果列元素的占用列数，总和大于等于12，大于12的列元素会另起一行排列
- 栅格是可以进行无限嵌套的： 行----列----行—列…
- 一行有十二列，指的是一个row元素下有十二列
栅格屏幕尺寸设置----响应式开发
屏幕尺寸简述:
- large: lg -----大屏幕，一般的pc尺寸
- medium: md -----中等屏幕，小pc尺寸
- small: sm ------小屏幕,ipad尺寸
- x small: xs -----超小屏幕，智能手机屏幕
如果没有设置当前屏幕的样式，默认一个元素占据一行
设置为xs时:
<!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>模板1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4" style="border: solid 2px red;">
当前元素占两列
</div>
<div class="col-xs-4" style="border: solid 2px red;">
当前元素占四列
</div>
<div class="col-xs-4" style="border: solid 2px red;">
当前元素占六列
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
多个屏幕尺寸共同设置
方法1：
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
完整代码演示:
<!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>模板1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
当前元素占四列
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
当前元素占四列
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="border: solid 2px red;">
当前元素占四列
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</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>模板1</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4" style="border: solid 2px red;">
当前元素占四列
</div>
<div class="col-xs-4" style="border: solid 2px red;">
当前元素占四列
</div>
<div class="col-xs-4" style="border: solid 2px red;">
当前元素占四列
</div>
</div>
</div>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
栅格系统列偏移
列偏移帮助文档链接
代码演示:
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewportJava集合框架基础知识整理