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响应式网页布局的更多相关文章

  1. bootstrap响应式网页设计的9条基本原则！

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  2. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  3. 学习笔记1－－响应式网页＋Bootstrap起步＋全局CSS样式

    一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...

  4. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  5. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  6. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

  7. CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

    使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...

  8. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  9. 【温故知新】——Bootstrap响应式知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...

  10. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

随机推荐

  1. Linux-进程管理-ps-kill

  2. [转帖]深入浅出分析LSM树（日志结构合并树）

    https://zhuanlan.zhihu.com/p/415799237 ​ 目录 收起 零.前言 一.LSM树数据结构定义 二.插入操作 三.删除操作 四.修改操作 五.查询操作 六.合并操作 ...

  3. [转帖]使用 Dumpling 和 TiDB Lightning 备份与恢复

    本文档介绍如何使用 Dumpling 和 TiDB Lightning 进行全量备份与恢复. 在备份与恢复场景中,如果需要全量备份少量数据(例如小于 50 GB),且不要求备份速度,你可以使用 Dum ...

  4. reposync与createrepo创建离线yum源的方法

    背景 昨天晚上进行了在线升级银河麒麟V10SP2的audit和mate-indicator的rpm包 今天想了下,如果机器无法上网. 必须得在公司内部搭建一套离线的rpm源进行处理 想了下还是使用re ...

  5. NOI Linux 下 Geany 配置教程

    没有括号补全? 现在有自动括号补全了! 红色的 a.cpp 的意思是 a.cpp 没有保存. 现在来设置编译运行的快捷键. 不难推测 "%e" 是可执行文件的意思,"%f ...

  6. JavaScript一种新的数据结构类型Map

    什么是map 它类似于对象,是键值对的集合,但键的范围不局限在于字符串.各种类型的值(包含对象)都可以作为键. 如果同一个键被多次赋值,后面的值将会覆盖其那面的值.如果读取一个未知的键,返回的是und ...

  7. docker 发布web项目到linux

    一.准备工作 1.连接到Liunx的工具 MobaXterm 填好Ip 直接点ok就行 输入用户名和密码进入系统 2.已发布的.netcore网站或微服务 在要发布的项目上右键---->添加-- ...

  8. 几种方法验证unity是否为development build

    我在月初接入了uwa的性能测试SDK,需要提交一个development build的游戏安装包给uwa进行真人真机测试,本文说下如何判断安装包是否为development build. 直观上判断 ...

  9. 从零开始匹配vim(2)——快捷键绑定

    如果说 vim有什么最吸引人,我想vim允许你自由的定义各种快捷键算是一个原因吧.你可以通过绑定各种快捷键来使经常使用的功能更加便利.通俗的讲,快捷键映射就是我按下某个键,我想让vim将它当成另一个键 ...

  10. 【二】AI Studio 项目详解【VisualDL工具、(二)环境使用说明、(二)脚本任务、图形化任务、在线部署及预测】PARL

    相关文章 [一]-环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简介 [五]-Sarsa&Qlear ...