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. 前端下载图片、pdf、excel、world文件；前端下载图片和pdf文件；前端a标签下载图片和pdf文件；下载文件名称不生效原因

    https://blog.csdn.net/i_am_a_div/article/details/125050379 https://blog.csdn.net/moguzhale/article/d ...

  2. VMware 关于mininet

    1.mininet安装是git clone git://github.com/mininet/mininet.git       (git clone http://github.com/minine ...

  3. vue实现随机生成图形验证码

    效果展示 安装插件 npm i identify 定义组件 verificationCode.vue <template> <!-- 图形验证码 --> <div cla ...

  4. 浅谈zookeeper

    zookeeper用来解决高可用问题,具有高可用,高性能,具有严格的顺序(只要是分布式系统就会是一个严格的顺序)访问控制能力的分布式协调服务,做分布式协调的作用,可以做服务的同步,维护配置文件和命名服 ...

  5. ASP.NET Core http请求内容过大， IIS服务器 返回 Request Too Long 解决方案

    1.修改web.config文件内容如下: <?xml version="1.0" encoding="utf-8"?> <configura ...

  6. PHP后端 H5页面 打开微信小程序

    /** * 功能:获取小程序access_token * Author:郑康凯 * Date: 2023/2/6 0006 15:14 */ public function hhsGetAccessT ...

  7. springboot上传文件失败：The temporary upload location [/tmp/tomcat.7112002115745457830.8765/work/Tomcat/localhost/ROOT] is not valid

    字面意思就是上传的临时目录不存在,问题就是linux系统会自动清理tmp目录下超过10天没有任何操作的目录或文件 解决办法 1.重启springboot服务,当然这只是暂时的,下次隔太久一样会失效 2 ...

  8. 2022-6，flask+vue+uwsgi+nginx，线上部署完整流程打包配置文件

    uwsgi配置文件 [uwsgi] # 服务端口号,这里没有设置IP值,默认是加载服务器的IP地址 http = :8000 # flask项目地址 chdir = /home/flask_proje ...

  9. 常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

    这是因为选择器没有正确选择元素对象 document.getElementsByClassName(...)捕捉到的是该类名元素的数组 正确的访问方式应该是: document.getElements ...

  10. C#笔记誊录<二>

    c#编译器把源码编译成IL(中间)代码,再由CLR通过即时编译器把IL代码编译成本机机器语言(平台语言) www.webkaka.com//测试服务器的网速 ctrl+k+d 代码对其 CTRL+K+ ...