Web-第五天 BootStrap学习

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/

积极的情绪,自信的孩子

作者:[美] 肯尼斯?巴里西(Kenneth Barish, Ph.D.)

当当 广告

购买

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> <!-- HTML5 约束(固定值)-->

<html> <!-- 声明语言,建议编辑-->

<head>

<!-- 响应式开发必须使用,且必须在<head>前三行 -->

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1" />

<title>Bootstrap 模板</title>

<!-- Bootstrap预定义的CSS样式、jQuery核心类库、Bootstrap类库-->

<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="../lib/jquery/jquery-1.11.0.js"></script>

<script src="../lib/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h1>你好,世界!</h1>

</body>

</html>

1.2.2.5 完整模板(了解)

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<!--此属性为文档兼容(compatible)模式声明,表示使用IE浏览器的最新渲染模式-->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--

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

视口的作用:在移动浏览器中,当页面宽度超出设备(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,允许在移动设置缩放

常用值:

<meta name="viewport" content="width=device-width, initial-scale=1">

-->

<meta name="viewport" content="width=device-width,initial-scale=2.5,minimum-scale=1.5,maximum-scale=3,user-scalable=yes" />

<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->

<title>Bootstrap 模板</title>

<!-- Bootstrap -->

<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

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

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

-->

<!--[if lt IE 9]>

<script src="../lib/html5shiv/html5shiv.min.js"></script>

<script src="../lib/respond/respond.min.js"></script>

<![endif]-->

</head>

<body>

<!--正文从此处开始-->

<h1>你好,世界!</h1>

<!--前端开发中建议:网站优化时,除了立即需要工作的js存放在header外,将大部分js文件放置在页面的末尾-->

<!-- Bootstrap必须在jQuery的基础上工作-->

<script src="../lib/jquery/jquery-1.11.0.js"></script>

<!-- Bootstrap核心包 -->

<script src="../lib/bootstrap/js/bootstrap.min.js"></script>

</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>

  • 例如:

<!--居中显示,两边有留白-->

<div style="border:1px solid #f00; height:100px;"></div>

<!--整个宽度-->

<div style="border:1px solid #f00; height:100px;"></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 class="col-md-3 col-xs-6">11</div>

<div class="col-md-3 col-xs-6">12</div>

<div class="col-md-3 col-xs-6">13</div>

<div class="col-md-3 col-xs-6">14</div>

</div>

<div>

<div class="col-md-3 col-xs-6">21</div>

<div class="col-md-3 col-xs-6">22</div>

<div class="col-md-3 col-xs-6">23</div>

<div class="col-md-3 col-xs-6">24</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-info">(一般信息)Info</button>

<button type="button" class="btn btn-warning">(警告)Warning</button>

<button type="button" class="btn btn-danger">(危险)Danger</button>

<button type="button" class="btn btn-link">(链接)Link</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,小屏幕和超大屏幕隐藏

-->

<div class="visible-md visible-xs">one</div>

<div class="hidden-sm hidden-lg">two</div>

1.3.2 案例实现

<!--

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

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

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

-->

<div class="container topbar hidden-xs">

<div>

<div class="col-md-3 col-sm-6">

<img src="../img/logo2.png"/>

</div>

<div class="col-md-6 visible-lg visible-md">

<img src="../img/header.jpg"/>

</div>

<div class="col-md-3 col-sm-6">

<a href="" class="btn btn-danger btn-sm">免费注册</a>

<a href="" class="btn btn-link btn-sm">登录</a>

<a href="" class="btn btn-link btn-sm">购物车</a>

</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>

<nav class="navbar navbar-default navbar-inverse">

<div>

<!-- Brand and toggle get grouped for better mobile display -->

<div>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span>汉堡按钮</span>

<span></span>

<span></span>

<span></span>

</button>

<a href="#">首页</a>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

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

<li><a href="#">电脑办公</a></li>

<li><a href="#">电脑办公</a></li>

<li><a href="#">电脑办公</a></li>

<li class="dropdown visible-sm">

<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多<span></span></a>

<ul>

<li><a href="#">电脑办公</a></li>

<li><a href="#">电脑办公</a></li>

<li><a href="#">电脑办公</a></li>

<li role="separator"></li>

<li><a href="#">电脑办公</a></li>

<li role="separator"></li>

<li><a href="#">电脑办公</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-left navbar-right" role="search">

<div>

<input type="text" placeholder="Search">

</div>

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

</form>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

</div>

1.5 重写首页之轮播图

1.5.1 案例分析

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

1.5.2 案例实现

<div>

<div id="index_carousel" class="carousel slide" data-ride="carousel">

<!-- 指示器 Indicators -->

<ol>

<li data-target="#index_carousel" data-slide-to="0"></li>

<li data-target="#index_carousel" data-slide-to="1"></li>

<li data-target="#index_carousel" data-slide-to="2"></li>

</ol>

<!-- 轮播展示

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

-->

<div role="listbox">

<div class="item active">

<img src="../img/1.jpg" alt="第一张图">

</div>

<div>

<img src="../img/2.jpg" alt="第2张图">

</div>

<div>

<img src="../img/3.jpg" alt="第3张图">

</div>

</div>

<!-- 左右控制区 Controls

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

-->

<a class="left carousel-control" href="#index_carousel" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

<span>前一张</span>

</a>

<a class="right carousel-control" href="#index_carousel" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

<span>下一张</span>

</a>

</div>

</div>

1.6 重写首页之热卖商品

1.6.1 案例分析

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

1.6.2 案例实现

<div>

<div>

<div>

<h2>热卖商品 <img src="../img/title2.jpg"/></h2>

</div>

</div>

<div>

<div class="col-md-2 col-sm-4 hidden-xs">

<img src="../img/products/big01.jpg" style="width: 100%;"/>

</div>

<div class="col-md-10 col-sm-8">

<div class="col-md-6 col-sm-12" style="height:200px;">

<img src="../img/products/middle01.jpg" style="height: 100%;width:100%;"/>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small01.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small02.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small03.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small04.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small05.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small06.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small07.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small08.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</div>

<div class="col-md-2 product col-sm-4 col-xs-6">

<img src="../img/products/small09.jpg"/>

<p>电器</p>

<p style="font-size: #f00;">¥998</p>

</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>

<img src="../img/footer.jpg" style="width:100%;"/>

</div>

<div>

<!--可以使用 text-center 文本居中-->

<div class="col-md-8 col-md-offset-3">

<ul>

<li><a href="#">关于我们</a></li>

<li><a href="#">联系我们</a></li>

<li><a href="#">招贤纳士</a></li>

<li><a href="#">法律声明</a></li>

<li><a href="#">友情链接</a></li>

<li><a href="#">支付方式</a></li>

<li><a href="#">配送方式</a></li>

<li><a href="#">务声明服</a></li>

<li><a href="#">广告声明</a></li>

</ul>

</div>

</div>

</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 样式

<style type="text/css">

.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代码

<body data-spy="scroll" data-target=".elevator">

<div id="f1" style="height: 400px;border:1px solid #f00;">1111</div>

<div id="f2" style="height: 400px;border:1px solid #f00;">222</div>

<div id="f3" style="height: 400px;border:1px solid #f00;">333</div>

<div id="f4" style="height: 400px;border:1px solid #f00;">4444</div>

<div class="container elevator">

<ul class="nav nav-pills nav-stacked">

<li role="presentation">

<a href="#f1"><p>导航</p><p>F1</p></a>

</li>

<li role="presentation"><a href="#f2"><p>轮播</p><p>F2</p></a></li>

<li role="presentation"><a href="#f3"><p>新品</p><p>F3</p></a></li>

<li role="presentation"><a href="#f4"><p>特色</p><p>F4</p></a></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 案例实现

<div class="container " data-spy="affix" data-offset-top="60">

4.2.3 导航条完善

  • 导航条不在希望的位置
  • 添加样式

.header_fixed{

z-index: 1;

top: 0;

left: 0;

right: 0;

}

<div class="container header_fixed" data-spy="affix" data-offset-top="60">

本文分享自微信公众号 - Java帮帮(javahelp)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码)

    springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码) 上一篇介绍了spring boot整合mybatis实现了后端的CRUD...

    Java帮帮
  • 如何在新公司建立良好形象

    如何在新公司建立良好形象 1、着装要适当   穿着不一定要名贵,但一定要合体、干净、整洁,而且颜色和图案的搭配一定要协调。鞋子应该是舒服而又引人注目的。对于男士...

    Java帮帮
  • 面试重点复习大纲

    给Java新手的一些建议-面试指南 面试重要知识点复习大纲 一、Java基础部分 (笔试与面试都会有的) 1.数组中的排序问题(笔试或者机试,前者可能性...

    Java帮帮
  • JS-【同页面多次调用】tab选项卡封装

    xing.org1^
  • 关于Web语义化的意义

    随着现在WEB(网页)的越来越火爆,WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。...

    NateHuang
  • jQueryEasyUI 的入门

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI拖动效果</title> <...

    用户5927264
  • Laravel展示产品-CRUD之show

      上一篇讲了Laravel创建产品-CRUD之Create and Store,现在我们来做产品展示模块,用到是show,①首先我们先修改controller...

    ytkah
  • 网站搭建-django-07-url

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • 前端布局总结(持续更新)

    https://segmentfault.com/a/1190000014359914

    前端博客 : alili.tech
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198

扫码关注云+社区

领取腾讯云代金券