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 ...
随机推荐
- 中间件Middleware 使用及相关概念
中间件是装配再应用管道里处理请求和相应的软件,是使用Use,Map,Run扩展方法配置的请求委托,请求委托可以是类,或者匿名方法.每个中间件可调用下一个中间件,直到终端中间件(不调用下一个中间件的就是 ...
- 2022-05-07内部群每日三题-清辉PMP
1.项目需要一位熟练的工程师来执行某个特定任务,但由于工作量大,该工程师不能参与这个项目.项目经理下一步应该怎么做? A.修改进度计划,以适应该资源 B.与职能经理协商该资源的参与 C.培训项目团队中 ...
- 在sublime text 3中编译javascript
1.整理步骤: 1).安装node.js: 2).配置js编译系统: 2.过程 1).先是按照网上的方法,在配置的时候输入如下内容: {"cmd": ["node&quo ...
- js判断图片链接是否有效
let checkImgExists = function(url) { return new Promise(function(resolve, reject) { let ImgObj = new ...
- CentOS 7关闭防火墙 SElinux 配ip
屏蔽出站 iptables -t filter -A OUTPUT --dst 192.168.0.191/32 -j DROP iptables -t filter -A OUTPUT --dst ...
- md工具
C:\Users\XJ\AppData\Roaming\Typora 删掉后重新打开就可以使用了,之前做的配置都失效了,需要重新配置:允许折叠大纲,图片存储方式. 把自动检测更新给关闭
- python菜鸟学习： 11. 装饰器的基础用法
# -*- coding: utf-8 -*-# decorator# 定义:本质是函数,就是为其他函数添加附件功能# 原则:# 1.不能修改被装饰的函数的源代码# 2.不能修改被装饰的函数的调用方式 ...
- node 版本管理器 nvs
node 总是在不断的升级,以前老项目在运行时可能会报错 我遇到了一个 PostCSS received undefined instead of CSS string 查了下可能是node-sass ...
- shell_Day04
grep程序 Linux下有文本处理三剑客 -- grep sed awk grep:文本 行过滤工具 sed: 文本 行编辑器(流编辑器) awk:报告生成器(做文本输出格式化) grep 包含三个 ...
- jQuery对象和js对象是怎样转换的？
两种转换方式将一个jQuery对象转换成js对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的js对象. 如:var $v ...