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 ...
随机推荐
- CF468E Permanent 题解
考虑暴力状压 DP. 按行 DP,记录列哪些被选过,可以做到 \(O(2^kk^2)\). 注意到某一列扫完了之后这一列选没选过不重要,可以减少这里的状态. 简单优化一下,每次选择最少的一列,使这一列 ...
- 数据库原理-SQL查询语句
参考书籍<Oracle 数据库开发与应用> SQL查询语句,针对数据库中的表提供了各种查询功能.这里分为五个部分,说明在SQL中如何对数据进行查询. 简单查询 SELCET语句是最简单的S ...
- golang json字符串合并操作
用于两个json格式的字符串合并,当B向A合并时,共有的字段,将用B字段的值(伴随类型一起覆盖),非共有的,A的字段保留,B的字段新增. example代码: package main import ...
- 十进制转化十六进制 && 各类进制转换问题详解
问题描述 十六进制数是在程序设计时经常要使用到的一种整数的表示方式.它有0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F共16个符号,分别表示十进制数的0至15.十六进制的计数方法是满1 ...
- 微信电脑版 v3.9.2.12 绿色便携版
修改历史: 2023.03.01:自改官方 3.9.2.12 最新正式版本2023.01.31:自改官方 3.9.0.28 最新正式版本2023.01.11:自改官方 3.9.0.21 最新正式版本- ...
- 迁移virtualenv虚拟环境，复制，免安装
前提:在原来的服务器中使用相同的python版本,并使用virtualenv创建了自己的虚拟环境. 1.首先在新的机器上安装virtualenv(要有和原机器相同版本的python解释器,第5步也很相 ...
- FMC DA子卡设计原理图：FMCJ465-2路 16bit 12.6GSPS FMC DA子卡
FMCJ465-2路 16bit 12.6GSPS FMC DA子卡 一.板卡概述: FMCJ465是一款转换速率最高为12.6GSPS 的 DAC 回放板,DAC位数16bit; 板卡基于 ...
- Linux(CentOS) Mysql 8.0.30 安装(多源安装)
Linux(CentOS) Mysql 8.0.30 安装(多源安装) 安装命令根据实际部署情况修改调整,CentOS一般选择通用版本Red Hat Enterprise Linux 7 本文档使用w ...
- Sql Sugar 使用
sql sugar orm文档地址: SqlSugar ORM 5.X 官网 .文档.教程 - SqlSugar 5x - .NET果糖网 (donet5.com) sql sugar 基本用法大全, ...
- SOAMANAGER 500 ERROR
.调查原因是 SICF的服务有一个被开启了,取消激活就能解决这个问题. 可能的原因是在激活fiori的时候会自动激活