Web-第五天 BootStrap学习

Bootstrap基础入门

今日内容介绍

使用bootstrap重写首页

今日内容学习目标

学会通过官方提供demo实例，完成自己需要的功能。
能够从已有html文档中，找到将要修改的位置，并进行简单调整

第1章案例：重写首页

1.1 案例介绍

将使用Bootstrap重写首页，整个案例中将使用到Bootstrap各种模块，为了方便编程，将采用拆分的原则，各个模块单独编写，最后组合。

1.2 相关技术介绍

1.2.1 BootStrap概述

1.2.1.1 什么是BootStrap

Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架（半成品）。其预定义一套CSS样式和与样式对应的jQuery代码，我们只需要提供固定HTML结构，添加固定的class样式，就可以完成指定效果的实现。
Bootstrap在jQuery的基础工作，可以理解Bootstrap就是jQuery的一个插件。
Bootstrap 使得 Web 开发更加快捷，代码优雅，美观大方。
由Twitter 公司的设计师Mark Otto和Jacob Thornton合作开发。
Bootstrap基础入门使用的都是自带CSS样式，高级开发中需要使用HTML5、CSS3、动态CSS语言Less 进行自定义开发，JavaEE课程中学习时“基础入门”。
国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来
中文官网：http://www.bootcss.com/

1.2.1.2 什么是响应式布局

响应式布局：一个网站能够兼容多个终端(手机、iPad等)，而不需要为每个终端做一个特定的版本。此概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用CSS3 Media Query （媒体查询）

1.2.2 环境搭建

1.2.2.1 下载

中文官网地址：http://d.bootcss.com/bootstrap-3.3.5.zip
GIT地址：https://github.com/twbs/bootstrap/archive/v3.3.6.zip

1.2.2.2 目录结构

1.2.2.3 内容结构

发布版，及开始使用到的Bootstrap内容结构

1.2.2.4 简洁模板

<!DOCTYPE html>

<head>

<title>Bootstrap 模板</title>

</head>

<body>

</body>

</html>

1.2.2.5 完整模板（了解）

参考文档：起步/基本模板，http://v3.bootcss.com/getting-started/#template

<!DOCTYPE html>

<html>

<head>

<!--

视口：用于设置移动浏览器显示效果。

视口的作用：在移动浏览器中，当页面宽度超出设备(device)，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示

取值：

width=device-width, 视口的宽度，大多手机浏览器视口的宽度是980

device-width 表示采用设备的宽度

initial-scale=1 初始化缩放级别,取值：1-5

minimum-scale=1 最小缩放级别

maximum-scale=1 最大缩放级别

user-scalable=no 禁用缩放

如果设置“user-scalable=no”，则“minimum-scale”和“maximum-scale”无效

下面实例表示的意思：

根据设置确定视口宽度，初始化的缩放比例是2.5，最小缩放比例1.5，最大缩放比例为3，允许在移动设置缩放

常用值：

-->

<title>Bootstrap 模板</title>

<!-- 使IE8支持HTML5元素特性和CSS3媒体查询

注意：respond.js 不能本地运行（file://），必须放置在web服务器（http:// ,暂时不用掌握）

-->

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

1.3 重写首页之topbar

1.3.1 案例相关技术

1.3.1.1 布局容器

帮助手册：全部CSS样式/概览/布局容器，http://v3.bootcss.com/css/#overview-container
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供的两个容器如下：

.container 类用于固定宽度并支持响应式布局的容器。

<div>

...

</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div>

...

</div>

例如：

1.3.1.2 栅格

帮助手册：全部CSS样式/栅格系统，http://v3.bootcss.com/css/#grid-options
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格特点

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
“列（column）” 可以作为行（row）”的直接子元素。
行使用的样式“.row”，列使用样式“col-*-*” 内容应当放置于“列（column）”内
列大于12时，将另起一行排列
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。

栅格参数：“col-*-*”

large : lg

medium : md

small: sm : sm

x small : xs

例如：

<div>

</div>

<div>

</div>

1.3.1.3 按钮

帮助手册：全部CSS样式/按钮/预定义样式，http://v3.bootcss.com/css/#buttons-options

<button type="button" class="btn btn-default">（默认样式）Default</button>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

.btn-lg、.btn-sm 或 .btn-xs 可以设置按钮的不同尺寸
.active类设置按钮激活状态，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）

1.3.1.4 响应式工具

帮助手册：全部CSS样式/响应式工具，http://v3.bootcss.com/css/#responsive-utilities-classes

例如：

<!--

设置one div，中等屏幕和超小屏幕显示

设置two div，小屏幕和超大屏幕隐藏

-->

1.3.2 案例实现

<!--

1.整个topbar划分比例：1:2:1

2.中间区域只在“大屏幕”和“中等屏幕”显示

3.整个区域在“超小屏幕”英寸

-->

<div>

</div>

</div>

</div>

1.4 重写首页之导航

1.4.1 案例分析

Bootstrap 已经提供了导航的完整实例，通常情况下，只需要进行简单修改即可。
帮助文档：组件/导航条，http://v3.bootcss.com/components/#navbar
反色导航条：组件/导航条/反色的导航条，http://v3.bootcss.com/components/#navbar-inverted

1.4.2 案例实现

<!--

1.大屏幕显示所有分类

