1.案例一:使用Bootstrap重写网站首页
1.1案例介绍
本案例使用Bootstrap重写首页,整个案例中将使用到Bootstrap 中的各个模块。为了方便编程,将采用拆分的方式,各个模块单独编写,最后组合。
1.2案例相关技术
1.2.1BootStrap概述
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 什么是响应式布局
响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。
Bootstrap就是响应式布局最成功的实现,为了兼容不同的浏览器采用jQuery,为了适配不同的终端采用CSS3 Media Query(媒体查询)。
1.2.2.0环境搭建
1.2.2.1 下载
中文官网地址:https://v3.bootcss.com/getting-started/#download
github地址: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> <html lang="zh-CN">
<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>
<link href="../../css/bootstrap.min.css" rel="stylesheet">
head>
<body> <h1>你好,世界!h1>
<script src="../../js/jquery-1.11.0.min.js">script>
<script src="../../js/bootstrap.min.js">script> body>
html> |
1.2.2.5 完整模板(了解)
DOCTYPE html> <html lang="zh-CN">
<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>
<link href="../../css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<h1>你好,世界!h1>
<script src="../../js/jquery-1.11.0.min.js">script>
<script src="../../js/bootstrap.min.js">script> body>
html> |
1.3.1 案例相关技术
1.3.1.1 布局容器
帮助手册:https://v3.bootcss.com/css/#overview-container
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
|
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
|
1.3.1.2 栅格
帮助手册:https://v3.bootcss.com/css/#grid
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
栅格系统特点:
栅格参数:“col-*-*”
其中:
large:lg 大尺寸
medium:md 中等尺寸
small:sm 小尺寸
x-small:xs 特小尺寸
案例:
”container”>
|
1.3.1.3 按钮
帮助手册:https://v3.bootcss.com/css/#buttons
网站demo:下面各个按钮代码
|
.btn-lg、.btn-sm或.btn-xs可以设置按钮的不同尺寸
.active类设置按钮激活状态,其表现为被按下 去(颜色更深、边框颜色更深、向内投射阴影)。
1.3.1.4 响应式工具
帮助手册:https://v3.bootcss.com/css/#responsive-utilities
例如:
<div class="visible-md visible-xs">onediv> <div class="hidden-sm hidden-lg">twodiv> |
1.3.2 案例实现
<div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6"> <img src="../img/logo.png"> div> <div class="col-lg-5 col-md-4 col-sm-6 hidden-xs"> <img src="../img/header.png"> div> <div class="col-lg-3 col-md-4 col-sm-12" style="padding-top: 15px;"> <a href="#">登录a> <a href="#">注册a> <a href="#">首页a> div> div> div> |
1.4.1 案例分析
Bootstrap已经提供了导航的完整实例,通常情况下,只需要进行修改即可完成所要功能。
帮助文档:https://v3.bootcss.com/components/#navbar
反色导航条:https://v3.bootcss.com/components/#navbar-inverted
1.4.2 案例实现
<div class="container" style="margin-top: 15px;"> <nav class="navbar navbar-inverse"> <div class="container-fluid">
<div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigationspan> <span class="icon-bar">span> <span class="icon-bar">span> <span class="icon-bar">span> button> <a class="navbar-brand" href="#">首页a> div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">手机数码 <span class="sr-only">(current)span>a>li> <li><a href="#">电脑办公a>li> <li><a href="#">服装鞋帽a>li> <li><a href="#">母婴产品a>li> <li><a href="#">奢侈品a>li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全部分类 <span class="caret">span>a> <ul class="dropdown-menu"> <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> li> ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> div> <button type="submit" class="btn btn-default">Submitbutton> form>
div>
div>
nav> div> |
1.5.1 案例分析
Bootstrap已经提供了轮播图的完整案例,我们只需进行修改即可。
参考文档:https://v3.bootcss.com/javascript/#carousel
1.5.2 案例实现
|
1.6 重写首页之热卖商品
1.6.1 案例分析
热卖商品是对栅格系统的再次应用,我们将利用已有知识编写出响应式页面。
1.6.2 案例实现
<div class="container">
<div class="row" style="font-size: 30px; padding-left: 15px; margin-top: 15px;"> <span>热门商品 <img src="../img/title2.jpg">span> div>
<div class="row"> <div class="col-lg-2 col-md-2 hidden-sm hidden-xs" style="height: 400px;"> <img src="../img/big01.jpg" height="100%"> div> <div class="col-lg-10 col-md-10">
<div class="row"> <div class="col-lg-6 col-md-6 hidden-sm hidden-xs" style=" width: 480px; height: 200px;"> <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%">a> div> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> div>
<div class="row"> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small01.jpg">a><br /> <p><a href="#">电炖锅a>p> <p><a href="#">¥399a>p> div> div> div> div> div> |
1.7 重写首页之footer
1.7.1 案例分析
通过分析,该模块需要使用栅格划分为上下两行。第二行的文字信息准备使用列表,内容的居中将提供两种方案:文字居中,栅格列偏移。
参考文档:
文本对齐:https://v3.bootcss.com/css/#type-alignment
列表:https://v3.bootcss.com/css/#type-lists
栅格列偏移:https://v3.bootcss.com/css/#grid-offsetting
1.7.2 案例实现
<div class="container"> <div class="row"> <div class="" style="margin-top: 15px; padding-left: 15px;"> <img src="../img/footer.jpg" width="100%"> div>
div> div> <div style="text-align: center;margin-top: 5px;"> <ul class="list-inline"> <li><a href="info.html">关于我们a>li> <li><a>联系我们a>li> <li><a>招贤纳士a>li> <li><a>法律声明a>li> <li><a>友情链接a>li> <li><a>支付方式a>li> <li><a>配送方式a>li> <li><a>服务声明a>li> <li><a>广告声明a>li> ul> div> <div style="text-align: center;margin-top: 5px;margin-bottom:20px;"> Copyright © 2009-2017 极客商城 版权所有 div> |
bootstrap
导航