第一章之初识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 相关文章推荐
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
第二章之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 远程图片保存到本地的函数类
2008/12/08 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
CI框架附属类用法分析
2018/12/26 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
Python实现字符串格式化输出的方法详解
2017/09/20 Python
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
浅谈python写入大量文件的问题
2018/11/09 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
优秀学生主要事迹怎么写
2015/11/04 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android