前端基础 - Bootstrap简单案例

简介: 前端基础 - Bootstrap简单案例

Bootstrap简单案例

效果图

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--创建视口-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!--导入jquery文件-->
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <!--导入bootstrap.css文件-->
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <!--导入bootstrap.js-->
    <script type="text/javascript" src="../js/bootstrap.js"></script>
  </head>
  <body>
    <!--创建布局容器-->
    <div class="container-fluid">
      <!--第一个div:存放logo信息  在中等屏幕每个占4份  在小屏幕和超小屏幕占12份-->
      <div>
        <!--嵌套三个div-->
        <div class="col-md-4 col-sm-12 col-xs-12">
          <img src="../img/logo2.png" />
        </div>
        <div class="col-md-4 col-sm-12 col-xs-12">
          <img src="../img/header.jpg" />
        </div>
        <div class="col-md-4 col-sm-12 col-xs-12 text-center" style="padding-top: 20px;">
          <a href="#">登录</a>
          <a href="#">注册</a>
          <a href="#">购物车</a>
        </div>
      </div>
      <!--清除浮动-->
      <div class="clearfix"></div>
      <!--第二个div:存放导航条  不用控制响应式-->
      <div>
        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <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 navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" 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 class="active">
                  <a href="#">手机数码 <span class="sr-only">(current)</span></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 role="separator" class="divider"></li>
                    <li>
                      <a href="#">榴莲</a>
                    </li>
                    <li role="separator" class="divider"></li>
                    <li>
                      <a href="#">芒果</a>
                    </li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left pull-right">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
            </div>
            <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
        </nav>
      </div>
      <!--第三个div:存放轮播图   不用控制响应式-->
      <div>
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- 控制圆点 -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <!-- 控制图片 -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="../img/1.jpg" alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            <div class="item ">
              <img src="../img/2.jpg" alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            <div class="item">
              <img src="../img/3.jpg" alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
          </div>
          <!-- 控制左右箭头 -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
      <!--第四个div:存放热门商品-->
      <div>
        <!--上面的div-->
        <div>
          <span class="h2">热门商品</span>
          <img src="../img/title2.jpg" />
        </div>
        <!--下面的div-->
        <div>
          <!--左边的div-->
          <div class="col-md-2 col-sm-12 hidden-xs">
            <img src="../img/big01.jpg" width="190px" height="390px" />
          </div>
          <!--右边的div-->
          <div class="col-md-10 col-sm-12 col-xs-12">
            <!--商品中的大图-->
            <div class="col-md-6 hidden-sm hidden-xs">
              <img src="../img/middle01.jpg" width="500px" height="190px" />
            </div>
            <!--商品中的小图-->
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!--第五个div:存放图片 -->
      <div>
        <img src="../img/ad.jpg" width="100%" />
      </div>
      <!--第六个div:存放热门商品-->
      <div>
        <!--上面的div-->
        <div>
          <span class="h2">热门商品</span>
          <img src="../img/title2.jpg" />
        </div>
        <!--下面的div-->
        <div>
          <!--左边的div-->
          <div class="col-md-2 col-sm-12 hidden-xs">
            <img src="../img/big01.jpg" width="190px" height="390px" />
          </div>
          <!--右边的div-->
          <div class="col-md-10 col-sm-12 col-xs-12">
            <!--商品中的大图-->
            <div class="col-md-6 hidden-sm hidden-xs">
              <img src="../img/middle01.jpg" width="500px" height="190px" />
            </div>
            <!--商品中的小图-->
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 text-center">
              <img src="../img/small08.jpg" />
              <p>
                <a href="">电饭煲</a>
              </p>
              <p>
                <font color="red">$999.99</font>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!--第七个div:存放图片-->
      <div style="margin-top: 40px;">
        <img src="../img/footer.jpg" width="100%" />
      </div>
      <!--第八个div:存放友情链接-->
      <div class="text-center">
        <ul class="list-inline">
          <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>
        <p align="center">
          Copyright © 2005-2016 传智商城 版权所有
        </p>
      </div>
    </div>
  </body>
</html>
目录
相关文章
|
3月前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
181 4
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
155 1
|
18天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
28 3
|
19天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
2月前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
49 1
前端一键回到顶部案例
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
100 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
27 2
|
2月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
43 0
前端基础(十)_Dom自定义属性(带案例)
|
2月前
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
39 2

热门文章

最新文章