一：Bootstrap简介
Boostrap是一个非常受欢迎的前端开发框架，该框架极大的提高前端团队的开发效率。 Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装，使开发人员可以轻松使用。 使用Bootstrap可以快速制作精美的响应式页面，并且兼容移动端。
二：Bootstrap特性
提供一套完整的CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件表 灵活的响应式删格系统 移动先行 基于Less和Sass开发。
三：使用Bootstrap
1. 第一步：
到http://patible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap模板样式</title><link href="../css/bootstrap.min.css" rel="stylesheet"><style>body{background: #eee}.item{position: relative; height: 400px}.item img{ position: relative; width: 100%; height: 400px}.item p{position: absolute; top:40%; width: 100%; color: #fff; }.item h1{position: absolute; top:20%; width: 100%; color: #fff; text-align: center}@media (max-width: 768px) {.slide{ width: 100%}}</style><!--[if lt IE 9]><script src="../js/html5shiv.min.js"></script><script src="../js/respond.min.js"></script><![endif]--><script src="../js/jquery.min.js"></script><script src="../js/bootstrap.min.js"></script></head><body><div class="container"><div id="myCarousel" class="carousel slide" data-ride="carousel" style="width: 100%; " ><!--幻灯片导航--><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li class="" data-target="#myCarousel" data-slide-to="1"></li><li class="" data-target="#myCarousel" data-slide-to="2"></li></ol><div class="carousel-inner" style="height: 400px"><!--第一张幻灯片--><div class="item active" style="height: 400px" ><img data-holder-rendered="true" src="../images/图标1.png" ><h1>标题内容</h1><p>段落内容</p><!--幻灯片标题--><div class="carousel-caption">标题 1</div></div><!--第二张幻灯片--><div class="item" ><img data-holder-rendered="true" src="../images/图标2.png"><div class="carousel-caption">标题 2</div></div><!--第三张幻灯片--><div class="item"><img data-holder-rendered="true" src="../images/图标3.png"><div class="carousel-caption">标题 3</div></div></div><!--左右导航--><a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div><script>$(function(){$('#myCarousel').on('slide.bs.carousel', function () {// alert("回调函数");});});</script></body></html>
3.9面板panel-group
3.10媒体查询
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><title>媒体查询</title><style>div {width: 100%;height: 200px;background-color: red;}@media (max-width: 320px) {div {font-size: 10px;background: yellow;}}</style></head><body><div>媒体查询</div></body><script>window.onresize = function (){var mydiv = document.getElementsByTagName("div")[0];mydiv.innerHTML = document.documentElement.clientWidth;}</script></html>四：注意事项
1.container,col - - (栅格),需要用单独的div包裹，之后再里面定义其他的内容。
2.如果要对元素设置媒体查询不能定义的class或id不能和定义col - - (栅格)的class 或id写到一个div里，
medio为定义媒体查询的class错误的写法 <div class="medio col-md-6" >aa</div>
正确的写法是
<div class="col-md-6"> <div class="medio " >aa</div> </div>
3.如果用container实现高度自适应时，就不能给元素添加高度，应对其父元素设置overflow-hidden。
4.当给元素设置Position定位之后，元素的宽度为0，如果想让元素居中需要对其添加width:100%;text-align:center;
5.再使用input标签时，如果对其父类定义了col - - (栅格),可以对input添加form-control设置input的大小和父类一样大。
最新文章
热门文章
猜你喜欢
