Bootstrap 3.0 学习笔记(一)

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。截止到现在(2015-02-03)最新版本为 Bootstrap  3.0。

什么是 Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

为什么使用 Bootstrap?

  • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持:所有的主流浏览器都支持 Bootstrap。

        
  • 容易上手:只要具备 HTML 和 CSS 的基础知识,就可以开始学习 Bootstrap。
  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。
  • 它包含了功能强大的内置组件,易于定制。
  • 它还提供了基于 Web 的定制。
  • 它是开源的。

下载 Bootstrap

从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。

当下载了 Bootstrap 的已编译的版本,解压缩 ZIP 文件,将看到下面的文件/目录结构:

* 在开发中经常用到是 bootstrap.min.css bootstrap.min.js jquery.js(bootstrop 基于jQuery)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <title>在线尝试 Bootstrap 实例</title>
 5    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
 6    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
 7    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 8 </head>
 9 <body>
10
11       <h1>Hello, world!</h1>
12
13 </body>

HTML 5 文档类型(Doctype)

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,需要使用 HTML5 文档类型(Doctype)。 因此,在使用 Bootstrap 项目的开头

包含下面的代码段。

1 <!DOCTYPE html>
2 <html>
3 ....
4 </html>

* 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情境下的不一致,

以致于代码不能通过 W3C 标准的验证。

移动设备优先

移动设备优先是 Bootstrap 3 的最显著的变化。

为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示:

1 <meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性控制设备的宽度。假设网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。

通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让网站看上去更像原生应用的感觉。

注意,这种方式并不推荐所有网站使用,还是要看情况而定!

1 <meta name="viewport" content="width=device-width,
2                                      initial-scale=1.0,
3                                      maximum-scale=1.0,
4                                      user-scalable=no">

避免跨浏览器的不一致

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

Normalize.css 是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。

Bootstrap 浏览器/设备支持

Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。

旧的浏览器可能无法很好的支持。

下表为 Bootstrap 支持最新版本的浏览器和平台:

  Chrome Firefox IE Opera Safari
Android YES YES 不适用 NO 不适用
iOS YES 不适用 不适用 NO YES
Mac OS X YES YES 不适用 YES YES
Windows YES YES YES* YES NO

* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

时间: 2024-11-12 01:47:26

Bootstrap 3.0 学习笔记(一)的相关文章

Bootstrap 3.0 学习笔记(二) —— 布局

容器(container) bootstrap 的布局从容器开始. 1 <div class="container"> 2 ... 3 </div> Bootstrap 3 的 container class 用于包裹页面上的内容.来看看 bootstrap.css 文件中的这个 .container class. 1 .container { 2 padding-right: 15px; 3 padding-left: 15px; 4 margin-right

微软企业库5.0学习笔记(10)ASP.NET模块依赖注入

您可以使用HTTP模块,一个到ASP.NET HttpApplicationState类的扩展,在Global.asax编写代码强制ASP.NET在每一个页面请求时自动注入依赖的对象,就像在ASP.NET Web窗体应用程序中讨论的一样. 下列方法显示了一个合适的方法能够获取PreRequestHandlerExecute事件将它自己注入到ASP.NET的执行流水线,在每个页面请求中通过容器的BuildUp方法运行Http模块,并获取OnPageInitComplete事件.当OnPageIni

一起学ASP.NET Core 2.0学习笔记(二): ef core2.0 及mysql provider 、Fluent API相关配置及迁移

不得不说微软的技术迭代还是很快的,上了微软的船就得跟着她走下去,前文一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx.supervisor.mysql环境搭建搭建好了.net core linux的相关环境,今天就来说说ef core相关的配置及迁移: 简介: Entity Framework(以下简称EF) 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案,EF Core是Entity

Swift 2.0学习笔记(Day5)——我所知道的标识符和关键字

Swift 2.0学习笔记(Day5)--我所知道的标识符和关键字   原创文章,欢迎转载.转载请注明:关东升的博客 好多计算机语言都有标识符和关键字,一直没有好好的总结,就是这样的用着,现在小小的整理一下Swift中的标识符和关键字. 什么是标识符呢? 标识符就是给变量.常量.方法.函数.枚举.结构体.类.协议等由开发人员指定的名字. 其实,构成标识符的字母是有一定规范的,Swift中命名规则是: 区分大小写,Myname与myname是两个不同的标识符: 标识符首字符可以以下划线(_)或者字

Quartz.NET 2.0 学习笔记(1) :Quartz.NET简介

转自:http://www.cnblogs.com/lzrabbit/archive/2012/04/13/2447609.html Quartz.NET 项目地址 http://quartznet.sourceforge.net/ Quartz.NET 2.0 学习笔记(1) :Quartz.NET简介 Quartz.NET 2.0 学习笔记(2) :和1.0的几点不同 Quartz.NET 2.0 学习笔记(3) :通过配置文件实现任务调度 Quartz.NET 2.0 学习笔记(4) :c

Swift 2.0学习笔记(Day 29)——访问级别

Swift 2.0学习笔记(Day 29)——访问级别 原创文章,欢迎转载.转载请注明:关东升的博客 访问级别: Swift提供了3种不同访问级别,对应的访问修饰符为:public.internal和private.这些访问修饰符可以修饰类.结构体.枚举等面向对象的类型,还可以修饰变量.常量.下标.元组.函数.属性等内容. l public.可以访问自己模块中的任何public实体.如果使用import语句引入其他模块,我们可以访问其他模块中的public实体. l internal.只能访问自

Hadoop1.0.0学习笔记

Hadoop1.0.0学习笔记 一.  安装JDK,配置环境JAVA环境变量 exportJAVA_HOME=/home/ligang/jdk1.6.0_26 exportJRE_HOME=/home/ligang/jdk1.6.0_26/jre exportCLASSPATH=.:$JAVA_HOME/lib:$JRE_HOME/lib:$CLASSPATH 二.  安装Hadoop-1.0.0 1.     下载hadoop文件,地址为:http://hadoop.apache.org/co

Swift 2.0学习笔记(Day 37)——默认构造函数

Swift 2.0学习笔记(Day 37)--默认构造函数原创文章,欢迎转载.转载请注明:关东升的博客 结构体和类的实例在构造过程中会调用一种特殊的init方法,称为构造函数.构造函数没有返回值,可以重载.在多个构造函数重载的情况下,运行环境可以根据它的外部参数名或参数列表调用合适的构造函数.默认构造函数结构体和类在构造过程中会调用一个构造函数,即便是没有编写任何构造函数,编译器也会提供一个默认的构造函数.下面看示例代码: class Rectangle { var width: Double

Swift 2.0学习笔记(Day 9)——离开表达式你试试!

Swift 2.0学习笔记(Day 9)--离开表达式你试试! 原创文章,欢迎转载.转载请注明:关东升的博客   表达式啊是很重要地. 在Swift中,表达式有3种形式. l  不指定数据类型 var a1 = 10 l  指定数据类型 var a1:Int  = 10 l  使用分号 var a1:Int = 10; vara2:Int = 20 在Swift语言中,一条语句结束后可以不加分号也可以添加分号,但是有一种情况必须要用分号,那就是多条语句写在一行的时候,需要通过分号来区别语句. 例