下载别人写好的代码,然后在我们自己的文件导入
css
font
js
这三个文件夹放到项目目录即可下载jquery
:由于bootstrap这个框架里面的js代码使用的是一个js框架叫做jquery,所以我们还需要单独下载jquery,它的下载地址是:https://code.jquery.com/jquery-1.12.4.min.jsstyle.css
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
bootstrao官方模板
:不推荐使用,太过于冗余,有些用不上的也写上了自定义bootstrap模板
:推荐使用,简洁明了官方模板
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
自定义模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 要使用bootstrap,需要导入三个文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- 官网复制粘贴一段代码测试一下模板是否生效 -->
<div class="h1">你好,世界</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0"
aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</body>
</html>
default
:默认 纯白色link
:链接 a标签默认颜色success
: 淡绿色(成功/确定) #dff0d8info
:天蓝色(信息) #5bc0de warning
:橘橙色(提示/警告) #f0ad4e danger
:酒红色(失败/错误) #d9534f primary
:青色(重要) #337ab7 lg
: 大尺寸,对应大屏pc ,在栅格系统响应式布局中对应的屏幕是 >= 1200pxmd
:中尺寸,对应大屏平板ipadPro和小屏pc,在栅格系统响应式布局中对应的屏幕是 [992,1200)sm
:小尺寸,对应平板ipad,在栅格系统响应式布局中对应的屏幕是 [768,992)xs
:超小尺寸,对应手机移动端,在栅格系统响应式布局中对应的屏幕是<= 768版心容器container
(相当于html页面的container版心,相当于table表格)row
(相当于html页面的父盒子模型,相当于table中的tr)col
(相当于html页面的子盒子模型,相当于table中的tr)3.栅格样式的核心原理
继承版心的宽度
col-s-x
lg
:大栅格,这种栅格在屏幕宽度大于等于1200
时可以排成一行,小于1200时每个栅格独占一行md
:中栅格,这种栅格在屏幕宽度大于等于992
时可以排成一行,小于992时每个栅格独占一行sm
:小栅格,这种栅格在屏幕宽度大于等于768
时可以排成一行,小于768时每个栅格独占一行xs
:超小栅格,这种栅格所有屏幕宽度下都会排成一行col-设备类型-数字(宽度比例 1 = 屏幕 1/12)
col-lg-6
:表示该栅格在屏幕宽度大于等于1200
时,占的宽度比例是6份( 6/12 = 0.5 相当于width:50%)。一旦屏幕宽度小于1200,单独一行(x的尺寸直接失效)col-lg-3
:表示该栅格在屏幕宽度大于等于1200
时,占的宽度比例是3份( 3/12 = 0.25 相当于width:25%)。一旦屏幕宽度小于1200,单独一行(x的尺寸直接失效)col-md-4
:表示该栅格在屏幕宽度大于等于992
时,占的宽度比例是4份( 4/12 = 0.33 相当于width:33.3% 三分之一)。一旦屏幕宽度小于992,单独一行(x的尺寸直接失效)col-sm-2
:表示该栅格在屏幕宽度大于等于768
时,占的宽度比例是2份( 2/12 = 0.167 相当于width:16.7%,六分之一)。一旦屏幕宽度小于768,单独一行(x的尺寸直接失效)col-xs-8
:表示该栅格在任何屏幕下,占的宽度比例是8份( 8/12 = 0.667 相当于width:66.7%,三分之二)。col-lg-3 col-md-4
:(1)表示该栅格在屏幕宽度 >= 1200时,占3份(宽度四分之一),(2)在992<=屏幕宽度<1200时,占4份(宽度三分之一),(3) <=992 直接显示一行col-lg-3 col-md-4 col-sm-6
:(1)表示该栅格在屏幕宽度 >= 1200时,(2)占3份(宽度四分之一),(3)在992<=屏幕宽度<1200时,占4份(宽度三分之一), <=992,(4)在 768<= 屏幕宽度 < 992时,占6份(二分之一),(5) <768,直接显示一行响应式版心容器
流式版心容器
/* 需求: 产品经理要求的版心与默认版心不一致?
(1)>1200 要求版心1100
(2)600 - 800之间 要求版心700
解决方案:使用媒体查询覆盖默认的版心
*/
@media(min-width:1200px){
.container{
width: 1100px;
}
}
@media(min-width:600px) and (max-width:800px){
.container{
width: 700px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导入bootstrap -->
<!-- 1.jquery.js -->
<script src="./bootstrap/js/jquery-1.12.4.min.js"></script>
<!-- 2.bootsrap.js -->
<script src="./bootstrap/js/bootstrap.js"></script>
<!-- 3.bootstrap.css -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<!--
(2)栅格系统 行 : row
默认样式: 没有高度,宽度100%, 左右-15px margin(目的:抵消版心的padding)
-->
<style>
/* 版心 */
.container-fluid{
background-color: pink
}
/* 行:row */
.row{
height: 100px;
margin-top: 10px;
background-color: green;
}
</style>
</head>
<body>
<!-- 版心 -->
<div class="container-fluid">
<!-- 行:父元素(top-bar banner nav-bar list) -->
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导入bootstrap -->
<!-- 1.jquery.js -->
<script src="./bootstrap/js/jquery-1.12.4.min.js"></script>
<!-- 2.bootsrap.js -->
<script src="./bootstrap/js/bootstrap.js"></script>
<!-- 3.bootstrap.css -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
<style>
/* 版心 */
.container-fluid{
background-color: pink
}
/* 列: col-尺寸-比例 ( bootstrap将屏幕分为12份, 1 = 1/12 )
lg: 尺寸 >1200px
6 : 宽度比例 1 = 屏幕1/12 6 * 1/12 = 50%
(1) col-lg-6 : 当屏幕宽度>1200px, 宽度比例生效。 否则不生效(100%)
(2) col-md-3 : 当屏幕尺寸>992px,宽度比例生效。 否则不生效(100%)
(3) col-sm-2 : 当屏幕尺寸>768px,宽度比例生效。 否则不生效(100%)
(4) col-xs-4 : 任何屏幕尺寸, 宽度比例都会生效
*/
/* div[] : 属性选择器
class*="col-lg" : 类名只要包含 col-lg
*/
div[class*="col-lg"]{
height: 50px;
background-color: red;
border: 1px solid black;
}
div[class*="col-md"]{
height: 50px;
background-color: orange;
border: 1px solid black;
}
div[class*="col-sm"]{
height: 50px;
background-color: yellow;
border: 1px solid black;
}
div[class*="col-xs"]{
height: 50px;
background-color: green;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 版心 -->
<div class="container-fluid">
<!-- 行:父元素(top-bar banner nav-bar list) -->
<div class="row">
<!-- 列:子元素 -->
<div class="col-lg-6">屏幕一半</div>
<div class="col-lg-3">屏幕四分之一</div>
<div class="col-lg-3">屏幕四分之一</div>
</div>
<!-- 父元素 -->
<div class="row">
<!-- 列:子元素 -->
<div class="col-md-3">四分之一</div>
<div class="col-md-3">四分之一</div>
<div class="col-md-3">四分之一</div>
<div class="col-md-3">四分之一</div>
</div>
<!-- 父元素 -->
<div class="row">
<!-- 列:子元素 -->
<div class="col-sm-2">六分之一</div>
<div class="col-sm-2">六分之一</div>
<div class="col-sm-2">六分之一</div>
<div class="col-sm-2">六分之一</div>
<div class="col-sm-2">六分之一</div>
<div class="col-sm-2">六分之一</div>
</div>
<!-- 父元素 -->
<div class="row">
<!-- 列:子元素 -->
<div class="col-xs-4">三分之一</div>
<div class="col-xs-4">三分之一</div>
<div class="col-xs-4">三分之一</div>
</div>
</div>
</body>
</html>
.col-lg-offset-x
x代表1~12的数字,它表示栅格偏移的宽度份数,在屏幕宽度大于等于1200起作用 2、.col-md-offset-x
在屏幕宽度大于等于992起作用 3、.col-sm-offset-x
在屏幕宽度大于等于768起作用 4、.col-xs-offset-x
在屏幕宽度小于768起作用在某个查询区间,将栅格隐藏,可以用隐藏的样式,这个样式包括四个: 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏
注意点
a:如果设置一个栅格隐藏样式为hidden-md
:表示该栅格只会在 768 <= 屏幕尺寸 <992区间隐藏,如果屏幕尺寸 <= 768,则又会显示
b.如果希望一个栅格在屏幕尺寸 <= 992时隐藏,可以设置栅格隐藏样式为:hidden-sm hidden-xs
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。