您的位置：首页 > Web前端 > BootStrap

bootstrap初学备忘

2016-05-06 12:46 597 查看

在grid layout的时候，不同屏幕如果布局不同，比如：md设备我们想布局4列，而xs设备我们想布局2列，那么可以使用clearfix来换行。

<div class="col-xs-6 col-md-3">...</div>

<div class="col-xs-6 col-md-3">...</div>

<div class="clearfix visible-xs-block"></div> //表示针对xs设备会清除浮动，这样在电脑上是4列，在768像素一下的手机上面就是2列了

<div class="col-xs-6 col-md-3">...</div>

<div class="col-xs-6 col-md-3">...</div>

bootstrap是移动优先的。

<div class="row">
　　<div class="col-xs-6"> 表示xs设备占据6列，并且其他设备也会同样占据6列

</div>

<div>

　　<div class="col-md-6"> xs设备默认占据12列，md以及lg设备占据6列。如果不指定xs，则每一个div都会自动占据一整行

</div>

label for的作用

label一般是用在form里面的。for属性用来和一个表单元素来绑定，绑定后，当我们点击该label的时候，被绑定的表单元素会自动获得焦点。 for有显示和隐式两种写法.

显式的联系：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />

隐式的联系：
<label>Date of Birth: <input type="text" name="DofB" /></label>

可折叠的panel-group

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 响应式的列重置</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<style>

</style>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分
</a>
</h4>
</div><div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div></div></div><div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分
</a>
</h4>
</div><div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div></div></div><div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分
</a>
</h4>
</div><div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div></div></div></div></html>

inline-block

具备inline属性的元素，高度、行高、top, botoom, padding-top/bottom的设置都是无效的。但是inline-block具备了inline的特性，同时高度属性设置有效。

可以用inline-block来做float的效果。他不需要做clear的操作。相邻的inline-block属性会自动同行顺序排列，当遇到第一个不具有inline-block属性的元素的时候，则效果自动停止。

导航条去除边距圆角

设置navbar-static-top/fixed-top/fixed-bottom会去除掉

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航