JavaWeb快速入门--Bootstrap

最新推荐文章于 2024-04-11 07:11:53 发布
最新推荐文章于 2024-04-11 07:11:53 发布
阅读量831 收藏
点赞数
分类专栏： javaweb学习 文章标签： bootstrap javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lzy410992/article/details/105644932
版权

上一篇：JavaWeb学习总结04–JS(2)
下一篇：JavaWeb学习总结06–XML

Bootstrap：

Bootstarp访问网址：https://v3.bootcss.com/
在这里插入图片描述

Bootstrap： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。在其中，定义了很多的css样式和js插件。我们开发时可以直接可以使用这些样式和插件得到丰富的页面效果。

快速入门
1. 下载Bootstrap：https://v3.bootcss.com/
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.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>

</body>
</html>

全局CSS样式

在Bootstrap提供了许多可以控制CSS样式的方法，我们可以通过可以通过 class 设置样式，对相应的属性进行控制，使我们的Web界面更加丰富多彩。
在这里插入图片描述
CSS样式：

* 按钮：class="btn btn-default"
	* 图片：
		*  class="img-responsive"：图片在任意尺寸都占100%
		*  图片形状
			*  <img src="..." alt="..." class="img-rounded">：方形
			*  <img src="..." alt="..." class="img-circle"> ： 圆形
			*  <img src="..." alt="..." class="img-thumbnail"> ：相框
	* 表格
		* table
		* table-bordered
		* table-hover
	* 表单
		* 给表单项添加：class="form-control"

组件：

<!-- 导航条-->
<nav class="navbar navbar-default">
  <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="#">Brand</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>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <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>

<!-- 分页条-->
 <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><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>

插件：

<!-- 轮播图-->
<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="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." 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" 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>

上一篇：JavaWeb学习总结04–JS(2)
下一篇：JavaWeb学习总结06–XML

