Bootstrap 可视化布局

image

bootstrap 提供的可视化布局

0x01 获取所需布局的代码

http://www.bootcss.com/p/layoutit/#

通过拖动设定自己想要的布局 然后 点击下载按钮 获取相对应的代码

放入自己网页的想对应的位置

0x02 导入bootstrap相关的css和js

在项目导入bootstrao v2.3的css、js、和img

下载地址http://v2.bootcss.com/

切记 在bootstrap.js前导入jquery.js

jquery.js下载地址http://jquery.com/download/

在页面导入css和js

<link rel="stylesheet" type="text/css" media="screen" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="screen" href="./css/bootstrap-responsive.css">

<script type="text/javascript" src="./js/jquery-2_0_0.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>

导入bootstrap v3.0是否可行尚未尝试

Comments