第 1 章 Bootstrap 介绍

本节课我们主要了解一下 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 课程的基础,那学

习理解力就更加深入;

时间: 2024-10-25 21:01:39

第 1 章 Bootstrap 介绍的相关文章

第1章 Bootstrap介绍

学习网址:http://www.bootcss.com/ 下载网址:http://v3.bootcss.com/ 下载后一共三个文件夹 css js fonts 引入的文件 <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstr

第二百三十一节,Bootstrap 介绍

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

Windows PowerShell 学习---第一章 PowerShell介绍

第1章 PowerShell介绍 1.1.什么是PowerShell 2006年,微软发布一款叫做Windows PowerShell的全新脚本语言. PowerShell与命令提示符shell一样,PowerShell可以进行交互性地输入命令.也可以很容易的使用管道和重定向将文件和程序串联起来. 不过,PowerShell确是一个强大的面向对象的语言,可以用于复杂的脚本编程. 1.2.面向对象的命令shell 关于cmd 如果在命令提示符下输入dir,dir命令将会在屏幕打印出目录中的文件名.

第六章 图标介绍

Java 类相关图标介绍 ? ? 官网地址: http://www.jetbrains.com/idea/webhelp/symbols.html 对于各个图标,上图的 Description 写得非常详细,但是有几个还是需要进行特别的说明下. Source root,你可以理解为源目录,源码的作用就是用来专门放 Java 类文件,相对于编译出来的 class 文件而言,它就是源.我们一般默认名字叫 src 的目录就是源目录,但是其实并不是这样的,在 IntelliJ IDEA 中,即使叫 sr

《AngularJS深度剖析与最佳实践》笔记: 第二章 概念介绍

第二章 概念介绍 2.1 什么是UI? 用户界面包括内容(静态信息+动态信息), 外观, 交互. 在前端技术栈中分别由HTML, CSS和JS负责. 进一步抽象, 分别对应于MVC三个主要部分: Model, View和Controller 对应到AngularJS中,  内容: 静态内容---模板 动态内容---scope 交互---Controller 外观 CSS----样式 filter----格式 2.2. 模块(module) 模块: 把相关的一组编程元素(如类, 函数, 变量等)组

The Book of CSS3 中文版 第一章:介绍CSS3

在这一章,为了展示本书所用的代码约定我会介绍一些新的CSS3属性,但在此之前我想简要说明下CSS3的历史.很想然你不需要为了使用CSS3去了解它的历史,但是我认为有一些关于CSS3当前状态的背景是很重要的. CSS3是一个在变化的规范.规范的一部分被认为是稳定的并且在现代浏览器中得到了很好的实现:规范的另一部分应当作实验性的并且被部分地不同程度的实现:还有一部分则仍然是理论上的提议,并且没有得到任何实现.一些浏览器创建了它们自己的CSS属性,这些属性不属于任何CSS3规范也许将来也不会添加进去.

LTP 第一章 LTP介绍及内部机制

https://blog.csdn.net/yuanlaijike/article/details/78068331 LTP 第一章 LTP介绍及内部机制原创Jitwxs 发布于2017-09-23 03:21:58 阅读数 3993 收藏展开LTP系列链接: 第一章 LTP介绍及内部机制 第二章 开发Shell测试集 第三章 开发系统调用测试集 第四章 开发_exit()测试集 第五章 开发IO操作测试集 第六章 开发IO阻塞测试集 文章目录1.1 LTP介绍1.1.1 功能测试1.1.2 回

第1章 Docker介绍

第1章 Docker介绍 1.1. docker简介 Docker是一个开源的应用容器引擎,基于GO语言开发并遵从 Apache2.0 协议开源: Docker可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化: 容器完全使用沙盒机制,相互之间不会有任何借口,更重要的是容器性能开销极低: Docker从17.03版本之后分为CE(Community Edition:社区办),和EE(Enterprise Edition:企业版

Bootstrap介绍

简介 4.0以前用less编写源码,4.0以后用sass进行编写源码,现在4.0以前版本的sass方案是后面迁移过去的.4.0以后将不再兼容IE8 less学习地址:http://lesscss.cn/ 安装less 通过node.js的包管理器进行安装(要提前安装node.js环境) lessss官方有一款基于node.js的库用于编译less 使用时首先安装less 全局安装:npm install -g less 本地安装:npm install less(要先定位到你要安装的目录) 编译