一、Bootstrap简单配置
简单使用Bootstrap,只需引入:
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
为什么要引入<link rel="stylesheet" href="css/bootstrap.css" />呢?举一个简单的例子:
我们利用Bootstrap,写一个简答的div:
<div class="container">
<h1>Bootstrap学习</h1>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
</div>
通过调节浏览器窗口的大小,我们可以看到,Bootstrap是对样式为container有着响应式布局的。
二、Bootstrap栅格布局
我们在.container中定义类似table的div单元格row(行)与col(列)-md(屏幕尺寸:可以设置手机、平板等设备)-4(以12等分当前窗口,若超过12份会自动下排)...可以实现简单的栅格布局,例如:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-2 hidden-lg"><!--hidden-sm当屏幕小到sm时,该div隐藏 -->
<h1>侧边栏</h1>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
</div>
<div class="col-sm-6 col-md-8 col-lg-10 ">
<h1>Bootstrap学习</h1>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-2">
<h3>Bootstrap学习</h3>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-2 col-lg-offset-1 alert-danger"><!--alert-danger给该div一个醒目色块-->
<h3>Bootstrap学习</h3>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h3>Bootstrap学习</h3>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
</div>
<div class="visible-md"><!--当屏幕到 某个尺寸 时,显示该div-->
<h2>屏幕到了这个尺寸了</h2>
<p>只有尺寸合适才能看到哦</p>
</div>
</div>
</div>
</div>
</div> <div class="row">
<div class="col-sm-6 col-md-4 col-lg-2"><!--混合使用,自适应当前设备-->
<h1>Bootstrap学习</h1>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
</div>
<div class="col-sm-6 col-md-8 col-lg-2">
<h1>Bootstrap学习</h1>
<p>
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
以下为测试内容,仅做占位使用!以下为测试内容,仅做占位使用!
</p>
</div>
</div>
</div>
实现的效果:
可以针对屏幕微调位置栅格位置,左边右推一格col-md-push-1,右边左拉一格col-md-pull-1左推右拉都是绝对位置,而偏移col-md-offset-1是相对的会同步修改后续内容的位置。栅格如table可以嵌套使用,同样也有着网站的响应式布局。
此篇文章只是入门笔记!
原文地址:http://blog.51cto.com/13479739/2151281
时间: 2024-10-15 14:03:50