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. [转帖]聊聊字符串数据长度和nls_length_semantics参数

    字符串是我们设计数据库经常用到的类型,从传统的ASCII格式到UTF-8格式,不同应用需求对应不同的字符类型和长度配置.针对Oracle而言,最常用的类型无外乎char和varchar2两个基本类型. ...

  2. [转帖]【sql server安全】sql server连接加密，sql server SSL加密连接

    https://www.cnblogs.com/gered/p/13595098.html#_label1_0 MSSQL - 最佳实践 - 使用SSL加密连接 回到顶部 author: 风移 回到顶 ...

  3. [转帖]Region 性能调优

    https://docs.pingcap.com/zh/tidb/v6.5/tune-region-performance 本文介绍了如何通过调整 Region 大小等方法对 Region 进行性能调 ...

  4. [转帖]AMD第四代宵龙 9174F 亮眼

    https://www.amd.com/zh-hans/processors/epyc-9004-series#%E8%A7%84%E6%A0%BC 型号规格   型号 CPU 核心数量 线程数量 最 ...

  5. [转帖]SPECjvm测试工具详解

    ARM服务器测试大纲中指定了要使用specjvm测试Java虚拟机性能,所以就上网找开源的测试套. 简介 SPECjvm2008(java虚拟机基准测试)是用来测试java运行环境(JRE)性能的基准 ...

  6. Windows 远程时提示CredSSP 加密数据库修正 问题的简单处理.

    最近在公司内部远程机器的时候更新了 windows上面远程部分服务器的时候出现异常如图示: 查了下 还是有比较简单的解决办法的 问题是需要在 自己的客户端机器上面进行设置 不需要修改服务器端的服务器. ...

  7. Arthas 超简单离线使用教程

    简介 Arthas 是阿里巴巴开源的一套监控java应用的工具 官网的文档地址: https://arthas.aliyun.com/doc/ 官方的简介说明: Arthas 是Alibaba开源的J ...

  8. 使用Python调用Nessus 接口实现自动化扫描

    @ 目录 认证 策略模板配置 创建策略模板 任务 创建任务 启动/停止任务 获取扫描结果 获取漏洞信息 获取漏洞输出信息与漏洞知识库信息 最后总结 之前在项目中需要接入nessus扫描器,研究了一下n ...

  9. Flask 框架：运用WTForms实现用户注册

    WTForms 是用于web开发的灵活的表单验证和呈现库,它可以与您选择的任何web框架和模板引擎一起工作,并支持数据验证.CSRF保护.国际化等,运用WTForms框架并配合Flask可实现一个带有 ...

  10. 从嘉手札<2023-11-13>

    1. 很多时候 成功并不等同于成长 成功是很多因素复合形成的一种结果 而并不等同于一个人阅历的丰富.认知的提高 2. 我一直认为 世界不属于投机者 也不属于堕落者 信念感在这个大数据泛滥.碎片化汹涌的 ...