龙源lll
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javaweb数据分析项目源码-spring-boot-learning-examples:SpringBoot工程实践，快速上手Spring
06-04
基础入门 └── Web开发 └── Weex └── Bootstrap └── thymeleaf └── 缓存使用 └── Ehcache └── Caffeine └── Guava Cache └── 数据库 └── Mybatis └── MySQL └── Spring其他功能 ...
java后台开发入门（springboot快速入门）
06-13
带领大家借助当下比较流行的springboot框架快速开发属于自己的java后台。即便你是编程小白，没有任何编程基础也可以学习本课程。 知识点 1，Java 2，springboot 3，freemarker 4，bootstrap4.3 5，Javaweb 6，微信小...
JavaWeb快速入门--Bootstrap，java基础知识点面试题
m0_64384302的博客
12-16 221
： 圆形 ：相框 表格 table table-bordered table-hover 表单 给表单项添加：class=“form-control” 组件： Toggle navigation </but 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》 【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 完整内容开源分享 ton> Brand Link (curren...
JavaWeb快速入门--Bootstrap，springboot书籍pdf
2301_78416732的博客
04-04 407
又是一年求职季，在这里，我为各位准备了一套Java程序员精选高频面试笔试真题，来帮助大家攻下BAT的offer，题目范围从初级的Java基础到高级的分布式架构等等一系列的面试题和答案，用于给大家作为参考以下是部分内容截图一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
JavaWeb快速入门--Bootstrap，java获取视频时长
m0_63176399的博客
10-31 74
你好，世界！ []( )全局CSS样式 在Bootstrap提供了许多可以控制CSS样式的方法，我们可以通过可以通过 class 设置样式，对相应的属性进行控制，使我们的Web界面更加丰富多彩。 CSS样式： 按钮：class=“btn btn-default” 图片： class=“img-responsive”：图片在任意尺寸都占100% 图片形状 ：方形 ： 圆形 ：相框 表格 table table-bordered table-...
JavaWeb快速入门--Bootstrap，面试官面试Java中级开发工程师
m0_46608024的博客
09-11 91
组件： <!-- 导航条--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class
JavaWeb快速入门--Bootstrap，java基础面试题汇总
最新发布
2301_79098963的博客
04-11 916
2. 在项目中导入资源3. 创建html页面，引入必要的资源文件上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！BootstrapjQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。
面试的总结，JavaWeb快速入门--Bootstrap，十年开发经验Java架构师
2401_83977569的博客
04-08 557
在这个部分总结了2019年到目前为止Java常见面试问题，取其面试核心编写成这份文档笔记，从中分析面试官的心理，摸清面试官的“套路”，可以说搞定90%以上的Java中高级面试没一点难度。本节总结的内容涵盖了：消息队列、Redis缓存、分库分表、读写分离、设计高并发系统、分布式系统、高可用系统、SpringCloud微服务架构等一系列互联网主流高级技术的知识点。（上述只是一个整体目录大纲，每个点里面都有如下所示的详细内容，从面试问题——分析面试官心理——剖析面试题——完美解答的一个过程）
JavaWeb快速入门--XML
龙源IT 的博客
04-21 843
概念：Extensible Markup Language 可扩展标记语言，它是互联网数据传输的重要工具，通过配置xml文件，可以通过网络在互联网任何的平台传输，不受编程语言的限制。XML 语法上和 HTML 比较相似，但是 HTML 中的元素是固定的，结构比较松散，可以十分简单的展示数据，而 XML 的标签是用户可以自定义的（ `<user> <student>`），对语法要求比较严格，一般用来存储数据和传输。所以我们在编程过程中往往会遇到xml作为配置文件或者简单的xml格式数据存储文件。
JavaWeb---BootStrap
weixin_65440201的博客
07-31 811
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 开发更加快捷。 框架的定义:一个半成品软件，开发人员可以在框
JavaWeb快速入门--JavaScript(2)
龙源IT 的博客
04-23 847
作为一种嵌入到HTML页面内的解释型程序设计语言，JavaScript脚本语言的基本构成是由语句、函数、对象、属性等来实现的。JavaScript语句是发给浏览器的命令，这些命令是告诉浏览器要做的事情。比如我们之前打印九九乘法表时使用的document.write("...");语句，就是再告诉浏览器向页面输出这样一段文本。和其他编程语言一样，一般情况下我们语句结尾出都会加一个分号来表示语句的结束。对象学习，BOM，DOM
百度地图毕业设计源码-Tmall_SSH:技术栈Struts2+Hibernate+Spring+Jsp+Tomcat,是JavaWeb入门非
06-06
入门非常好的练手项目 效果展示： 项目简介 关联项目 之前使用 JavaEE 整套技术来作为解决方案，实现模仿天猫网站的各种业务场景，现在开始使用框架技术，毕竟工作中还是要用框架。 本项目技术相对老旧，现在很少用 ...
ActivitiWebDemo:一个入门的Activiti工作流系统
05-08
ActivitiWebDemo 技术选型 SSM + MySQL5.6 + Activiti 5.22 功能点 1.审批流程管 1.1 审批流程列表 1.2 可删除定义的审批流程 1.3 可查看部署的流程图 1.4 部署流程定义文档 2.申请模板管理 2.1 添加模板 ...
JavaWeb:J2EE后台管理系统项目demo
04-29
JavaWeb 每个Demo里面还有具体的介绍.md 目录： 第一个jsp项目 图书管理系统 使用的网页框架是bootstrap 由于本人还没学过前端也不是专攻前端的 丑就丑点吧 bug也还挺多的 所以 待修复。。。 可以给刚入门的同学一...
JavaWeb课程设计-学生信息管理系统（Jsp+Servlet+MySql）
热门推荐
龙源IT 的博客
12-23 6万+
JavaWeb课程设计，通过Jsp+Servlet+MySql设计实现，功能比较简单，用户可以通过登录注册方式进入管理界面可以管理学生信息，班级信息，课程信息等信息。实现了分页查询，添加信息、修改信息、删除信息、选中删除等功能，下面是运行的界面。
Vue基本指令（超详细介绍）
龙源IT 的博客
12-14 4285
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 例如我们在入门案例中的v-on，代表绑定事件。
搭建JavaWeb开发环境（Eclipse版）
龙源IT 的博客
09-10 3909
搭建eclipse上的JavaWeb开发环境的操作步骤。
JavaWeb快速入门--HTML
龙源IT 的博客
04-20 1111
Web是一种分布式的应用框架，基于Web的应用是典型的浏览器/服务器（B/S）架构。目前Web已经是网络上运行最广泛的分布式应用框架，它可以共享分布在网络上的各个Web服务器上所有互相连接的信息。Web采用客户机/服务器（C/S）通信模式，客户机与服务器之间使用超文本传输协议（HTTP）通信，Web使用超文本标记语言（HTML）连接网络中各个Web服务器的信息资源，任何一台联网的计算机通过浏览器就可以查看网络中Web服务器的丰富资源。
JavaWeb快速入门
09-02
JavaWeb是一种用Java语言来开发动态网页的技术栈。它包括了Servlet和JSP两个主要的技术组件。JavaWeb的开发速度很快，功能也很强大，并且具有跨平台的特点。 JavaWeb可以用来开发静态网页和动态网页。静态网页是指提供给所有人看的数据始终不会发生变化，而动态网页是指提供给所有人看的数据会随着时间和地点的不同而发生变化。大部分网站都属于动态网页。在Java中，动态网页开发的技术统称为JavaWeb。 JavaWeb采用B/S架构，即浏览器和服务器之间的交互。相比之下，C/S架构是客户端和服务器之间的交互。JavaWeb被广泛使用，因为它可以处理高并发、高性能和高可用性的问题，并且语法类似于ASP。 如果你想快速入门JavaWeb，你可以首先学习Servlet和JSP的基本语法和用法。Servlet是JavaWeb中的核心组件，用于处理请求和响应。JSP则是一种在HTML中嵌入Java代码的技术，可以方便地生成动态内容。你可以通过学习这两个组件的基础知识，了解JavaWeb的基本工作原理和开发流程。然后，你可以进一步学习JavaWeb框架，如Spring MVC和Struts，以提高开发效率和代码质量。还可以学习数据库连接和操作、前端技术等相关知识，以完善你的JavaWeb开发技能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [JavaWeb入门](https://blog.csdn.net/Massimo__JAVA/article/details/124496596)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龙源lll

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值