Bootstrap响应式布局(1)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="Css/jquery-2.1.4.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>这是我的第一个Bootstrap页面</h2>
<p>从今天开始起帆Bootstrap之旅，好好学习，努力学习，加油！</p>
<p>调整浏览器窗口的大小，可以看到响应式的效果。</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>第一列</h3>
<p>学得不紧是技术，更是梦想！</p>
<p>再诱惑的梦想，也抵不住您傻逼似的坚持。</p>
</div>
<div class="col-sm-4">
<h3>第二列</h3>
<p>学得不紧是技术，更是梦想！</p>
<p>再诱惑的梦想，也抵不住您傻逼似的坚持。</p>
</div>
<div class="col-sm-4">
<h3>第三列</h3>
<p>学得不紧是技术，更是梦想！</p>
<p>再诱惑的梦想，也抵不住您傻逼似的坚持。</p>
</div>
<div class="col-sm-4">
<h3>第四列</h3>
<p>学得不紧是技术，更是梦想！</p>
<p>再诱惑的梦想，也抵不住您傻逼似的坚持。</p>
</div>
</div>
</div>
<section class="container">
<header class="jumbotron">
<h2>这是我的第一个Bootstrap页面</h2>
<p>从今天开始起帆Bootstrap之旅，好好学习，努力学习，加油！</p>
<p>调整浏览器窗口的大小，可以看到响应式的效果。</p>
</header>
<section class="row">
<article class="col-sm-4">
<h3>第一列</h3>
<p>学得不紧是技术，更是梦想！</p>
<p>再诱惑的梦想，也抵不住您傻逼似的坚持。</p>
</article>
<article class="col-sm-4">
<h3>第二列</h3>
<p>学得不紧是技术，更是梦想！</p>
<p>再诱惑的梦想，也抵不住您傻逼似的坚持。</p>
</article>
<article class="col-sm-4">
<h3>第三列</h3>
<p>学得不紧是技术，更是梦想！</p>
<p>再诱惑的梦想，也抵不住您傻逼似的坚持。</p>
</article>
<article class="col-sm-4">
<h3>第四列</h3>
<p>学得不紧是技术，更是梦想！</p>
<p>再诱惑的梦想，也抵不住您傻逼似的坚持。</p>
</article>
</section>
</section>
</body>
</html>
Bootstrap响应式布局(1)的更多相关文章
- 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的官方解 ...
- 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响应式布局列子
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- Bootstrap页面布局7 - Bootstrap响应式布局的实用类
在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visib ...
随机推荐
- CSA Round #53 (Div. 2 only) Histogram Partition（模拟）
传送门 题意 给出一个数组A,你有一个数组B(一开始全为0),询问多少次操作后B转化为A 一次操作:选择一段区间,加上某个正整数 分析 构建一个栈, 输入一个数,若当前栈空或栈顶元素比输入小,则加入栈 ...
- lightoj1060【康托逆展开】
可以先看些资料:http://blog.csdn.net/keyboarderqq/article/details/53388936 参考谷巨巨:http://blog.csdn.net/azx736 ...
- java多线程中用到的方法详细解析
在多线程学习的过程中涉及的方法和接口特别多,本文就详细讲解下经常使用方法的作用和使用场景. 1.sleep()方法. 当线程对象调用sleep(time)方法后,当前线程会等待指定的时间(t ...
- ES6函数参数默认值作用域的模拟原理实现与个人的一些推测
一.函数参数默认值中模糊的独立作用域 我在ES6入门学习函数拓展这一篇博客中有记录,当函数的参数使用默认值时,参数会在初始化过程中产生一个独立的作用域,初始化完成作用域会消失:如果不使用参数默认值,不 ...
- Android Activity生命周期（转）
转自 http://blog.csdn.net/android_tutor/article/details/5772285
- react native的Navigator组件示例
import React, {Component} from 'react';import {ScrollView, StyleSheet, Text, View, PixelRatio} from ...
- python如何用pip安装模块
pip去python官网下载 我想写的是安装后怎么做,假设我们要安装pymysql模块 在python交互式模式中运行pip install pymysql 会抛出 语法错误,不知为何. 此时应该找到 ...
- PostgreSQL-6-数据分组
基本语法 SELECT column-list FROM table_name WHERE [ conditions ] GROUP BY column1, column2 HAVING [ cond ...
- Codeforces 1131G（dp）
传送门 与Codeforces1107G一起食用 思路 想到要用dp--然后常规地设dp[i]为推倒前i个牌的最小花费 有两种情况:一是当前这个推,二是不推而被别人推.对于第一种,需要找到这个左推(因 ...
- bryce1010专题训练——Splay树
Prob Hint BZOJ 3323 文艺平衡树 区间翻转 BZOJ 1251 序列终结者 区间翻转,询问最值 BZOJ 1895 supermemo 区间加,翻转,剪切,询问最值.点插入,删除. ...