第一章之初识Bootstrap

学习要点：

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框架的相关知识，希望对大家有所帮助！

赞 (0)

相关推荐

  • BootStrap智能表单实战系列(十一)级联下拉的支持

    BootStrap智能表单实战系列(十一)级联下拉的支持

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst

  • BootStrap 智能表单实战系列(十)自动完成组件的支持

    BootStrap 智能表单实战系列(十)自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成

  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

    Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

    本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化 提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h

  • bootstrap学习笔记之初识bootstrap

    bootstrap学习笔记之初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了. bootstrap是一Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.bootstrap提供了优雅的html和css规范,它即是由动态css语言Less写成.是Github上的热门开源项目. 它基于jQuery框架开发,在

  • 第一篇初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了. Bootstrap(1)包含了丰富的web组件,根据这些组件,可以快速的搭建一个漂亮.功能完备的网站.其中包括以下组件:下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对话框等. (2)自带了13个jQe

  • BootStrap实现树形目录组件代码详解

    BootStrap实现树形目录组件代码详解

    需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用. 车型一共有4级目录.要使用目录树. 然后分活动和商品两种,需要能够通过不通参数来调用该组件. 车型品牌要使用字母导航. 技术实现 数据都是后端传json过来,我们ajax获取然后操作. 由于车型总数据有几万条以上,不可能一次性请求过来.这里我们使用异步的方式,每点击一次目录节点,加载它的下一级. 这里我们用两个参数来控制活动和商品的不同加载._showPrice和opened 后端传过来的第一级数据

  • BootStrap智能表单实战系列(九)表单图片上传的支持

    BootStrap智能表单实战系列(九)表单图片上传的支持

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst

  • 第一章之初识Bootstrap

    学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boostrap 历史.特点.用途,以及为什么选择 Boostrap 来开发我们的 Web 项目. 一．Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC

  • Python 机器学习第一章环境配置图解流程

    Python 机器学习第一章环境配置图解流程

    前言 本文主要是分享一下机器学习初期,基本的环境搭建.也适用于其他python工程化项目环境搭建.都差不多. Anaconda安装 anaconda官方链接:Anaconda | The World's Most Popular Data Science Platform 点击Get Started 点击Download Anaconda installers 根据自己的操作系统,下载对应的安装包. 安装anaconda 一路点下去,安装完成. 使用conda配置python3.6环境 目前py

  • XSLT轻松入门第一章：XSLT的概念

    XSLT轻松入门第一章：XSLT的概念

    1.XSLT的概念 1.1 什么是XSLT 1.2 为什么要用XSLT 1.3 XSLT的历史 1.4 什么是XPath 1.5 XSLT和CSS的比较 1.6 XSLT和IE5 1.XSLT的概念 我们首先来澄清一个概念,大家可能听说过XSL(eXtensible Stylesheet Language),XSL和我们这里说的XSLT从狭义上理解是一样的,而按照W3C的标准,XSLT的说法更严格些,因此我们在文章中统一使用XSLT的称法.它们之间具体的关系我们会在下面讲述. 1.1 什么是XS

  • JavaScript Event事件学习第一章 Event介绍

    没有event就没有脚本.可以看看任何有JavaScript代码的网页:几乎所有的例子都有一个事件触发了脚本.原因非常简单.JavaScript就是给你的页面添加内部活动:用户做一些事情然后页面做出回应. 因此JavaScript就需要一个方法能够检测到用户的动作然后才能知道什么时候做出反应.这还需要知道那个函数会被执行,函数会做一些你认为的给你的网页增色的动作.这些文字描述了如何去写这样的脚本.虽然不容易,但是这是一个很让人满足的工作. 当用户做了什么事情event就发生了,当然还有一些eve

  • JavaScript DOM学习第一章 W3C DOM简介

    在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM.对他的运作做一个大概的了解并且让你知道你可以对他们做什么. 首先是对于DOM的一些建议和DOM设计的目的,然后我会告诉你什么是节点(nodes)并且怎样通过DOM树来遍历节点.接着是如何得到一个特定的节点,以及怎样改变他的值和属性.最后就是DOM的终极目标:怎么创建一个自己的新节点. 建议 Level 1DOM是W3C制定的用来提供给任何程序语言来访问XML文档的.不管你用什么语言程序来处理XML文档,只要是Level 1DO

  • MVC 5 第一章 创建MVC 5 web应用程序

    MVC 5 第一章 创建MVC 5 web应用程序

    1. MVC 5 应用程序环境配置(参考本人机器配置) Win7 x64 Enterprise Visual Studio Express 2013 for Web or Visual Studio 2013 2. 创建一个简单的MVC 5应用程序 启动VS2013(以Administrator权限,防止权限访问错误) 点击File->New->Project创建Web Project 选择Web项目模板,点击ASP.NET Web Application,输入项目名称及解决方案名称,选择项目

  • DOS批处理高级教程 第一章 批处理基础

    第一节 常用批处理内部命令简介 批处理定义:顾名思义,批处理文件是将一系列命令按一定的顺序集合为一个可执行的文本文件,其扩展名为BAT或者CMD.这些命令统称批处理命令. 小知识:可以在键盘上按下Ctrl+C组合键来强行终止一个批处理的执行过程. 了解了大概意思后,我们正式开始学习.先看一个简单的例子! @echo off echo "欢迎来到非常BAT!" pause 把上面的3条命令保存为文件test.bat或者test.cmd然后执行,他就会在屏幕上显示以下二行话: 复制代码 代

  • JavaScript 中级笔记 第一章

    JavaScript 中级笔记 第一章

    一,回顾 首先先来回顾下DOM和事件. 1,DOM DOM在JavaScript中是应用最广泛的,大部分Web开发的编程语言都提供了相关的实现.给了开发者一个统一的接口. 看下面的例子: demo /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添加颜色 var li = document.getElementsByTagName("li"); for(var i=0;i 李老师-英语 张老师-数学 刘老师-物理 [Ctrl+A

随机推荐