bootstrap可以说是没有布局和审美概念的后端狗的福利。使用它的栅格系统可以轻松的对网页进行布局，而且可以做到响应式的布局。看起来很酷，接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给大家，作为一个专栏管理。

知识点

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

container: 用于固定宽度并支持响应式布局的容器

page-header: 页头

row: 通过“行（row）”在水平方向创建一组“列（column）”

spanN：预定义栅格

效果

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"></head><body>
<div class="container"><h1 class="page-header">响应式布局<small> 使用Bootstrap网格系统布局网页</small></h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. Maecenas facilisis tellus quis nisl facilisis eget mollis lectus feugiat. Etiam pharetra mattis ultrices. In ac mi metus, ac pharetra ipsum. Aenean imperdiet sem purus. Suspendisse quis odio eu neque varius posuere. Fusce tincidunt tincidunt arcu non viverra. Vivamus dui eros, rhoncus cursus porta quis, sollicitudin a ante. Aliquam porta euismod sollicitudin.</p><div class="row"><div class="span4"><h2 class="page-header">区块一</h2><p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p></div><div class="span4"><h2 class="page-header">区块二</h2><p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p></div><div class="span4"><h2 class="page-header">区块三</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p></div></div><div class="row"><div class="span8"><h2 class="page-header">主内容</h2><p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget .，consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p></div><div class="span4"><h2 class="page-header">边栏</h2><p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p></div></div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>

bootstrap响应式网页布局相关推荐

响应式网页布局 - W3Schools How-Tos 01
W3Schools教学系列 W3Schools是知名的网页设计/前端开发教学网站,不仅提供HTML.CSS.JavaScript等的详尽教学,还可以把它当作说明文件(Documents).有经验的前端 ...
Flexbox响应式网页布局 - W3Schools视频02
今日继续W3Schools响应式网页布局的实现,采用Flexbox方案.使用Flexbox实现响应式网页布局是目前最流行的做法.如果你对Flexbox并不熟悉,可以查看W3Schools的教学: W3 ...
html响应式布局效果图,响应式网页布局的实现方法原理
昨天我在马海祥博客上跟大家详细的介绍过<什么是响应式网页设计?>,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平 ...
BootStrap框架的使用及响应式网页布局
1.BootStrap 概念:将常见效果进行统一封装后形成的框架. 特点:基于框架开发,效率高,稳定性高. 关于Bootstrap:前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合 ...
大学生bootstrap框架网页作业成品 bootstrap响应式网页制作模板学生家乡网页bootstrap框架网站作品 html静态网页设计制作 dw静态网页成品模板素材网页
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
基于html+css+jquery+bootstrap响应式网页制作模板——红色中国文化主题：大美中国
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
大学生bootstrap框架网页作业成品 web前端大作业期末源码航海王html+jquery+bootstrap响应式网页制作模板学生海贼王动漫bootstrap框架网站作品
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
callio项目—Bootstrap响应式网页(1+X Web前端开发中级例题)
文章目录
12个最佳的响应式网页设计教程，轻松带你入门！
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...

bootstrap响应式网页布局

知识点

效果

代码

bootstrap响应式网页布局相关推荐

最新文章

热门文章