bootstrap响应式布局简单实例
<!DOCTYPE html> <html lang="en"> <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>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/test.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8"> .col-md-8</div> <div class="col-md-4"> .col-md-4</div> </div> <!-- 实例:手机、平板、桌面 --> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div> </div> </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) ...
- JGUI源码:响应式布局简单实现(13)
首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧. 1.首先把显示区域分成12等分,bootstrap是这 ...
- bootstrap响应式设计简单实践。
首先需要熟悉Boostrap提供的响应式设施:http://getbootstrap.com/css/#responsive-utilities,BootStrap的响应式设施主要是利用媒体查询对元素 ...
- 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: ...
随机推荐
- asp.net 微信企业号办公系统-流程设计--保存与发布
如果流程未设计完时可以先保存,以后再打开接着设计.点击工具栏上的保存按钮即可保存当前流程设计: 如果下次要接着设计,则可以打开该流程继续设计: 如果流程设计完成,可以点击安装按钮来发布流程,流程安装成 ...
- 关于UIWebView的总结
关于UIWebView的总结 前言 今天参加了 Adobe 和 CSDN 组织的一个关于 PhoneGap 的开发讲座 ,而 PhoneGap 在 iOS 设备上的实现就是通过 UIWebView 控 ...
- css margin居中的问题
1.要在外壳套上一个父div加上100%宽度,在子div加上宽度和margin:auto; 2.子div的宽度通常是子div中元素的宽度,比如子div中一个宽度为169px的input.想居中的话,就 ...
- Export-XLSX PowerShell generate real Excel XLSX files without Excel and COM
http://gallery.technet.microsoft.com/scriptcenter/Export-XLSX-PowerShell-f2f0c035
- php根据IP地址跳转对应的城市,淘宝REST api调用地址直接使用
<?php // 定义一个函数getIP() function getIP(){ global $ip; if (getenv("HTTP_CLIENT_IP")) { $i ...
- [ZZ] The Naked Truth About Anisotropic Filtering
http://www.extremetech.com/computing/51994-the-naked-truth-about-anisotropic-filtering In the seemin ...
- error while loading shared libraries: xxx.so.x" 错误的原因和解决办法
今天在执行一个protobuf程序时,提示error while loading shared libraries: libprotobuf.so.8: cannot open shared obje ...
- 循环btn上面的视图
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...
- 20145317彭垚 《Java程序设计》第一次实验实验报告
20145317彭垚 <Java程序设计>第一次实验实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验名称:Java开发环境的 ...
- SQL查询(一)
查询基础练习 练习一: <学生信息表>:students(学号,姓名,性别,出生年,省份,入学年份,班级) <学生选修信息表>:stucourses(学号,课程号,课程名称,分 ...