JavaWeb---BootStrap笔记

其他 2018-09-09 04:08:02 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011583316/article/details/81481028

使用BootStrap开发一个响应式的页面出来

需求分析

开发一套响应式页面.让他能够在各种设备上显示正常,提升用户体验

技术分析

BootStap概述

  • 什么是BootStrap

    ​

  • BootStrap有什么作用

    • 复制粘贴, 能够提高开发人员的工作效率

  • 什么是响应式页面

    • 适应不同的分辨率显示不同样式,提高用户的体验

    ​

  • BootStrap的中文网

  • 下载BootStrap
  • BootStrap结构
    • 全局CSS
    • bootStrap中已经定义好了一套CSS的样式表
    • 组件
    • BootStrap定义的一套按钮,导航条等组件
    • JS插件
    • BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果
BootStrap的入门开发
  • 引入相关的头文件
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="../css/bootstrap.css" />

        <!--需要引入JQuery-->
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script type="text/javascript" src="../js/bootstrap.js" ></script>

        <meta name="viewport" content="width=device-width, initial-scale=1">
  • BootStrap的布局容器

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

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

校验表单扩展:

trigger : 触发浏览器默认行为

triggerHandler : 不会触发

is : 判断

find : 查找

老黄历:

什么json: 轻量级的数据交换格式

json对象: {“username”:”zhangsan”}

json数组: [ {“username”:”zhangsan”}, {“username”:”zhangsan”}, {“username”:”zhangsan”}]

ajax异步请求:

​ 同步和异步

  • row

    Bootstrap 栅格系统的工作原理：

    • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
    • 通过“行（row）”在水平方向创建一组“列（column）”。
    • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
    • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
    • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding

    ​

  • BootStrap的栅格系统

    • 响应式设计: 这种设计依赖于CSS3中的媒体查询
    • 栅格样式:
    • 设备分辨率大于1200 使用lg样式
    • 设备分辨率大于992 < 1200 使用md样式
    • 设备分辨率大于768 < 992 使用sm样式
    • 设备分辨率小于768使用xs样式

  • BootStrap的全局CSS

    • 定义了一套CSS
    • 对页面中的元素进行定义
    • 列表元素,表单,按钮,图片…

步骤分析

代码实现

使用BootStrap布局网站首页

需求分析

请使用BootStrap对我们的首页进行优化

技术分析

步骤分析

  1. 新建一个HTML页面.引入bootStrap相关的js和CSS
  2. 定义一个整体的div, 将整体的div分成8个部分
  3. 完成没部分的内容显示

代码实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            准备工作:
            <meta name='viewport'>
            1.导入bootstrap css文件
            2.导入JQuery
            3.bootstrap.js

            4.写一个div  class = container 支持响应式的布局容器

        -->
        <link rel="stylesheet" href="../css/bootstrap.min.css">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--

        jQuery文件。务必在bootstrap.min.js 之前引入
         -->
        <script src="../js/jquery-1.11.0.js"></script>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="../js/bootstrap.min.js"></script>

    </head>

    <body>
        <div class="container">

            <div class="row">
                <div class="col-md-4">
                    <img src="../img/logo2.png" />
                </div>
                <div class="col-md-4 hidden-xs">
                    <img src="../img/header.png" />
                </div>
                <div class="col-md-4">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

            <!--菜单-->
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-inverse" role="navigation">
                        <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">
                                <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="#">手机数码</a>
                                    </li>
                                    <li>
                                        <a href="#">鞋靴箱包</a>
                                    </li>
                                    <li>
                                        <a href="#">电脑办公</a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">所有分类 <span class="caret"></span></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li>
                                                <a href="#">手机数码</a>
                                            </li>
                                            <li>
                                                <a href="#">鞋靴箱包</a>
                                            </li>
                                            <li>
                                                <a href="#">电脑办公</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#">Separated link</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li>
                                                <a href="#">One more separated link</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <form class="navbar-form navbar-right" role="search">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="请输入要搜索的商品">
                                    </div>
                                    <button type="submit" class="btn btn-default">搜索</button>
                                </form>

                            </div>
                            <!-- /.navbar-collapse -->
                        </div>
                        <!-- /.container-fluid -->
                    </nav>
                </div>
            </div>

            <div>
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <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>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></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"></span>
    <span class="sr-only">Next</span>
  </a>
</div>



            </div>

            <!--最新商品这里-->
            <div class="row">
                <div class="col-md-12">
                    <h3>最新商品<img src="../images/title2.jpg"/></h3>
                </div>
            </div>

            <!--商品部分 -->
            <div class="row">
                <!--左边div-->
                <div class="col-md-2 hidden-sm hidden-xs">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%" />
                </div>
                <!--右边div-->    
                <div class="col-md-10">
                    <!--上面部分-->
                    <div class="row">
                        <!--中等广告图-->
                        <div class="col-md-6">
                            <img src="../products/hao/middle01.jpg" width="100%" />
                        </div>

                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                    </div>
                    <!--下面部分-->
                    <div class="row">
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <img src="../products/hao/ad.jpg" width="100%" />
                </div>
            </div>




            <!--最新商品这里-->
            <div class="row">
                <div class="col-md-12">
                    <h3>最新商品<img src="../images/title2.jpg"/></h3>
                </div>
            </div>

            <!--商品部分 -->
            <div class="row">
                <!--左边div-->
                <div class="col-md-2 hidden-sm hidden-xs">
                    <img src="../products/hao/big01.jpg" width="100%" height="100%" />
                </div>
                <!--右边div-->    
                <div class="col-md-10">
                    <!--上面部分-->
                    <div class="row">
                        <!--中等广告图-->
                        <div class="col-md-6">
                            <img src="../products/hao/middle01.jpg" width="100%" />
                        </div>

                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                    </div>
                    <!--下面部分-->
                    <div class="row">
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>
                        <!--商品项-->
                        <div class="col-md-2 col-xs-4" style="text-align: center;">
                            <img src="../products/hao/small01.jpg" />
                            <p>豆浆机</p>
                            <p>$998</p>
                        </div>

                    </div>
                </div>
            </div>


            <!--页脚广告-->
            <div>
                <img src="../image/footer.jpg" width="100%" />
            </div>
            <!--网站声明-->
            <div style="text-align: center;">
                <a href="http://www.itheima.com">关于我们</a>   
                    <a href="http://www.itheima.com">联系我们</a>   
                    <a href="http://www.itheima.com">招贤纳士</a>   
                    <a href="http://www.itheima.com">法律声明</a>   
                    <a href="http://www.itheima.com">友情链接</a>   
                    <a href="http://www.itheima.com">支付方式</a>   
                    <a href="http://www.itheima.com">配送方式</a>   
                    <a href="http://www.itheima.com">服务声明</a>   
                    <a href="http://www.itheima.com">广告声明</a>   
                    <br />
                    Copyright © 2005-2016 传智商城 版权所有
            </div>

        </div>
    </body>

</html>

猜你喜欢

转载自blog.csdn.net/u011583316/article/details/81481028
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022