Bootstrap第2天

Bootstrap第2天

解决IE低版本不支持HTML5元素的方法

CSS全局样式——栅格系统

1、栅格系统介绍

????Bootstrap提供了一套响应式、移动设备优先的流式的栅格系统。

????Bootstrap把一个容器或整个网页平均分成了12列。

????Bootstrap的栅格系统，由一个行(.row)和多个列构成。

????栅格系统通过行列的形式来创建网页布局。把具体的数据放入列当中。

????注意：栅格系统，必须放在.container和.container-fluid之中。

2、栅格系统参数

3、栅格系统的简单应用

注意：如果列数超出12列，则会自动换行。如果列数低于12列，则无所谓。

4、列偏移

????也就是指：一个栏向右偏移多少个列。

????.col-md-offset-*

????.col-md-offset-2 //指定的栏向右偏移2个列。

?

5、列嵌套

列嵌套：就是在某个栏中，再嵌套一个完整的栅格系统。

?

表单样式

• .form-group表单组样式：将和表单元素包含其中，可以获得更好的排列。
• .form-control表单元素样式：常用于、、<select>元素。 </div></li><li><div >.form-inline内联表单样式(用于form元素)：可以使元素一行排列。 </div></li><li><div >.checkbox复选框样式 </div></li><li><div >.radio单选框样式 </div></li><li><div >.disabled可以禁用单选框或复选项的文本。 </div></li><li><div >.form-horizontal水平排列的表单(用于form元素)。 </div></li><li><div >.sr-only：可以用于隐藏元素。 </div></li><li><div >.checkbox-inline 控制多个复选框元素在同一行显示。 </div></li><li><div >.radio-inline控制多个单选框元素在同一行显示。 </div></li></ul><h3>按钮样式 </h3><ul><li><div >可作为按钮使用的元素：、<input>、<button> </div></li><li><div >.btn：按钮的全局样式。<input type = "button" class = "btn"> </div></li><li><div >预定义样式：.btn-default、.btn-primary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link </div></li><li><div >.active按钮激活状态、.disabled按钮禁用状态 </div></li><li><div >按钮尺寸：.btn-lg(大按钮)、.btn-sm(小按钮)、.btn-xs(超小按钮) </div></li><li><div >.btn-block：将按钮拉伸到撑满整个父元素。 </div></li></ul><p> ?</p><p> ?</p><p><a href="http://www.mamicode.com/info-detail-1359799.html" title="Bootstrap第2天,mamicode.com" target="_blank">Bootstrap第2天</p></span> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/android" target="_blank" title="android">android</a></li> <li><a href="https://www.php1.cn/tag/asp.net" target="_blank" title="asp.net">asp.net</a></li> <li><a href="https://www.php1.cn/tag/php" target="_blank" title="php">php</a></li> <li><a href="https://www.php1.cn/tag/jsp" target="_blank" title="jsp">jsp</a></li> <li><a href="https://www.php1.cn/tag/数据库" target="_blank" title="数据库">数据库</a></li> <li><a href="https://www.php1.cn/tag/bootstrap" target="_blank" title="bootstrap">bootstrap</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li> <li><a href="https://www.php1.cn/tag/windows" target="_blank" title="windows">windows</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了
  会员登录 | 用户注册