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 ...
随机推荐
- 微信开发获取code的时候总是提示 10003 redirect_uri域名与后台配置不一致
填写的地址不能加 http://
- python threading.Thread暂停、唤醒、退出 不消耗cpu
class MyThreadSound(threading.Thread): def __init__(self): super(MyThreadSound, self).__init__() sel ...
- JRebel for IDEA插件 激活
JRebel for IDEA 插件的License Server 程序,在IDEA中下载JREBEL的插件后,通过配置此服务进行插件激活. 使用方法:通过java -jar JrebelBrains ...
- 一些excel随笔，瞎记一下
1 使用sumif函数的时候,如果对于一列0求值返回的时候,显示一个英文中的破折号例 "-" ,是数字格式可能设置为了会计专用,改回数值就行,要逗号的话点其他格式里面的数值,找一下 ...
- Mac新手必看Mac入门基本知识图文教程
你已经是Mac的用户了吗?还是准备入手的新手呢? 赶快看看"Mac入门基本知识"吧! macbook系统基础内容简介 Mac入门基本知识 1.主界面结构图基本知识介绍(如图所示) ...
- Java使用Calendar获取月最大天数
Calendar calendar = Calendar.getInstance(); calendar.set(Calendar.YEAR, year); calendar.set(Calendar ...
- [iOS]遇到了一个问题：“XXXX”中无法使用Apple Pay ，检查此应用的设置并确定其设计可使用Apple Pay”
在钥匙串里查看,发现当时申请的Merchant ID XXXX 证书过期 1. 到 apple开发者: https://developer.apple.com/account/#/overview/ ...
- JavaScript 对象操作
Object.defineProperty(obj, prop, descriptor)方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象. const freezeO ...
- lua如何转化为exe
在这里下载 https://wwn.lanzout.com/iIS9d07rpesh 然后用cmd到 下载的盘:\luapack\luapack\bin\Debug 然后glue.exe srl ...
- 【uboot 】uboot通过tftp下载内核
1.开发板uboot,虚拟机能相互ping通 2.ubuntu搭建好tftp服务器,设置好文件夹,放置好文件 sudo apt install tftpd-hpa //安装服务程序 sudo sys ...