bootstrap第一天,响应式布局，栅格系统运用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HelloWorld</title>
<!-- Bootstrap -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class='container'>
<!-- <div class="container-fluid"> -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project</a>
</div>
<!-- Collect the nav links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
<!-- </div> --><!-- /.container-fluid -->
</div>
</nav>
<div class='container'>
<div class='row'>
<div class='col-sm-9'>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
</div>
<div class='row'>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
<div class='col-6 col-sm-6 col-lg-4'>
<h2>headline</h2>
<p>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.Use rows to create horizontal groups of columns.</p>
<a href="#" class='btn btn-default'>view details</a>
</div>
</div>
</div>
<div class='col-sm-3'>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>
</body>
</html>
bootstrap第一天,响应式布局，栅格系统运用的更多相关文章
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- bootstrap 自适应和响应式布局的区别
自适应: 不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...
- Bootstrap如何禁止响应式布局 不适配
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...
- Bootstrap如何禁止响应式布局
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...
- Bootstrap工具包--用于响应式布局和移动设备优先的web项目
Bootstrap是用于前端开发的工具包,是一个css/html框架 用于响应式布局和移动设备优先的web项目 响应式布局--一个网站能兼容多个终端 有很多版本:v3,v4,v5 三个没啥区别 ...
- Bootstrap学习笔记-响应式布局原理
响应式布局的原理就是利用css3中@media媒体来实现的 <html> <head> <meta charset="utf-8"> <t ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- bootstrap3 响应式布局栅格式布局
抓住重点 下面开始实现Bootstrap版本3的Demo 案例 首先去官方网站 http://www.bootcss.com/ 下载 点击 进入 点击 进入 下载 把 相关的js和css 拷贝到项目 ...
- 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！
摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...
随机推荐
- 提高Java代码质量：使用枚举定义常量（转）
一.分析 常量的声明是每一个项目中不可或缺的,在Java1.5之前,我们只有两种方式的声明:类常量和接口常量.不过,在1.5版之后有了改进,即新增了一种常量声明方式,枚举常量.代码如下: enum ...
- JDK的下载、安装及环境变量的配置
官网下载JDK: www.oracle.com 或者 www.java.sun.com 安装JDK: 双击运行下载的 jdk-8u25-windows-i586.exe即可. 假设安装目录为:D: ...
- [转]make: 警告:检测到时钟错误。您的创建可能是不完整的。
转自http://blog.csdn.net/maopig/article/details/6599660 我在make的时候也出现了同样的问题,不过不是什么大问题,这个不影响编译结果 分析原因可能是 ...
- JavaScript备忘录(3)——正则表达式
正则表达式是用来进行字符串匹配的. 定义正则表达式有两种方法:/wor/或者new RegExp("wor"). 使用方法 在JS中,使用正则表达式的方法有: 字符串的search ...
- 蓝凌OA二次开发手册
1.蓝凌OA表单前端调用后台数据 一.后台存储过程: create procedure sp_test @ftext nvarchar(50) as begin select @ftext as '测 ...
- SNF开发平台WinForm之十四-站内发送系统信息-SNF快速开发平台3.3-Spring.Net.Framework
1运行效果: 2开发实现: .组装站内信息发送实体对象. SNFService SNFService = new SNFService(); if (this.ucUser.SelectedIds ! ...
- Java Web学习系列——Maven Web项目中集成使用Spring
参考Java Web学习系列——创建基于Maven的Web项目一文,创建一个名为LockMIS的Maven Web项目. 添加依赖Jar包 推荐在http://mvnrepository.com/.h ...
- CommonJS 的 AMD 规范
异步模块定义(Asynchronous Module Definition,简称 AMD)API 描述了一种定义模块的机制,模块及其依赖模块可以通过这种机制进行加载.该机制特别适用于浏览器. 本规范曾 ...
- django 快速实现session的操作
说明: 从这一篇开始就不再完整的介绍django项目的创建过程了,因为前面几篇博客中都详细的介绍了这个创建过程,套路都是一样的,熟悉了这个套路,后面要做的是一些细节技术点的学习和练习. 上一节讲到了d ...
- spring AspectJ的Execution表达式
Aspectj切入点语法定义 在使用spring框架配置AOP的时候,不管是通过XML配置文件还是注解的方式都需要定义pointcut"切入点" 例如定义切入点表达式 execu ...