bootstrap在线布局-bootstrap可视化布局怎么使用

Bootstrap内置了一套响应式、移动设备。

1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:

<div class="container">

<div class="row"></div>

</div>

2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。如:

<div class="container">

<div class="row">

<div class="col-md-4"></div>

<div class="col-md-8"></div>

3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响

bootstrap 2.3.2的, 1个row里最多12个span,如下面12=4+8,12=3+3+6

2列布局:

<div class="container-fluid">

<div class="row-fluid">

<div class="span4">

</div>

<div class="span8">

</div>

</div>

</div>

3列布局:

<div class="container-fluid">

<div class="row-fluid">

<div class="span3">

</div>

<div class="span3">

</div>

<div class="span6">

</div>

</div>

</div>

4列布局:

<div class="container-fluid">

<div class="row-fluid">

<div class="span3">

</div>

<div class="span3">

</div>

<div class="span2">

</div>

<div class="span4">

</div>

</div>

</div>

你好,你没有在head中引用Bootstrap中必要的CSS样式和JS,所以看不到样式。

解决办法是:

1.先去h,下载bootstrap,将解压缩出来的dist文件夹放到你的项目的根目录下。

2.然后再去htt/,下载一个jQuery-1.11.1.js,因为bootstrap的JS都是基于jQuery的,所以必须有这个。注意你要找到里面的这个链接:Download the uncompressed, development jQuery 1.11.1,然后右键点击保存到本地。

3.将jQuery-1.11.1.js放到dist的根目录下。

4.然后在你的网页的HTML代码中找到head标签,

在里面加上这么两句话

<link rel="stylesheet" type="text/css" href="dist/css/">

<script src="dist/jquery-1.11.1.js"></script>

<script src="dist/js/"></script>

这样就OK啦。good luck!

提问者评价

谢谢!