第一章之初识Bootstrap


Posted in Javascript onApril 25, 2016

学习要点:

1.Bootstrap 概述

2.Bootstrap 特点

3.Bootstrap 结构

4.创建第一个页面

5.学习的各项准备

本节课我们主要了解一下 Boostrap 历史、特点、用途,以及为什么选择 Boostrap 来开发我们的 Web 项目。

一.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

瓢城 Web 俱乐部官网:http://www.ycku.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>

五.学习的各项准备

1.开发工具, 我们使用Sublime Text3作为Bootstrap的开发工具, 并且安装了Emmet代码生成插件;

2.测试工具,除了常规的现代浏览器,其次就是作为移动端的测试工具,我们这里采用的是 Opera Mobile Emulator,和 Chrome 的移动 Web 测试工具。

3.所需基础,至少有 HTML5 第一季课程的基础,Bootstrap 内置了很多 jQuery 插件,虽然使用起来比 jQuery 或 JS 本身要简单的多,但如果有 jQuery 和 JS 课程的基础,那学习理解力就更加深入;

4.课程分辨率:基础课程,我们使用 1024 x 768 来录制,但某些特殊部分,比如响应式和项目课程,需要大分辨率录制,会采用 1440 x 900 来录制。

以上所述是小编给大家介绍的Bootstrap框架的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
js 自制滚动条的小例子
Mar 16 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
js实现简单进度条效果
Mar 25 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 #Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 #Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 #Javascript
第四章之BootStrap表单与图片
Apr 25 #Javascript
第五章之BootStrap 栅格系统
Apr 25 #Javascript
详解Bootstrap插件
Apr 25 #Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 #Javascript
You might like
PHP 图片文件上传实现代码
2010/12/29 PHP
php分页函数示例代码分享
2014/02/24 PHP
摘自启点的main.js
2008/04/20 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python实现弹窗祝福效果
2019/04/07 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
内衣营销方案
2014/03/15 职场文书
协议书格式
2014/04/23 职场文书
三八妇女节致辞
2015/07/31 职场文书
2015年教师节广播稿
2015/08/19 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers