JavaWeb---BootStrap

最新推荐文章于 2024-04-26 18:25:14 发布
最新推荐文章于 2024-04-26 18:25:14 发布
阅读量849 收藏 5
点赞数 2
分类专栏： JavaWeb 文章标签： javascript bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65440201/article/details/126091844
版权

目录

1.Bootstrap：

1.1概念：

1.2快速入门

1.2响应式布局

1.2.1实现：

1.2.2步骤：

1.3CSS样式和JS插件

1.3.1全局CSS样式：

1.3.2组件：

1.3.3插件：

1.Bootstrap：

1.1概念：

一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
框架的定义:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

好处：
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局：同一套页面可以兼容不同分辨率的设备。

1.2快速入门

1. 下载Bootstrap：bootstrap-3.3.7-dist
2. 在项目中将这三个文件夹复制：


3. 创建html页面，引入必要的资源文件：

 

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>

</body>
</html>

1.2响应式布局

同一套页面可以兼容不同分辨率的设备。

1.2.1实现：

依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

1.2.2步骤：

1. 定义容器：相当于之前的table。
容器分类：
container：两边留白。
container-fluid：每一种设备都是100%宽度。
2. 定义行：相当于之前的tr，样式：row。
3. 定义元素：指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
设备代号：
xs：超小屏幕 手机 (<768px)：col-xs-12
sm：小屏幕 平板 (≥768px)
md：中等屏幕 桌面显示器 (≥992px)
lg：大屏幕 大桌面显示器 (≥1200px)

注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行（不向下兼容）。

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .inner{
            border:1px solid red;
        }

    </style>
</head>
<body>
    <!--1.定义容器-->
    <div class="container">
        <!--2.定义行-->
        <div class="row">
            <!--3.定义元素
                在大显示器一行12个格子
                在pad上一行6个格子
            -->
            <!--<div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>-->
            <div class="col-md-4 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>

        </div>

    </div>

</body>
</html>

1.3CSS样式和JS插件

1.3.1全局CSS样式：

1.按钮：class="btn btn-default"
2.图片：class="img-responsive"：图片在任意尺寸都占100%
图片形状：
<img src="..." alt="..." class="img-rounded">：方形
<img src="..." alt="..." class="img-circle"> ： 圆形
<img src="..." alt="..." class="img-thumbnail"> ：相框

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>

<a class="btn btn-default" href="#" >Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default"  type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

<br>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>


<hr>
<!--图片在任意尺寸都占100%-->
<img src="img/banner_1.jpg" class="img-responsive"/>
<!--以下三种是图片的不同形状-->
<img src="img/banner_1.jpg" class="img-responsive img-rounded" />
<img src="img/banner_1.jpg" class="img-responsive img-circle"/>
<img src="img/banner_1.jpg" class="img-responsive img-thumbnail"/>


</body>
</html>

3.表格
table
table-bordered
table-hover

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body>

    <table class="table table-bordered table-hover">

        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>

        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>002</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>003</td>
            <td>张三</td>
            <td>23</td>
        </tr>

    </table>

<hr><hr><hr>


    <form class="form-horizontal">
        <div class="form-group">
            <label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label>

           <div class="col-sm-10">
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
           </div>
        </div>
        <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
        </div>
    </form>
</body>
</html>

4.表单

给表单项添加：class="form-control"

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<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="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

</body>
</html>

1.3.2组件：

导航条
分页条

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="disabled">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li class="active"><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>

1.3.3插件：

轮播图

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap HelloWorld</title>

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


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<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/banner_1.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_2.jpg" alt="...">
        </div>
        <div class="item">
            <img src="img/banner_3.jpg" alt="...">
        </div>

    </div>

    <!-- Controls -->
    <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>



</body>
</html>

