Twitter Bootstrap Grid System
Bootstrap是什么？
Bootstrap是一个用来快速并且容易的开发web页面，强大的前端框架。它包含html和css基本设计模板，包含通用用户界面组件，如：排版，形式，按钮，表格，导航，下拉框，警告，模式对话框，tab页面，折叠块，Carousel(图片展示) 和其他一些可选的javascript 扩展。
bootstrap通用给你容易的创建相应式展示的能力。
Twitter Bootstrap的优势：
1，节省时间 2，响应式功能(针对不同设备) 3，一致性设计 4， 易用 5，浏览器兼容 6，开源。
开始：
1， 下载文件： download Bootstrap files from here.
2， 创建你的第一个网页：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Basic Bootstrap Template</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
8 </head>
9 <body>
10 <h1>Hello, world!</h1>
11 <script src="http://code.jquery.com/jquery.min.js"></script>
12 <script src="js/bootstrap.min.js"></script>
13 </body>
14 </html>
Bootstrap Grid System 栅格系统
Bootstrap 提供最快并且容易的方法来创建网页。
Bootstrap3 包含预定义的栅格类为了快速制作栅格展示针对不同类型的设备，像是手机，平板，pc，等等。如：.col-xs-类来创建栅格列，针对特别小的设备，.col-sm-针对小屏设备。
Container=》row=》col-md-4
| Features Bootstrap 3 Grid System |
Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) |
Medium devices Desktops (≥992px) |
Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| Max container width | None (auto) | 750px |
970px |
1170px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Max column width | Auto |
~62px |
~81px |
~97px |
| Gutter width | 15px on each side of a column (i.e. 30px) |
|||
Twitter Bootstrap Grid System的更多相关文章
- BootStrap -- Grid System
<script src="jquery.1.9.js"></script> <script src="js/bootstrap.min.js ...
- [转载]Understanding the Bootstrap 3 Grid System
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...
- BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- Bootstrap 网格系统(Grid System)实例5
Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...
- Bootstrap 网格系统(Grid System)实例4
Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...
- Bootstrap 网格系统(Grid System)实例3
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
- Bootstrap 网格系统(Grid System)实例2
Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...
- Bootstrap 网格系统(Grid System)实例1
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
- Bootstrap 网格系统(Grid System)
Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...
- [转] Understanding Twitter Bootstrap 3
Bootstrap is a popular, open source framework. Complete with pre-built components it allows web desi ...
随机推荐
- javascript的属性描述符
什么是属性描述对象(attributes object)? 顾名思义,就是用来描述对象属性的对象.javascript内部提供了一个数据结构,用来描述对象的属性以及控制属性的行为. 比如该对象的某属性 ...
- vue-element-admin框架连接yapi配置vue.config.js
devServer: { host:'localhost', port:port, proxy:{ [process.env.VUE_APP_BASE_API + '/admin']: { //配置p ...
- go+redis实现消息队列发布与订阅
在做项目过程中,实现websocket得时候,不知道哪里写的不太合适,客户端消息收到一定程度,剩下的消息收不到,修改了缓冲区大小,还是没有解决问题,后面因为项目结束期比较紧张,没有时间调试消息的时候, ...
- 关于ie浏览器query ajax提交单个操作无效
第一次写博客 大家不要喷我!!!! 需求需要开发一个无刷新的用户注销和恢复注销功能 遇到的实际问题直接贴图----> 这是开始页面 当点击红xx时提示修改成功 这里似乎是对的哈 但是等点击刷新的 ...
- org.aspectj.lang不存在,引入失败。
问题:添加了依赖,或引入了jar包但是写aspect类时无法引入 解决办法:
- 宿主机通过vmware创建的kali虚拟机连接redis，sftp等功能
介绍 黑客专用的linux kali, 下载后即包含很多黑客工具,对于我这样的菜鸡,很感动的就是里面包含了最新版的redis,java,mysql等工具.自带不错的界面省事 kali官网: https ...
- 加密算法和hash
随着安全问题越来越被重视,公司也全面替换了HTTP为HTTPS.2015年iOS9的ATS到今年苹果更是放出话来,2017年全面支持HTTPS,不支持的App,在审核的时候可能会遇到麻烦.鉴于此,我有 ...
- [267] High Five
[267] High Five Client 00 SendLogOut 01 RequestAttack 03 RequestStartPledgeWar 04 RequestReplyStartP ...
- 1构建NTP时间服务器
NTP时间服务器 NTP服务器是用于局域网服务器时间同步使用的,可以保证局域网所有的服务器与时间服务器的时间保持一致,某些应用对时间实时性要求高的必须统一时间. 互联网的时间服务器也有很多,例如ntp ...
- beanshell 响应数据的解析与变量的保存
获取响应的数据 response = prev.getResponseDataAsString() //prev.getResponseDataAsString是Jmeter提供的方法,可以调取上次请 ...