注册用户享全站资源 并成为粉丝 不定时福利发放
 

Web-第五天 BootStrap学习【悟空教程】

74
发表时间:2018-11-07 14:25来源:Java帮帮-微信公众号

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

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

   <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帮帮社区

微信赞助-Java帮帮社区

非盈利性学习社区

支付宝赞助-Java帮帮社区

支付宝赞助-Java帮帮社区

将分享做到极致

大公司资讯
文章附图

近日,在美国推出满一年的Facebook视频服务Watch,宣布正式向全球推广,这预示着视频领域中,YouTube...

文章附图

据彭博社北京时间9月19日报道,科技行业最引人注目的法律大战可能正在进入尾声。据高通CEO史蒂夫·莫伦科夫(Ste...

Java帮帮公众号生态

Java帮帮公众号生态

总有一款适合你

Java帮帮-微信公众号

Java帮帮-微信公众号

将分享做到极致

Python帮帮-公众号

Python帮帮-公众号

人工智能,爬虫,学习教程

大数据驿站-微信公众号

大数据驿站-微信公众号

一起在数据中成长

九点编程-公众号

九点编程-公众号

深夜九点学编程

程序员服务区-公众号

程序员服务区-公众号

吃喝玩乐,听学吐画

Java帮帮学习群生态

Java帮帮学习群生态

总有一款能帮到你

Java学习群

Java学习群

与大牛一起交流

大数据学习群

大数据学习群

在数据中成长

九点编程学习群

九点编程学习群

深夜九点学编程

python学习群

python学习群

人工智能,爬虫

测试学习群

测试学习群

感受测试的魅力

Java帮帮生态承诺

Java帮帮生态承诺

一直坚守,不负重望

初心
勤俭
诚信
正义
分享
合作品牌 非盈利生态-优质内容分享传播者
关于我们
友链申请
友链交换:加帮主QQ2524138991 留言即可 24小时内答复  
全站内容非商业用途,内容来源于网友,并遵循 CC BY-NC 4.0 许可,如有异议请联系客服。
会员登录
获取验证码
登录
登录
我的资料
留言
回到顶部