2.中等屏幕隐藏部分分类，提供“更多”

3.超小屏幕隐藏所有分类，以“汉堡按钮”显示

-->

<div>

<div>

<div>

</button>

</div>

<li><a href="#">电脑办公 <span>(current)</span></a></li>

<ul>

</ul>

</li>

</ul>

<div>

</div>

<button type="submit" class="btn btn-default hidden-xs">Submit</button>

</form>

</div>

</div>

</nav>

</div>

1.5 重写首页之轮播图

1.5.1 案例分析

Bootstrap 已经提供轮播图的完整案例，此处我们也是进行修改即可
参考文档：JavaScript插件/ carousel，http://v3.bootcss.com/javascript/#carousel

1.5.2 案例实现

<div>

<ol>

</ol>

<!-- 轮播展示

* item 表示一个图片，与“指示器”li的个数保持一致

-->

</div>

<div>

</div>

<div>

</div>

<!-- 左右控制区 Controls

* href 用于确定点击触发的那个轮播图

-->

</a>

</a>

</div>

1.6 重写首页之热卖商品

1.6.1 案例分析

“热卖商品”模块是对栅格系统的再应用。我们将用已有的知识编写出响应式页面。

1.6.2 案例实现

<div>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

1.7 重写首页之footer

1.7.1 案例分析

通过分析，该模块需要使用栅格划分上下两行，第二行的文字信息准备使用“列表”，内容的居中将提供两种方案：文字居中，栅格列偏移

参考文档-文本对齐：全局CSS样式/排版/对齐，http://v3.bootcss.com/css/#type-alignment

参考文档-列表：全局CSS样式/排版/列表，http://v3.bootcss.com/css/#type-lists

参考文档-栅格列偏移：全局CSS样式/栅格系统/列偏移，http://v3.bootcss.com/css/#grid-offsetting

1.7.2 案例实现

<div>

</div>

<div>

<ul>

</ul>

</div>

第2章总结

Bootstrap基础入门

今日内容介绍

使用bootstrap重写首页

今日内容学习目标

学会通过官方提供demo实例，完成自己需要的功能。
能够从已有html文档中，找到将要修改的位置，并进行简单调整

第3章内容回顾

把bootstrap的标签复习一下等着案例练习

第4章案例：重写首页

4.1 重写案例之楼梯

4.1.1 案例分析

现在的网页开发中，经常看到将所有信息编写在一个页面上，然后通过上下滚动翻页进行具体信息查询，且存在一个提示信息，通知用户当前查看的位置。bootstrap提供相应功能，称为“滚动监听”。

帮助文档--胶囊式标签页：组件/导航/胶囊式标签页， http://v3.bootcss.com/components/#nav-pills

帮助文档-滚动监听：JavaScript插件/动态监听，http://v3.bootcss.com/javascript/#scrollspy

4.1.2 案例实现

4.1.2.1 样式

.elevator{

width: 70px;

position: fixed;

top: 100px;

left: 5%;

}

.elevator > ul > li > a{

padding: 5px;

}

.elevator .one{

display: none;

}

.elevator .two{

display: block;

}

.elevator .active .one{

display: block;

}

.elevator .active .two{

display: none;

}

</style>

4.1.2.2 HTML代码

</li>

</ul>

</div>

</body>

4.2 重写首页之固定滚动条

4.2.1 案例分析

当浏览器向下滚动到指定位置时，导航条悬浮在指定页面最顶端，保证整个浏览过程，都可以看到导航条。Bootstrap提供实现功能是“affix 粘贴”

参考文档：JavaScript插件/affix/用法，http://v3.bootcss.com/javascript/#via-data-attributes-3

4.2.2 案例实现

4.2.3 导航条完善

导航条不在希望的位置

添加样式

.header_fixed{

z-index: 1;

top: 0;

left: 0;

right: 0;

}

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。

Bootstrap基础入门

第1章 案例：重写首页

1.1 案例介绍

1.2 相关技术介绍

1.2.1 BootStrap概述

1.2.1.1 什么是BootStrap

1.2.1.2 什么是响应式布局

1.2.2 环境搭建

1.2.2.1 下载

1.2.2.2 目录结构

1.2.2.3 内容结构

1.2.2.4 简洁模板

1.2.2.5 完整模板（了解）

1.3 重写首页之topbar

1.3.1 案例相关技术

1.3.1.1 布局容器

1.3.1.2 栅格

1.3.1.3 按钮

1.3.1.4 响应式工具

1.3.2 案例实现

1.4 重写首页之导航

1.4.1 案例分析

1.4.2 案例实现

1.5 重写首页之轮播图

1.5.1 案例分析

1.5.2 案例实现

1.6 重写首页之热卖商品

1.6.1 案例分析

1.6.2 案例实现

1.7 重写首页之footer

1.7.1 案例分析

1.7.2 案例实现

第2章 总结

Bootstrap基础入门

第3章 内容回顾

第4章 案例：重写首页

4.1 重写案例之楼梯

4.1.1 案例分析

4.1.2 案例实现

4.1.2.1 样式

4.1.2.2 HTML代码

4.2 重写首页之固定滚动条

4.2.1 案例分析

4.2.2 案例实现

4.2.3 导航条完善

第1章案例：重写首页

第2章总结

第3章内容回顾

第4章案例：重写首页