小编给大家分享一下bootstrap经典网页布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
HTML代码
<div class="logo"> logo</div><div class="container-fluid"> <div class="row main"> <div class="col-md-3 nav">nav</div> <div class="col-md-9 content"> <div class="content-body">content</div> </div> </div></div>CSS样式
代码分为格式化代码(用于清除不同浏览器兼容性问题)
布局代码(用于界面布局的代码)
<style> body, h2, h3, h4, h5, h6, h7, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; } body, button, input, select, textarea { font: 12px/1.5 tahoma, arial, \5b8b\4f53; } h2, h3, h4, h5, h6, h7 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: couriernew, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } a { text-decoration: none; } a:hover { text-decoration: underline; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } body, html { background: #EAEEF2; width: 100%; height: 100%; color: lightblue; } .container-fluid { background: aquamarine; height: 100%; } .logo { background: black; font-size: 40px; padding-left: 20px; height: 60px; min-height: 60px; width: 100%; position: fixed; top: 0; right: 0; z-index: 100; } .nav { background: white; font-size: 30px; height: 100%; width: 15%; float: left; position: relative; margin-right: -100%; box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1); } .content { height: 100%; width: 85%; margin-left: 15%; } .content-body { padding-left: 15px; padding-right: 15px; background: white; height: 100%; font-size: 300px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); overflow: auto; } .main { background: #F8F8F8; height: 100%; padding-top: 68px; padding-bottom: 6px; } </style>以上是“bootstrap经典网页布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
