详解JavaWeb之Bootstrap

最新推荐文章于 2022-07-31 23:00:01 发布
最新推荐文章于 2022-07-31 23:00:01 发布
阅读量305 收藏 1
点赞数
分类专栏： Java 文章标签： bootstrap java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45437546/article/details/104160824
版权

Bootstrap

1. Bootstrap介绍
Twitter对外提供的前端轻量级框架
更好的适配了前端页面开发，同时包括移动端设备

最重要的功能:
	响应式布局
	会根据当前设备的宽度来调整页面展示效果
2. 第一个Bootstrap程序
<!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 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
3. Bootstrap学习
3.1 Bootstrap栅格系统【重点】
在Bootstrap中，默认把HTML界面看作是12等分

必须存在row属性，可选container(留白展示)和container-fluid(100%全屏展示)

在这里插入图片描述

3.2 其他教程请参考以下网站：
https://v3.bootcss.com
浅汐yt
关注
专栏目录
基于javaweb的网上订餐系统bootstrap框架
03-25
饿了么的基础框架，可作于基本的参考系统，是基于javaweb 的代码
【信息检索】Java实现简易搜索引擎.zip
05-29
Java实现的简易搜索引擎，服务器SpringBoot，客户端jQuery+Bootstrap。 具体实现步骤及相应的讲解，可参考文章：https://blog.csdn.net/qq_40121502/article/details/89974810
BootStrap笔记
洺润Star的博客
10-28 177
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式...
JavaWeb基础——Bootstrap
Jorocco的博客
04-03 513
1、什么是BootStrap BootStrap是基于HTML、CSS、Javascript的前端框架，其预定义一套CSS样式与样式对应的JQuery代码，我们只需要提供固定HTML结构，添加固定的class样式就可以完成指定效果的实现。它是在JQuery的基础上工作的，可以理解BootStrap就是JQuery的一个插件，它使得Web开发更加快捷，代码优雅、美观大方。同时，BootStrap是...
Bootstrap
狗凡的博客
10-17 237
Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义...
javaweb-bootstrap
coke20的博客
03-25 611
是一个前端的开发组件，用它可以省事，现成的css工具，按钮，轮播图，导航栏，表单，表格。很方便的一个开发工具。
te-empl_Javaweb系统_java_人事管理_therefore491_bootstrap_
10-01
《基于SSH框架与Bootstrap的人事管理系统详解》 在IT行业中，JavaWeb开发是企业级应用的重要组成部分，尤其在构建高效、稳定的企业级人事管理系统时，它的重要性不言而喻。本项目“te-empl_Javaweb系统_java_人事...
bootstrap+jsp+mysql在线考试平台
02-20
【标题】"bootstrap+jsp+mysql在线考试平台"是一个基于JavaWeb技术的在线考试系统，它结合了Bootstrap前端框架和MySQL数据库，为用户提供了一个高效、易用的在线测试环境。 【描述】该在线考试平台利用jsp（Java...
湖科大javaweb课程设计--图书管理系统
06-17
【JavaWeb图书管理系统详解】 JavaWeb技术在现代软件开发领域占据着重要的地位，尤其是在构建企业级应用时。湖科大javaweb课程设计中的“图书管理系统”是一个典型的实例，它结合了多种关键技术，如MyBatis、JSP、...
美团_javaweb_Javaweb点餐_
10-04
8. **前端框架**：虽然没有具体提到，但开发中可能使用了Bootstrap或其他前端框架来增强用户体验，提供响应式布局，使得网站在不同设备上都能良好显示。 9. **错误处理和日志记录**：良好的错误处理机制和日志记录...
JavaWeb—Bootstrap、XML
weixin_47323733的博客
05-22 264
Bootstrap 概念∶一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML.CsS、JavaScrip的，它简洁灵活，使得web开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 好处: 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 响应式布局：同一套页面可以兼容不同分辨率的设备。 快速入门 下载Bootstrap 在项目中将这三个文件夹
java web页面使用bootstrap框架进行开发之引用样式
小菜鸟的HelloWorld
08-30 5077
网上说需要jQuery  顺便也就导入了。
Java Web(九)：BootStrap
yu1755128147的博客
10-17 219
一、BootStrap概述 1、简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 2、使用bootstrap的好处 定义了很多的css样式和js插件，直接可以使用这些样式和插件得到丰富的页面效果。 响应式布局（同一套页面...
JavaWeb——BootStrap
ZhangJiawen的博客
12-12 521
个人觉得，基础知识掌握之后，后面一些简单模块的实现，可以直接参考官方文档 BootStrap官网 一、BootStrap 简述 BootStrap，基于 HTML、CSS、JavaScript 的前端框架； 该框架已经预先定义好了一套 CSS 样式与相对应的 JS 代码；开发人员只需要编写 HTML 结构，添加 BootStrap 固定的 class 样式，就可以完成指定的效果； 作用： BootStrap 使得 Web 开发更加快捷、高效； BootStrap 支持响应式开发，解决了移动互
JavaWeb——【Bootstrap】——一篇文章入门Bootstrap，值得你一看！
奔跑的狮子
01-06 1782
Bootstrap 文章目录Bootstrap1.Bootstrap1.1.概述1.2.Bootstrap 包含的内容1.3.官网&下载1.4.文件结构1.4.1.源码目录1.4.2.预编译版1.5.环境配置1.5.1.CDN 方式引入2.Bootstrap使用2.1.Bootstrap中的排版2.1.1.标题2.1.2.文本2.2.Bootstrap中的表格2.2.1.基本实例2.2.2...
bootstrap java web_在java web 项目中 怎么部署BootStrap?
weixin_34069265的博客
02-13 194
BootStrap主要作用于前端美化，它也有自己的一套布局，你在使用的时候只需要将下载的文件包解压，然后添加进项目之后，在用到的html或者jsp中引用他的文件即可，不过必须注意的是，在引入js之前，一定要先把jquery引入进去，因为它依赖于jquery，还有就是，他的文件的顺序最好不要打乱，因为它的内部也有调用自己的文件，如果你把它弄乱了之后，就可能导致它找不到自己的文件，所以，直接引入是最好...
JavaWeb---BootStrap
weixin_65440201的博客
07-31 1047
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 开发更加快捷。 框架的定义:一个半成品软件，开发人员可以在框
Bootstrap对新手超有用的教程（好文）
06-07 896
我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。 Bootstrap就是这样一个简洁、直观、强悍的前端开发框架，只要...
day07-Bootstrap
weixin_43644567的博客
10-07 247
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式...
javaweb使用Bootstrap框架实现一个登录界面
最新发布
09-09
使用Bootstrap框架实现一个登录界面涉及HTML、CSS以及Bootstrap提供的组件。Bootstrap是一个流行的前端框架，它允许开发者快速地设计响应式和移动优先的网站。以下是一个简单的Bootstrap登录界面实现步骤： 1. 引入Bootstrap CSS和JS文件：你需要在你的HTML文件中引入Bootstrap的CSS和JS文件，以确保你的界面使用Bootstrap的样式和组件。 ```html <!DOCTYPE html> <html lang="zh-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录界面</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <h2 class="text-center mt-5">登录</h2> <form> <div class="form-group"> <label for="username">用户名:</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" class="form-control" id="password" placeholder="请输入密码"> </div> <button type="submit" class="btn btn-primary btn-block">登录</button> </form> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 2. 创建表单：在`<form>`标签内部，使用Bootstrap的类和组件来创建用户名和密码输入框。例如，使用`.form-group`包裹`<label>`和`<input>`来创建表单控件组，使用`.form-control`类来让输入框响应Bootstrap的样式。 3. 添加按钮：为提交按钮添加`.btn`和`.btn-primary`类，这样按钮就会继承Bootstrap定义的蓝色样式，并且保证在不同的设备上都能适应屏幕大小。 4. 响应式布局：利用Bootstrap的栅格系统，可以使登录界面在不同屏幕尺寸下都能保持良好的布局。上面的例子中，使用`col-md-6`和`offset-md-3`类使登录表单在中等尺寸以上的屏幕上居中显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值