小夫敲代码
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据库前后端交互 从后端到前端入门教程二 (Tomcat、MySQL、Bootstrap、JAVA Servlet)
张时贰的博客
12-26 4146
数据库前后端交互 从后端到前端入门教程二 文章目录前言前期准备设计Web测试 前言 分两篇博客，以学生管理系统为例子，实现前后端交互(这里并没有设计完成，重在操作过程！).以下涉及得到一些软件会从安装开始介绍 仅供参考入门学习基本操作，代码部分还是得自己学 #mermaid-svg-QoTUu6sB5iimWdIX .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#
JavaWeb--------BootStrap基础
詹煜彪9527
03-07 8107
一. Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什么使用 Boots...
JAVA bootstrap
simplezhao的博客
07-29 1392
简介 Bootstrap，基于HTML、cSS、JAVASCRIPT的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效）。 开发人员只需要编写HTML结构,添加 bootstrap固定的class样式,就可以轻松完成指房效果的实现。 作用: Bootstrap使得Web开发更加快捷，高效。 BootStrap,支持响应式开发，解决了移动互联网前端开发问题 响应式布局 响应式布局:一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独
JavaWeb快速入门--Bootstrap
2401_84103512的博客
04-26 365
针对以上面试题，小编已经把面试题+答案整理好了。
【Java学习笔记（三十一）】之Bootstrap介绍与使用，响应式布局的使用
开发小鸽
08-30 674
本文章由公号【开发小鸽】发布！欢迎关注！！！ 老规矩–妹妹镇楼： 一． Bootstrap （一） 概述        一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 （二） 优势        1. Bootstrap框架定义了很多的css样式和js插件，
自己动手搭网站（四）：用bootstrap写几个简单的页面
热门推荐
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
javaweb-社区团购系统.zip
03-21
【标题】"javaweb-社区团购系统.zip" 暗示了这是一个基于JavaWeb技术构建的社区团购系统的源代码包。在JavaWeb开发中，我们通常会涉及到一系列的技术栈和概念，包括但不限于Servlet、JSP、JavaBean、MVC模式、数据库...
JavaWeb -校园在线二手物品交易平台
07-06
项目开发过程中，开发者可能还使用了其他工具和库，如MySQL数据库存储数据、Spring Security进行权限控制、Spring Data JPA简化数据库操作、Bootstrap或自定义CSS样式来美化界面等。用户注册、登录、密码找回、...
1Javaweb-后台管理系统-管理员管理
04-14
5. **前端技术**：管理员界面的创建通常会用到HTML、CSS和JavaScript，配合前端框架如Bootstrap进行美化和布局。对于更复杂的交互，可能还需要引入Ajax实现异步请求，或者使用Vue、React等现代前端框架。 6. **安全...
javaweb-心理咨询管理系统.zip
03-21
前端可能使用HTML、CSS和JavaScript，搭配Bootstrap或Vue.js等前端框架，创建响应式布局，适应不同设备的访问需求。 总的来说，"javaweb-心理咨询管理系统"是一个综合运用了JavaWeb技术、MVC架构、数据库设计、安全...
JavaWeb--用户管理系统.zip
07-16
JavaWeb--用户管理系统 目的： 编写一个具有增删改查的用户管理系统 用到的工具：IDEA、Navicat、MySQL、Tomcat、Chrome、JDK1.8等。 使用的技术：Servlet、JDBC、Druid连接池、HTML+CSS+JS、BootStrap、JSP等。 ...
最适合入门SSM+bootstrap完整项目
04-02
项目共5个小模块，非常适合入门！
springboot+bootstrap项目源码
05-31
springboot项目源码，通过thymeleaf、bootstrap实现页面后台交互，菜单展示
JavaWeb Bootstrap02主页搭建
weixin_62270300的博客
05-04 594
上期回顾 Bootstrap01基本使用https://blog.csdn.net/weixin_62270300/article/details/124547772?spm=1001.2014.3001.5501 目录 一、顶部页面 top.jsp(顶部代码) 二、首页 index.jsp(主页界面) 三、增加商品界面 insert.jsp(增加界面) 一、顶部页面 点击右边图标下拉出来的效果如下👇 点击哪个跳哪个界面 top.jsp(顶部代码) <%@...
JavaWeb——BootStrap
ZhangJiawen的博客
12-12 216
个人觉得，基础知识掌握之后，后面一些简单模块的实现，可以直接参考官方文档 BootStrap官网 一、BootStrap 简述 BootStrap，基于 HTML、CSS、JavaScript 的前端框架； 该框架已经预先定义好了一套 CSS 样式与相对应的 JS 代码；开发人员只需要编写 HTML 结构，添加 BootStrap 固定的 class 样式，就可以完成指定的效果； 作用： BootStrap 使得 Web 开发更加快捷、高效； BootStrap 支持响应式开发，解决了移动互
【java初学】BootStrap
九离的博客
04-06 212
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套
Java学习笔记之框架bootstrap
qq_41145193的博客
02-11 248
一、概念 一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简介灵活，使得web开发更加快捷。 框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。 好处： （1）定义了很多的CSS样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 （2）响应式布局。...
bootstrap之面板制作登录界面+ajax与后台交互
weixin_33937913的博客
05-25 939
实际使用中bootstrap功能实在强大，用.panel制作一个最简单无验证码的登录界面，再用AJAX与后端进行数据传输交互。 引入bootstrap要先引入css，再引入js,这样避免出现混乱。代码如下： <!-- Bootstrap核心CSS文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/tw...
bootStrap基础 前后台数据交互方法
qq_41807561的博客
10-10 2503
浏览器不兼容|登录|select下拉框使用|二级菜单|ajax提交|bootstrap表格|jstree|js校验|echarts图表|summernote图片上传|文件上传下载|树形菜单
javaweb网上蛋糕商城--前台开发实验思路
最新发布
06-14
在Java Web上开发一个网上蛋糕商城的前台，主要分为用户界面设计、交互功能实现和数据展示等几个关键部分。以下是前台开发的一般实验思路： 1. **需求分析**: - 确定商城的主要功能，如商品浏览、搜索、购物车管理、订单流程（添加、确认、支付）和用户登录注册等。 - 明确界面风格，如响应式设计以适应不同设备。 2. **界面设计**: - 使用HTML/CSS构建静态页面布局，包括导航栏、轮播图、商品列表页、详情页和用户个人中心等。 - 利用Bootstrap或其他前端框架进行快速样式搭建。 3. **JavaScript或jQuery**: - 实现动态效果，如图片轮播、下拉菜单、按钮点击事件处理等。 - 利用AJAX异步加载数据，提升用户体验，避免页面刷新。 4. **UI组件化**: - 使用前端框架提供的组件库，比如React、Vue或Angular，提高开发效率并保证代码复用。 5. **用户认证与权限管理**: - 使用session或JWT进行用户身份验证，确保用户只能访问自己的数据。 - 设计用户权限系统，如管理员能查看和修改所有数据，普通用户只能查看和购买。 6. **数据绑定和模型驱动**: - 如果使用MVVM架构，如Angular，利用双向数据绑定连接视图和模型。 7. **前端状态管理**: - 使用Redux或Vuex管理应用状态，保证状态的一致性和可预测性。 8. **SEO优化**: - 为搜索引擎优化考虑，确保页面元素有正确的元信息和结构。 9. **性能优化**: - 压缩和合并CSS/JS文件，减少HTTP请求。 - 利用CDN加速资源加载。 10. **测试**: - 编写单元测试和集成测试，确保各个功能正常工作。 - 进行用户验收测试，收集用户反馈。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值