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的更多相关文章

  1. BootStrap -- Grid System

    <script src="jquery.1.9.js"></script> <script src="js/bootstrap.min.js ...

  2. [转载]Understanding the Bootstrap 3 Grid System

    https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...

  3. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  4. Bootstrap 网格系统(Grid System)实例5

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...

  5. Bootstrap 网格系统(Grid System)实例4

    Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...

  6. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  7. Bootstrap 网格系统(Grid System)实例2

    Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...

  8. Bootstrap 网格系统(Grid System)实例1

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  9. Bootstrap 网格系统(Grid System)

    Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...

  10. [转] Understanding Twitter Bootstrap 3

    Bootstrap is a popular, open source framework. Complete with pre-built components it allows web desi ...

随机推荐

  1. drf从入门到飞升仙界 08

    断点调试使用 # 程序在debug模式运行,可以在任意位置停下,查看当前情况下变量数据的变化情况 # 使用pycharm调试程序 - 1.以debug模式运行. - 2.在代码左侧加入断点(红圈) - ...

  2. 狂神--Docker

    官网地址 官网 https://www.docker.com/ 官方文档Docker文档是超详细的 https://docs.docker.com/ 仓库地址 https://hub.docker.c ...

  3. docker搭建图片压测QPS3000+服务器(ftp+nginx)

    docker搭建图片压测QPS3000+服务器(ftp+nginx) 在针对图片算法服务进行压力测试时,需要高性能的图片服务器 自己编写的图片应用性能不一定能达到要求 可能因为图片应用自身达不到压测要 ...

  4. IntelliJ IDEA2021.3破解教程【Windows10系统】

    IntelliJ IDEA2021.3破解教程[Windows10系统] 以下仅为本人工作.学习过程中所接触到的内容,不足之处请多包涵. 官网下载地址 最新版:https://www.jetbrain ...

  5. mysql生成随机数的函数

    例:update [tablename] set [columnname] = FLOOR( 6546541 + RAND() * (987987989 - 6546541)) where ? FLO ...

  6. Selinux讲解

    手动开启/关闭/查询 SELINUX状态的方法在Limx操作系统运行过程中无法使用命令停用 SELINUX,可以在内核启动参数或使用修改配置文件的方式去关闭 SELINUX安全机制.若只是要将 SEL ...

  7. 题解 【POJ3728】The merchant（LCA）

    题意:一棵树有N个城市,每个城市商品价格不一样,Q个询问,问从u出发到达v点,每个城市只能经过一次的最大利润 max min数组存u城到u的第2^i个祖先路径上的最值 答案就是u-v路径上的最大值-最 ...

  8. vue的增删改查（简单版）

    <template>   <div class="about">     <div>       <input type="te ...

  9. Linux内核红黑树2—移植笔记

    转自:https://www.cnblogs.com/hellokitty2/p/15362596.html 另外可参考:https://zhuanlan.zhihu.com/p/26599934 一 ...

  10. redis缓存一致性

    redis缓存一致性 redis是目前使用最广泛的分布式缓存系统,几乎每家公司都在用.它使用简单,吞吐量高,单机 qps 可以达到 10 万每秒,但在使用redis缓存时存在一个问题,即如何保证缓存数 ...