bootstrap
|
1、Requires?HTML5?doctype 1?<!DOCTYPE?html> 2?<html?lang="en"> 3?... 4?</html> 2、The?default?Bootstrap?grid?system?utilizes?12?columns.making?for?a?940px?wide?container?without?responsive?features?enabled.?With?the?responsive?CSS?file?added,?the?grid?adapts?to?be?724px?and?1170px?wide?depending?on?your?viewport.?Below?767px?viewports,?the?columns?become?fluid?and?stack?vertically. 1?<div?class="row"> 2?<div?class="span9"> 3?Level?1?column 4?<div?class="row"> 5?<div?class="span6">Level?2</div> 6?<div?class="span3">Level?2</div> 7?</div> 8?</div> 9?</div> Basic?fluid?grid?HTML The?fluid?grid?system?uses?percents?instead?of?pixels?for?column?widths. 1?<div?class="row-fluid"> 2?<div?class="span4">...</div> 3?<div?class="span8">...</div> 4?</div> Move?columns?to?the?right?using?.offset*?classes.?Each?class?increases?the?left?margin?of?a?column?by?a?whole?column. Nesting?columns To?nest?your?content?with?the?default?grid,?add?a?new?.row?and?set?of?.span*?columns?within?an?existing?.span*?column.?Nested?rows?should?include?a?set?of?columns?that?add?up?to?the?number?of?columns?of?its?parent. 3、Layouts Fixed?layout Provides?a?common?fixed-width?(and?optionally?responsive)? layout?with?only?<div?class="container">?required. Fluid?layout，?use?<div?class="container-fluid"> 4、Responsive?design Turn?on?responsive?CSS?in?your?project?by?including?the?proper?meta?tag?and?additional?stylesheet?within?the?<head>?of?your?document.?If?you've?compiled?Bootstrap?from?the?Customize?page,?you?need?only?include?the?meta?tag. 1?<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"> 2?<link?href="assets/css/bootstrap-responsive.css"?rel="stylesheet"> 5、base?css Body?copy Bootstrap's?global?default?font-size?is?14px,?with?a?line-height?of?20px.?This?is?applied?to?the?<body>?and?all?paragraphs.?In?addition,?<p>?(paragraphs)?receive?a?bottom?margin?of?half?their?line-height?(10px?by?default). Make?a?paragraph?stand?out?by?adding?.lead.? Emphasis <small></small>???<strong></strong>??<em><./em>(?italicized?text.) Emphasis?classes 1?<p?class="muted">Fusce?dapibus,?tellus?ac?cursus?commodo,?tortor?mauris?nibh.</p> 2?<p?class="text-warning">Etiam?porta?sem?malesuada?magna?mollis?euismod.</p> 3?<p?class="text-error">Donec?ullamcorper?nulla?non?metus?auctor?fringilla.</p> 4?<p?class="text-info">Aenean?eu?leo?quam.?Pellentesque?ornare?sem?lacinia?quam?venenatis.</p> 5?<p?class="text-success">Duis?mollis,?est?non?commodo?luctus,?nisi?erat?porttitor?ligula.</p> http://twitter.github.com/bootstrap/base-css.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |