BootStrap框架入门到精通视频课程 1:Bootstrap概述

                                                            Bootstrap概述

本节课所讲内容:

1.Bootstrap 概述

2.Bootstrap 特点

3.Bootstrap 结构

4.创建第一个页面

5.如何兼容低版本IE6,7,8浏览器

 

                                                                                 主讲教师:Head老师

 

一.Bootstrap  概述

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。2010 年 6 月,Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后,Bootstrap 最终被确定下来,并于 2011 年 8 月发布。

经过很长时间的迭代升级,由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。Bootstrap 最为重要的部分就是它的响应式布局,通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。

 

Bootstrap 下载及演示:

国内文档翻译官网:http://www.bootcss.com

 

二.Bootstrap  特点

Bootstrap 非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下:

(1).跨设备、跨浏览器

可以兼容所有现代浏览器,包括比较诟病的 IE7、8。当然,本课程不再考虑 IE9 以下

浏览器。

(2).响应式布局

不但可以支持 PC 端的各种分辨率的显示,还支持移动端 PAD、手机等屏幕的响应式切

换显示。

(3).提供的全面的组件

Bootstrap 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组

件,方便开发者调用。

(4).内置 jQuery 插件

Bootstrap 提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web 中各种

常规特效。

(5).支持 HTML5、CSS3

HTML5 语义化标签和 CSS3 属性,都得到很好的支持。

(6).支持 LESS 动态样式

LESS 使用变量、嵌套、操作混合编码,编写更快、更灵活的 CSS。它和 Bootstrap 能

很好的配合开发。

三.Bootstrap  结构

首先,想要了解 Boostrap 的文档结构,需要在官网先把它下载到本地。Bootstrap

下载地址如下:

Bootstrap 下载地址:http://v3.bootcss.com/ (选择生产环境即可,v3.3.4)

解压后,目录呈现这样的结构:

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ └── bootstrap-theme.min.css

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

主要分为三大核心目录:css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个 css 后缀的文件,其中包含 min 字样的,是压缩版本,一般使用

这个;不包含的属于没有压缩的,可以学习了解 css 代码的文件;而 map 后缀的文件则是

css 源码映射表,在一些特定的浏览器工具中使用。

2.js 目录包含两个文件,是未压缩和压缩的 js 文件。

3.fonts 目录包含了不同后缀的字体文件。

 

四.创建第一个页面

我们创建一个 HTML5 的页面,并且将 Bootstrap 的核心文件引入,然后测试是否正常

显示。

//第一个 Bootstrap

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<title>Bootstrap 介绍</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>

<button class="btn btn-info">Bootstrap</button>

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

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

</body>

</html>

 

五. 如何兼容低版本IE6,7,8浏览器

bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可

兼容HTML5

网址:http://www.bootcdn.cn/html5shiv/

<script src=" //cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>

兼容CSSS3

网址:http://www.bootcdn.cn/respond.js/

<script src=" //cdn.bootcss.com/respond.js/1.4.2/respond.min.js "></script>

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值