CSS進階之模擬Bootstrap網格布局
阿新 • • 發佈：2017-07-29
源代碼 div adding 分享 yellow doc right http media
目前暫時實現效果，容後面整理心得，先貼上源代碼。
<!DOCTYPE html> <html> <head> <title>demo bootstrap</title> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css"> <!-- <script type="text/javascript" src="dist/js/bootstrap.js"></script> --> <style type="text/css"> .my-container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .my-container { width: 750px; } } @media (min-width: 992px) { .my-container { width: 970px; } } @media (min-width: 1200px) { .my-container { width: 1170px; } } /*用於清除網格浮動造成的影響*/ .my-row:before, .my-row:after { display: table; content: " "; } .my-row:after { clear: both; } .my-row { margin-right: -15px; margin-left: -15px; } .my-col-lg-4, .my-col-md-6, .my-xs-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; /*----*/ float: left; } @media (min-width:768px) { .my-xs-12 { width: 100%; } .my-col-xs-12:after { display: block; content: ‘after my-col-xs-12 min-width: 768px‘; color: red } .my-col-xs-12:before { display: block; content: ‘before my-col-xs-12 min-width: 768px‘; color: red } } @media (min-width: 992px) { .my-col-md-6 { width: 50%; } .my-col-md-6:after { display: block; content: ‘after col-md-6 min-width: 992px‘; color: red } .my-col-md-6:before { display: block; content: ‘before col-md-6 min-width: 992px‘; color: red } } @media (min-width: 1200px) { .my-col-lg-4 { width: 33.3333333%; } .my-col-lg-4:after { display: block; content: ‘after col-lg-4 min-width: 1200px‘; color: yellow } .my-col-lg-4:before { display: block; content: ‘before col-lg-4 min-width: 1200px‘; color: yellow } } </style> </head> <body style="background-color: #eee"> <div class="container" style="background-color: #aaa;padding: 15px;"> <div class="row" style="background-color: #bbb;padding: 15px;"> <div class="col-lg-4 col-md-6" style="height: 300px;background-color: #000"></div> <div class="col-lg-4 col-md-6" style="height: 300px;background-color: #fff"></div> <div class="col-lg-4 col-md-6" style="height: 300px;background-color: #000"></div> </div> </div> <div class="my-container" style="background-color: #aaa;padding: 15px;"> <div class="my-row" style="background-color: #bbb;padding: 15px;"> <div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #000">X</div> <div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #fff"></div> <div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #000"></div> </div> </div> </body> </html>
效果圖：
width>1200px:
width:1200-992px:
width:0-768px:
CSS進階之模擬Bootstrap網格布局