In other words, Bootstrap provides a 12-based grid, which can be used to obtain the layout (horizontal) of 12-minute n ).
<div class="span1"></div><div class="span2"></div><div class="span3"></div><div class="span4"></div><div class="span5"></div><div class="span6"></div><div class="span7"></div><div class="span8"></div><div class="span9"></div><div class="span10"></div><div class="span11"></div><div class="span12"></div>
This is what it looks like (span is an invisible div. In order to see it, I used the style sheet in bootstrap ):
The Code is as follows:
<section id="grid-system"><div class="container"><div class="row show-grid"><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div><div class="span1">1</div></div><div class="row show-grid"><div class="span2">2</div><div class="span2">2</div><div class="span2">2</div><div class="span2">2</div><div class="span2">2</div><div class="span2">2</div></div><div class="row show-grid"><div class="span3">3</div><div class="span3">3</div><div class="span3">3</div><div class="span3">3</div></div><div class="row show-grid"><div class="span4">4</div><div class="span4">4</div><div class="span4">4</div></div><div class="row show-grid"><div class="span6">6</div><div class="span6">6</div></div><div class="row show-grid"><div class="span5">5</div><div class="span7">7</div></div><div class="row show-grid"><div class="span4">4</div><div class="span8">8</div></div><div class="row show-grid"><div class="span3">3</div><div class="span9">9</div></div><div class="row show-grid"><div class="span2">2</div><div class="span10">10</div></div><div class="row show-grid"><div class="span1">1</div><div class="span11">11</div></div></div></section>
There are two ways to deploy Bootstrap: fixed and fluid. They are
<body> <div class="container"> ... </div></body>
And
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div></div>
Another part is to use less to modify some sizes. Not available recently. I have not said much about zookeeper.