注册用户享全站资源 并成为粉丝 不定时福利发放
 
非盈利性学习社区
分享网站

分享网站

让更多人可以获取免费教程

合作广告

合作广告

最大优惠

人事面试

人事面试

套路太深

面试过程中,面试官会向应聘者发问,而应聘者的回答将成为面试官考虑是否接受他的重要依据。对应聘者而言,了解这些问题背...

部分企业人事部收到求职者简历后,会预先进行一轮电话面试,来考察求职者的综合素质,因此了解懂得求职面试的基本技巧,将...

1、着装要适当  穿着不一定要名贵,但一定要合体、干净、整洁,而且颜色和图案的搭配一定要协调。鞋子应该是舒服而又引...

一、隐瞒真实个人资料的不诚实者简历是求职的第一步,只有面试官对你的简历有兴趣才会通知你面试。在简历中适当地突出个人...

一、首先你得已经成为公司里“最好”的程序员,或者你已经找不到可作为老师和导师的人关于这一点,很多人都会过度自信,所...

程序人生

程序人生

技术的另一面

程序员不是你们眼中的程序猿-后IT时代。程序猿是一种非常特殊的、可以从事程序开发、维护的动物。

1.某程序员的QQ签名:为API生,为框架死,为debug奋斗一辈子,吃符号亏,上大小写的当,最后死在需求上2.去...

Web应用,最常见的研发语言是Java和PHP。后端服务,最常见的研发语言是Java和C/C++。大数据,最常见的...

1、第一份工作的选择很重要。不要想着我没有选择的机会,有份工作就不错了,现实情况是进了一行,想出来很难,想转行更难...

       本文摘自一位工作五年程序老哥的演讲。演讲大概讲了他走过的五年时光,反思自己的职业工作,反思自己的生...

程序员段子

程序员段子

乐一乐

皇上太拼了......  被电视剧蒙骗了好多年,三观毁灭!  这是传说中“帅气的王爷”与“美腻的王妃”,像不像屠夫...

足够自信的程序猿自信是通往成功路上的指明灯,自信的程序员更是加班夜里的探照灯,总能让BUG无所遁形。效率高的程序猿...

最近这段时间,小编絮絮叨叨说了很多严肃的东西,今天说点好玩的,轻松一下。娱乐圈有潜规则,小编认为IT圈一样,也有潜...

今天来说说一位女青年的老公以及他们的事儿。如有雷同,纯属巧合。十一年前我和程序猿第一次见面,还是大一军训期间。我甚...

公司高层公司副总A:咱们开个会研究一下这个事情怎么处理。公司副总B:如果老板没有救成功,下任是谁呢?会不会影响公司...

Web-第五天 BootStrap学习【悟空教程】
发表时间: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">


全部评论(0条)
亲~快来评论噢!
Java帮帮公众号生态

Java帮帮公众号生态

总有一款适合你

Java帮帮-微信公众号

Java帮帮-微信公众号

将分享做到极致

Python帮帮-公众号

Python帮帮-公众号

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

大数据驿站-微信公众号

大数据驿站-微信公众号

一起在数据中成长

九点编程-公众号

九点编程-公众号

深夜九点学编程

程序员服务区-公众号

程序员服务区-公众号

吃喝玩乐,听学吐画

Java帮帮学习群生态

Java帮帮学习群生态

总有一款能帮到你

Java学习群

Java学习群

与大牛一起交流

大数据学习群

大数据学习群

在数据中成长

九点编程学习群

九点编程学习群

深夜九点学编程

python学习群

python学习群

人工智能,爬虫

测试学习群

测试学习群

感受测试的魅力

Java帮帮生态承诺

Java帮帮生态承诺

一直坚守,不负重望

初心
勤俭
诚信
正义
分享
战略合作
关于我们
友链申请
友链交换:加帮主QQ2524138991 留言即可 24小时内答复  
快速换友链:在你的网站设置好Java帮帮-IT免费资源网友链,截图发给帮主即可
会员登录
获取验证码
登录
登录
我的资料
留言
回到顶部