<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标签页（Tab）插件</title> <link href="https://www.jb51.net/css/bootstrap.min.css"> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> </head> <body> <div> <!--面板内容关闭--> <div> <div> <h4> <a data-toggle="collapse" data-parent="#panel-group" href="#collapseOne"> 面板标题 </a> </h4> </div> <div> <div> 面板内容 </div> </div> </div> <!--面板内容打开--> <div> <div> <h4> <a data-toggle="collapse" data-parent="#panel-group" href="#collapseTwo"> 面板标题 </a> </h4> </div> <div> <div> 面板内容 </div> </div> </div> </div> </body>
3.10媒体查询
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <metacontent="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; } /*当适口最大宽度为980px，也就是适口<=980px 内部的样式生效*/ @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 >aa</div>
正确的写法是
<div> <div >aa</div> </div>
3.如果用container实现高度自适应时，就不能给元素添加高度，应对其父元素设置overflow-hidden。
4.当给元素设置Position定位之后，元素的宽度为0，如果想让元素居中需要对其添加width:100%;text-align:center;
5.再使用input标签时，如果对其父类定义了col - - (栅格),可以对input添加form-control设置input的大小和父类一样大。
您可能感兴趣的文章: