<!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)的更多相关文章

  1. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

  2. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  3. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  4. bootstrap响应式布局原理

    百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...

  5. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  6. bootstrap 响应式布局

    先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...

  7. bootstrap响应式布局简单实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. bootstrap响应式布局列子

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  9. Bootstrap页面布局7 - Bootstrap响应式布局的实用类

    在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visib ...

随机推荐

  1. Ruby对象模型总结

    参考<Ruby元编程>,元编程,即 用来编写代码的代码 . 对象由一组实例变量和一个类的引用组成 对象的方法存在与对象所属的类中,类似js中的prototype,在ruby中准确的说,应该 ...

  2. Luogu P1074靶形数独【搜索/剪枝】By cellur925

    题目传送门 显然是一个搜索.但是开始没有任何的剪枝,暴力从\((1,1)\)点开始搜索,很自然地T了6个点. #include<cstdio> #include<algorithm& ...

  3. 网络装机pxe服务器的配置过程

    网络装机pxe服务器的配置过程 背景: 针对于Linux运维工作中遇到的需要大批量安装Linux系统的情况,通过网络装机的方式实现无人值守安装Linux操作系统,现需要配置一台pxe服务器用于pxe批 ...

  4. P3809【模板】后缀排序

    传送门 深入理解了一波后缀数组,这东西真的很妙诶,自己推感觉完全不现实,看来只能靠背代码了 这段时间就多敲敲,把板子记熟吧 代码: #include<cstdio> #include< ...

  5. Git - .gitignore怎么忽略已经被版本控制的文件

    问题 如果某个文件已经存在于远程仓库了,也就是说某个文件已经被版本控制了,如果将该文件添加到.gitignore中,是无法生效的.因为.gitignore是用来控制尚未被纳入版本控制的文件,如果文件已 ...

  6. Python -3-列表和元组

    1.用list就可以像修改列表那样修改字符串了 >>> list('Hello') ['H', 'e', 'l', 'l', 'o'] 可将任何序列作为list的参数   2.列表的 ...

  7. Jmeter-提取Json数据进行关联

      1:Json后置处理器提取结果作为下一个sampler的传入参数 1.1:[线程组]->[简单控制器]->[HTTP sampler]->[Beanshell后置取样器]-> ...

  8. Caffe实战五（Caffe可视化方法：编译matlab接口）

    接上一篇文章,这里给出配置caffe后编译matlab接口的方法.(参考:<深度学习 21天实战Caffe 第16天 Caffe可视化方法>) 1.将Matlab目录更新至Caffe的Ma ...

  9. python对数据库的操作

    一 Python 操作 MySQL import pymysql pip install pymysql (1) 连接MySQL数据库   db = pymysql.connect(主机名,用户名,密 ...

  10. 命令行媒体处理工具 FFmpeg

    FFmpeg 是一套在命令行界面运行的跨平台媒体处理工具,属于自由软件,常用来对视频音频和图片等媒体文件进行格式转换.分割和合并等,也可录屏录音. 开发语言:C官网:https://www.ffmpe ...