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. 监控服务器所有磁盘的inode使用情况

    监控服务器所有磁盘的inode使用情况 背景 因为前期数据库开启了审计 但是如果是 DB模式的话 $aud 表的冲突和使用太多了 所以专家建议将审计表放到OS 因为数据库的访问量特别高. 审计的信息又 ...

  2. [转帖]一次ORA-3136的处理

    https://oracleblog.org/working-case/deal-with-ora3136/ 最近收到一个告警,用户说数据库无法连接,但是从监控上看,oracle的后台进程已经侦听进程 ...

  3. [转帖]TiDB 最佳实践

    https://docs.pingcap.com/zh/tidb/stable/tidb-best-practices 本文档总结使用 TiDB 时的一些最佳实践,主要涉及 SQL 使用和 OLAP/ ...

  4. [转帖]LOAD DATA INFILE 导入数据

    https://www.jianshu.com/p/bcafd8f3ad8e LOAD DATA INFILE语句用于高速地从一个文本文件中读取行,并写入一个表中.文件名称必须为一个文字字符串.LOA ...

  5. Redis lua脚本简要学习

    Redis lua脚本简要学习 背景 上周督促客户从Windows平台升级到了Linux平台. redis一周相安无事. 但是这周一突然又出现了卡断和慢的情况. 只能继续进行分析. 分析思路 现场日志 ...

  6. 不想做架构师的Gopher不是好程序员

    最近我们在组队学习<手把手带你写一个web框架>,强制PUSH,坚持每天学习打卡,不完成惩罚发红包的那种. 你别说,效果还真挺好. 昨天学到了架构部分,很受启发,光学不写假把式.(还是得坚 ...

  7. Istio安装和部署

    Istio的版本对k8s的版本是有要求的,不兼容的版本会引发一些隐蔽的错误,安装前先参考下图 版本 目前支持 发行日期 停止维护 支持的 Kubernetes 版本 未测试,可能支持的 Kuberne ...

  8. 根据pdf模板文件添加数据生成新的pdf与pdf添加读取二维码

    参考文档 :https://www.cnblogs.com/ibeisha/p/itextsharp-pdf.html 程序demo 地址:https://github.com/hudean/itex ...

  9. SqlSugar跨库查询/多库查询

    一.跨库方式1:跨库导航 (5.1.3.24) 优点1:支持跨服务器,支持跨数据库品种, 支持任何类型数据库 优点2:   超级强大的性能,能达到本库联表性能 缺点:不支持子表过滤主表 (方案有ToL ...

  10. SqlSugar子查询

    1.基础教程 1.1 API目录 *****只查一列***** //First: SqlFunc.Subqueryable<School>().Where(s => s.Id ==  ...