BootStrap的介绍与案例使用

                               BootStrap的介绍与案例使用

     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

BootStrap的介绍与案例使用_第1张图片

1.2.2.2 目录结构

BootStrap的介绍与案例使用_第2张图片

1.2.2.3 内容结构

发布版,即开始使用到的Bootstrap内容结构

BootStrap的介绍与案例使用_第3张图片

 

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. 重写首页之topbar

1.3.1 案例相关技术

1.3.1.1 布局容器

帮助手册:https://v3.bootcss.com/css/#overview-container

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

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

 class="container"> ...

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

 class="container-fluid"> ...

 

1.3.1.2 栅格

帮助手册:https://v3.bootcss.com/css/#grid

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

栅格系统特点:

  1. “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  2. 通过“行(row)”在水平方向创建一组“列(column)”。
  3. 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  4. 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  5. 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
  6. 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  7. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
  8. 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
  9. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-*不存在, 也影响大屏幕设备。

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

BootStrap的介绍与案例使用_第4张图片

 

其中:

large:lg 大尺寸

medium:md 中等尺寸

small:sm 小尺寸

x-small:xs 特小尺寸

案例:

container>

 class="row"> 

     class="col-md-1">.col-md-1

 

     class="col-md-1">.col-md-1 

     class="col-md-1">.col-md-1 

     class="col-md-1">.col-md-1 

 class="col-md-1">.col-md-1 

 class="col-md-1">.col-md-1 

 class="col-md-1">.col-md-1 

 class="col-md-1">.col-md-1 

 class="col-md-1">.col-md-1 

 class="col-md-1">.col-md-1 

 class="col-md-1">.col-md-1 

 class="col-md-1">.col-md-1 

 

 class="row"> 

     class="col-md-8">.col-md-8 

     class="col-md-4">.col-md-4 

 

 class="row"> 

     class="col-md-4">.col-md-4 

     class="col-md-4">.col-md-4 

     class="col-md-4">.col-md-4 

 

 class="row"> 

     class="col-md-6">.col-md-6 

     class="col-md-6">.col-md-6 

 

1.3.1.3 按钮

帮助手册:https://v3.bootcss.com/css/#buttons

网站demo:下面各个按钮代码

 

 

 type="button" class="btn btn-default">(默认样式)Default 

 

 type="button" class="btn btn-primary">(首选项)Primary  

 type="button" class="btn btn-success">(成功)Success 

 

 type="button" class="btn btn-info">(一般信息)Info 

 

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

 

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

 

 type="button" class="btn btn-link">(链接)Link

.btn-lg、.btn-sm或.btn-xs可以设置按钮的不同尺寸

.active类设置按钮激活状态,其表现为被按下 去(颜色更深、边框颜色更深、向内投射阴影)。

 

1.3.1.4 响应式工具

帮助手册:https://v3.bootcss.com/css/#responsive-utilities

BootStrap的介绍与案例使用_第5张图片

 

例如:

<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.  
    1. 重写首页之导航栏

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. 重写首页之轮播图

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:

	
		
		
		

		
		
		
		
		
		
		
		
		bootstrap
		导航
	

 

你可能感兴趣的:(jsp,html,js,javaScript,Jquery)