Bootstrap使用基础教程详解

时间：2021-05-28

一：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

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap 实例 - 标签页（Tab）插件</title><link rel="stylesheet" href="../css/bootstrap.min.css"><script src="../js/jquery.min.js"></script><script src="../js/bootstrap.min.js"></script></head><body><div class="col-md-6 panel-group" id="panel-group"><!--面板内容关闭--><div class="panel panel-info"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#panel-group" href="#collapseOne">面板标题</a></h4></div><div id="collapseOne" class="panel-collapse collapse"><div class="panel-body">面板内容</div></div></div><!--面板内容打开--><div class="panel panel-info"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#panel-group" href="#collapseTwo">面板标题</a></h4></div><div id="collapseTwo" class="panel-collapse collapse in"><div class="panel-body">面板内容</div></div></div></div></body>

　　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的大小和父类一样大。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章