1.在bootstrap官网中查看基本模板,,直接复制粘贴,一个响应式的小demo就好了
<!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.bootcss.com/bootstrap/3.3.7/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.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
-
注意点
1.bootstrap的所有js插件都依赖jquery,所以引入bootstrap的js文件时要引入jquery的js文件2.自适应的效果实际是由contain的margin来 控制的,在bootstrap的css中设置了margin-left:Auto;margin-right:Auto; 已经设置好了,不用自己设置,引入css包就可以了
-
col-xs- 超小屏幕 <768px
container的宽度自动
2.col-sm- 小屏幕 大于等于768px
container的宽度750px
3.col-md- 中等屏幕 大于等于992px
container的宽度970px
4.col-lg- 大屏幕 大于等于1200px
container的宽度1170px
4.当在一个范围内,比如当屏幕宽度大于1200px的时候,内容的宽度是不变的,container的宽度也不变,,变化的是container的margin,所以又响应式的效果,,
5.响应式不能正常显示的问题注意点1.不能设置定位,可以使用列排序pull/push或者offset来进行 位置的设置 2.不能设置margin,会导致变化浏览器的宽度的时候,会遮住 一部分的内容,响应式不能正常显示
-
比如在登录页面,,form在右边,可以使用col-lg-push- col-md-
push- 等来进行偏移,不能使用定位,,注意:如果偏移的太多,会造
成在拖拽屏幕的时候,会遮住一部分form,
6.列排序push/pull和列偏移offset的区别实现方式的区别：col-md-offset-*，是利用margin-left实现的，col- md-push-*/col-md-pull-*是利用相对定位实现的。 效果的区别： 1、col-md-offset-*只能向右偏移，因为实现方式就是 margin-left，而push/pull因为是相对定位，既可以左偏移也可以右偏移 2、如果一行的偏移量+实际的宽度综合超过12，col-md-offset会换 行显示，也是因为margin，而push/pull只会一部分不可见（超出容 器），因为是相对自身定位。 3、根据《深入理解bootstrap一书》中，offset原理是用了margin- left来实现的偏移，而pull和push是用的float。 4、从功能上来看：push和pull可以用来给元素换位置，比较灵活
7.一个响应式布局的小demo-后台管理系统页面,直接复制粘贴
<!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">
<!-- 1.引入bootstrap 的css文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
<style>
.box1 {
height: 200px;
background-color: pink;
}
/* .fl {
float:left;
}
.fr {
float:right;
} */
/* .nglocass {
margin-left:240px; 不能使用margin,不能使用定位,可以使用布局将侧边留出来
} */
.conten {
height:100%;
}
.col-lg-2 {
background-color: blue;
height:1000px;
}
.box2,.box8 {
height: 500px;
background-color: skyblue;
}
.box3,.box7 {
height: 500px;
background-color: red;
}
.box5,.box6 {
background-color: greenyellow;
height:500px;
}
.box4 {
height:500px;
}
.color {
background-color: purple;
}
</style>
</head>
<body>
<div class="nglocass">
<div class="container">
<div class="row">
<!-- 侧边部分 -->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
</div>
<!-- 右边部分-->
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<!-- 最上部分 -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="box1">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
新手体验
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
环比11%环比
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="box1 color">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p class="fl">新手体验</p>
<span class="fr">环比环比11%</span>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="box1">
456
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="box1 color">
789
</div>
</div>
</div>
<!-- 中间部分 -->
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="box2">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<div class="box4">
www
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="box5">
sss
sss
sss
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12">
<div class="box3">
dddd
</div>
</div>
</div>
<!-- 下面部分 -->
<div class="row">
<div class="col-lg-4">
<div class="box6">
box6
</div>
</div>
<div class="col-lg-4">
<div class="box7">
box7
</div>
</div>
<div class="col-lg-4">
<div class="box8">
box8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<-- <script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> -->
</body>
</html>
8.响应式小demo代码-登录页面,直接复制粘贴就可以用了
<!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">
<!-- 1.引入bootstrap 的css文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
<style>
.form {
height: 300px;
background-color: pink;
margin-top:200px;
/* margin-left:300px; 不能使用margin,不能使用定位*/
/* position:absolute;
right:100px; */
}
</style>
</head>
<body>
<div class="nglocass">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-8 col-xs-12 col-lg-push-8 col-md-push-6 col-sm-push-3 col-xs-push-0">
<!-- <div class="col-lg-3 col-md-6 col-sm-8 col-xs-12 col-lg-offset-8 col-md-offset-6 col-sm-offset-3 col-xs-offset-0"> -->
<div class="form">
</div>
</div>
</div>
</div>
</div>
<-- <script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script> -->
</body>
</html>
网友评论