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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="boot/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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 导航开始 -->
<nav class="navbar navbar-inverse">
<div class="container">
<!-- 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" aria-expanded="false">
<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="#">my website</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<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="#">Content</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- 导航结束 -->
<div class="container">
<div class="row">
<div class="col-sm-9">
<p class="pull-right visible-xs">
<button class="btn btn-xs btn-primary">toggle</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>this is my website</p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<h2>header</h2>
<p>this is content this is content this is content this is content
this is content this is content this is content this is content </p>
<a href="#" class="btn btn-default">more</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<h2>header</h2>
<p>this is content this is content this is content this is content
this is content this is content this is content this is content </p>
<a href="#" class="btn btn-default">more</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<h2>header</h2>
<p>this is content this is content this is content this is content
this is content this is content this is content this is content </p>
<a href="#" class="btn btn-default">more</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<h2>header</h2>
<p>this is content this is content this is content this is content
this is content this is content this is content this is content </p>
<a href="#" class="btn btn-default">more</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<h2>header</h2>
<p>this is content this is content this is content this is content
this is content this is content this is content this is content </p>
<a href="#" class="btn btn-default">more</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<h2>header</h2>
<p>this is content this is content this is content this is content
this is content this is content this is content this is content </p>
<a href="#" class="btn btn-default">more</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<h2>header</h2>
<p>this is content this is content this is content this is content
this is content this is content this is content this is content </p>
<a href="#" class="btn btn-default">more</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>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<script src="boot/js/bootstrap.min.js"></script>
</body>
</html>
bootstrap响应式布局列子的更多相关文章
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- Bootstrap响应式布局介绍
一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...
- bootstrap响应式布局原理
百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...
- Bootstrap响应式布局(1)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- bootstrap 响应式布局
先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...
- bootstrap响应式布局简单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Bootstrap页面布局7 - Bootstrap响应式布局的实用类
在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visib ...
随机推荐
- JVM系列三:JVM参数设置
JVM系列三:JVM参数设置.分析 不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运 ...
- Docker介绍-hc课堂笔记
1,传统模式-多个服务器:申请.安装jdk等.部署环境. 容器-整包,把有东西打包到一起,把这个包放在服务器上. linux中装了docker,起100个服务,改个数字就可以,5分钟左右. 2,虚拟化 ...
- Ubuntu安装 Alisql编译安装步骤：
github地址: https://github.com/alibaba/AliSQL 一.直接git下载保存到本地: git clone https://github.com/alibaba/Ali ...
- Android 绘图时实现双缓冲
一.双缓冲技术原理: 在内存中创建一片内存区域,把将要绘制的图片预先绘制到内存中,在绘制显示的时候直接获取缓冲区的图片进行绘制.更具体一点来说:先通过setBitmap方法将要绘制的所有的图形绘制到一 ...
- Android向手机通讯录中的所有的联系人（包括SIM卡），向手机通讯录中插入联系人
package com.example.myapi.phonepersion; import java.util.ArrayList; import java.util.List; import an ...
- （转）公有云vr客户端tcp连接数太多造成 系统卡顿问题 [bittorrent tracker优化] -公有云常见网络问题及思路
在公有云服务器 发现使用tcp(http)的tracker连接数太多 用户太多会造成windows系统卡顿 特此发表一下修改配置和路由器的方法 解决卡顿问题 解决方法1(参考内容): 修改 /etc/ ...
- golang postgresql CRUD
package main import ( "database/sql" "fmt" "log" _ "github.com/li ...
- opencv---JPEG图像质量检测代码
参考:http://blog.csdn.net/trent1985/article/details/50904173 根据国外一篇大牛的文章:No-Reference Perceptual Quali ...
- SJA1000 CAN驱动程序演示实验
SJA1000 CAN驱动程序演示实验 2016-04-12 20:41:22来源: eefocus 关键字:SJA1000 CAN 驱动程序 演示实验 收藏 评论(0) 分享到 微博 QQ ...
- Android Environment.getExternalStorageDirectory() 获取的是内部存储还是外部存储？ - z
这几天在做Android应用的远程更新功能,将下载的更新包放在移动设备上指定的目录.用的是 Environment.getExternalStorageDirectory() 这个方法,然后在获取的 ...