Bootstrap3.0学习第一轮:入门

在上一节中Bootstrap3.0入门学习系列:学习从现在开始 ,主要是简单的介绍了一下Bootstrap。从bootcss中文网的两个版本文档说明(Bootstrap2中文文档和Bootstrap3中文文档)中,可以看出这两个版本的差别还是蛮大的。

不过从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以也没什么好说的了,学习Bootstrap3也没什么顾虑了。

下载BootStrap

官网的文件很详细简单,对于下载来说也有多种方式。对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。

可以来查看三个文件夹中的文件

这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。

bower.json中列出了Bootstrap所支持的jQuery版本。

可以看到依赖的jQuery库的版本>=1.9.0即可。

下面通过访问http://jquery.com/ 

下载最新的版本2.03

可以通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js

另存到与Bootstrap文件夹下的js文件夹里面。

注意:所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小(里面取出了注释的文字和空白)。

在网页中使用Bootstrap

我们创建了一个最简单的基本模版

     
     
        Bootstrap
       
       
       

       
       
       
     
     
       

       
       
     
   

 

1.首先我们可以将Bootstrap的样式文件引用当网页中 

2.如果你需要使用Bootstrap架构提供JavaScript插件的话,那么需要将架构的js文件链接引用到网页中,上面也有提到过JavaScript插件都是依赖与jQuery库的,所以我们当然也需要链接引用jquery的库文件

 

 

3.viewport的标签,这个标签可以修改在大部分的移动设备上面的显示,为了确保适当的绘制和触屏缩放。

4.我们使用的html5的一些新的标签,那么在IE9以下的浏览器并不支持这些标签,也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件如下

意思就是说如果用户IE浏览器的版本小于IE9,那么就会加载这两个js文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了。

就这样我们最简单的Hello World!页面呈现在了大家面前。

总结

在上面我们也启用了响应式的布局。当然有些网站可能并不需要进行响应式的布局,我们就需要进行手动的禁用这个布局,这个文档当中也有详细的说明。

在下一节中打算,主要来学习一下Bootstrap的布局。

时间: 2024-10-07 20:48:24

Bootstrap3.0学习第一轮:入门的相关文章

Bootstrap3.0学习第三轮:栅格系统案例

在前面的一篇文章<Bootstrap3.0学习第二轮:栅格系统原理 >当中主要学习了栅格系统的基本原理,以及通过简单案例进行对原理的实践. 那么本文的主要内容将主要分为以下几个部分:1.栅格选项;2.从堆叠到水平排列;3.移动设备和桌面;4.Responsive column resets;5.列偏移;6.嵌套列;7.列排序;8.总结. 栅格选项 通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的. 从上面的截图可以看出来,Bootstrap

Bootstrap3.0学习教程之JS折叠插件_javascript技巧

过渡效果 关于过渡效果 对于简单的过渡效果,只需将transition.js和其它JS文件一起引入即可.如果你使用的是编译(或压缩)好的bootstrap.js文件,就无需再单独将其引入了. What's inside Transition.js是针对 is a basic helper for transitionEnd事件的一个基本助手工具,也是对CSS过渡效果的模拟.它被其它插件用来检测当前浏览器对CSS过渡效果是否支持. 折叠 对为支持折叠功能的组件,例如accordions和导航,赋予

Bootstrap入门之Bootstrap3.0学习教程

菜单 下拉菜单 将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码. <div class="dropdown">       <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">         Dropdown  

Bootstrap3.0栅格系统的原理

通过前面博文的简单介绍,大致对于Bootstrap有了初步的了解.由于自己也只是想通过Bootstrap官网来进行简单的学习,自己能够随便搞个不是太搓的页面就可以了.所以如果你是新手或许可以来看看,对你还有那么一点儿帮助,高手请飘过. <学习第一轮>中也只是简单的介绍了如何下载文件,及进行引用下载的文件,还没有真正的进入前端的设计学习中.我也看到了广大博友们对Bootstrap3.0也具有很大的兴趣,有之前就使用过的大牛,也有和我一样正打算学习一下的盆友.小菜.至于回复中比较多的就是:希望能有

Bootstrap3.0入门学习系列:学习从现在开始

前言 当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢.本文总结了Bootstrap之所以广泛流传的 11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将 BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习. Bootstrap深受广大屌丝喜爱的原因到底是什么呢? 1.节

Bootstrap3.0入门知识

前言 当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢.本文总结了Bootstrap之所以广泛流传的11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.我也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习. Bootstrap深受广大屌丝喜爱的原因到底是什么呢? 1.节省时

js入门教程[Javascript学习第一季]

Javascript学习第一季(2) 上篇文章讲了js中的一些概念(词法结构) 和 数据类型(部分). 这章我们 继续.然后了解下js中操作数据 和 函数的 作用域.  1,对象跟基本类型之间的转换: 不管何时,只是对象非空,在布尔环境中都为true. 如; new Boolean(false);  new Number(0); new String(""); new Array(); 上面虽然内部值是false,但对象的值是true; Object à valueOf() à toS

在线教育行业第一轮换血期已至

摘要: 记得去年年底总结在线教育的一年行业动向时,我起的标题是:互联网人开始向教育行业伸出触角.然而如今三季度过去,再回顾在线教育行业,会发现莫大的变化已经形成那些被证实 记得去年年底总结在线教育的一年行业动向时,我起的标题是:互联网人开始向教育行业伸出触角.然而如今三季度过去,再回顾在线教育行业,会发现莫大的变化已经形成--那些被证实模式不错的公司都进入了B轮.C轮,而模式不靠谱.无法涨起来的公司则都纷纷倒下,第一轮换血期已至. 经过和一些创业者以及投资人的交流,我自己的判断是,在线教育行业第

Asp.Net Web API 2第一课——入门

原文:Asp.Net Web API 2第一课--入门 前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎任何的平台都会有HTTP服务库.HTTP服务可以涉及到范围广泛的客户端,包括浏览器.各种移动设备和传统的桌面应用程序. Asp.Net Web API是在.NET Framework框架上用于建立Web APIs的一个框架.在这个教程中,你将会使用Asp.Net Web API框架来创建一个能够返