BootStrap -- Grid System

来源：互联网发布：战舰世界mac 国服切换编辑：程序博客网时间：2024/06/04 21:16
<script src="jquery.1.9.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-theme.min.css"><h2>Files Required</h2><h3>1.jquery.js</h3><h3>2.bootstrap.min.js</h3><h3>3.bootstrap.min.css</h3><h3>4.bootstrap-theme.min.css</h3><body><h3>Grid system </h3><p>1.layout </p><div class="row">    <div class="col-md-2 col-xs-2">        <p>col-md-2 is for desktop</p><p>col-xd-2 is for phone</p>    </div>    <div class="col-md-4 col-xs-4">        <p>col-md-4 is for desktop</p><p>col-xd-4 is for phone</p>    </div>    <div class="col-md-6 col-xs-6">        <p>col-md-6 is for desktop</p><p>col-xd-6 is for phone</p>    </div></div><p>2.offset</p><div class="row">    <div class="col-md-4">        <p>col-md-4 is for desktop</p><p>col-xd-4 is for phone</p>    </div>    <div class="col-md-4 col-offset-4">        <p>col-md-4 is for desktop</p><p>col-xd-4 is for phone</p>    </div></div><p>3.nested row sample</p><div class="row"><div class="col-md-6">1<br/>1</div><div class="col-md-6"><div class="col-md-12">2.1</div><div class="col-md-12">2.2</div></div></div><script >$(document).ready(function(){$(".row").children("div").css("border","2 solid #fff000");$(".row-fluid").children("div").css("border","2 solid #fff000");});</script></body>
2 0