精华内容
下载资源
问答
  • <artifactId>spring-boot-maven-pluginartifactId> plugin> plugins> build> project> 4、登录页面(thymeleaf+Bootstrap) <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> ; charset=UTF-8"> , ...

    这两天接了个项目,结果发现手里居然都没有能直接套用的模板(之前做的直接改贼烦,还不如网上参考),但是网上参考的总是有一些烦人的小问题,所以总结一个模板

    1、效果图:
    在这里插入图片描述

    2、目录结构
    在这里插入图片描述
    3、添加依赖 pom.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.2.4.RELEASE</version>
            <relativePath/> <!-- lookup parent from repository -->
        </parent>
        <groupId>com.luojay</groupId>
        <artifactId>springboot-thymeleaf-bootstrapui</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>springboot-thymeleaf-bootstrapui</name>
        <description>thymeleaf bootstrap Demo project for Spring Boot</description>
    
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <!--模板引擎-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
           <!-- Web开发-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <!--jquery-->
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>jquery</artifactId>
                <version>3.3.1</version>
            </dependency>
            <!--bootstrap-->
            <dependency>
                <groupId>org.webjars</groupId>
                <artifactId>bootstrap</artifactId>
                <version>3.3.7</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
                <exclusions>
                    <exclusion>
                        <groupId>org.junit.vintage</groupId>
                        <artifactId>junit-vintage-engine</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>
    
    

    4、登录页面(thymeleaf+Bootstrap)

    <!DOCTYPE html>
    <html lang="en"  xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>账单管理系统登录界面</title>
        <!-- Bootstrap core CSS -->
        <link th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.css}" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link th:href="@{/css/signin.css}" rel="stylesheet">
    </head>
    
    <body class="text-center">
    <form class="form-sign-in" action="dashboard.html">
        <img class="mb-4" th:src="@{img/bootstrap-solid.svg}" alt="" width="72" height="72">
        <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
        <!--    placeholder是html5的新特性,用于实现输入框里那个浅色的输入提示-->
        <label class="sr-only">Username</label>
        <input type="name" class="form-control" placeholder="用户名" required="" autofocus="">
        <label class="sr-only">Password</label>
        <input type="password" class="form-control" placeholder="密码" required="">
        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" value="remember-me"> 记住我
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
        <p class="mt-5 mb-3 text-muted">© 2020-2021</p>
        <a class="btn btn-sm">中文</a>
        <a class="btn btn-sm">English</a>
    </form>
    
    </body>
    
    </html>
    

    5、LoginController.java

    package com.luojay.springbootthymeleafbootstrapui.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class LoginController {
        @RequestMapping({"/","/login.html"})
        public String login(){
            return "login";
        }
    }
    
    

    6、singin.css

    html,
    body {
      height: 100%;
    }
    
    body {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-align: center;
      -ms-flex-pack: center;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      padding-top: 40px;
      padding-bottom: 40px;
      /*background-color: #f5f5f5;*/
    }
    
    .form-signin {
      width: 100%;
      max-width: 330px;
      padding: 15px;
      margin: 0 auto;
    }
    .form-signin .checkbox {
      font-weight: 400;
    }
    .form-signin .form-control {
      position: relative;
      box-sizing: border-box;
      height: auto;
      padding: 10px;
      font-size: 16px;
    }
    .form-signin .form-control:focus {
      z-index: 2;
    }
    .form-signin input[type="email"] {
      margin-bottom: -1px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .form-signin input[type="password"] {
      margin-bottom: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    
    

    7、application.properties

    spring.thymeleaf.cache=false
    #设置端口
    server.port=8081
    
    展开全文
  • bootstrap布局是应用得很广泛的一种网页布局方法,例如:我们用一种中间内容很流行的布局分布:3-6-3式布局。代码如下body{width:1350px;}header{background-color:#d9534f;height:120px;}.center{background-color:...

    bootstrap布局是应用得很广泛的一种网页布局方法,例如:我们用一种中间内容很流行的布局分布:3-6-3式布局。代码如下

    body{width:1350px;

    }

    header{

    background-color:#d9534f;

    height:120px;

    }

    .center{

    background-color:#31b0d5;

    border:1px solid #ff0000;

    height:300px;

    margin:0px;

    }

    footer{

    background-color:#f0ad4e;

    height:100px;

    }

    运行之后,页面正常,效果如下:

    但是,当我们把页面窗口缩小后,发现页面中间的3个div被挤开了,一个div独占一行了,效果如下:

    不仅中间的div被挤得位置错乱,网页的长度还自动加长了,这可不是我们需要的效果,这时,可把每个分区的class属性同时设置为col-lg col-md col-sm col-xs,自适应每一种大小的屏幕,改动后的代码如下:

    再运行,缩小页面之后,页面再不乱排列了,但缩小页面窗口时,发现页面变得扁了,效果如下:

    这是每个块区元素没有宽度所导致的,若此时再给body设置宽度,[width:1350px(屏幕宽度)]则可以避免这种情况,自动生成了滚动条,并让页面正常显示,效果如下:

    以上所述是小编给大家介绍的Bootstrap页面缩小变形的快速解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

    时间: 2017-02-01

    展开全文
  • 常用的Css文字标签一、文字段落Start,重要的文字,倾斜的文字用来提示,cms是"ContentManagementSystem"的简称,文字段落End说明:标签 作用 文字倾斜 ...

    常用的Css文字标签

    一、

    文字段落Start,重要的文字,倾斜的文字用来提示,cms是"Content Management System"的简称,文字段落End

    说明:

    标签                                         作用

                                         文字倾斜

                                      文字加粗

    cms      abbr标记简称,.initialism是使其大写,title内的内容一般是全称

    二、

    它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

    来源百度百科

    如图:

    3b6ab81caf681ef76a61ae9e5c0f42fc.png

    说明:

    标签                             作用

               表示引用一段文字,p标签表示引用的一段, .pull-right表示使其右对齐

                          表示对这段文字的说明

                            百度百科是一个网络,进行一个cite标记

    展开全文
  • bootstrap页面初始化

    2021-11-08 21:49:04
    user-scalable=no" /> <title>Documenttitle> <link rel="stylesheet" href="./boot/css/bootstrap.min.css" /> head> <body> <div class="container-fluid">...div> <script src="./boot/js/jquery-3.6.0.min.js">...
    <!DOCTYPE html>
    <html>
      <head lang="zh-CN">
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
        />
        <title>Document</title>
        <link rel="stylesheet" href="./boot/css/bootstrap.min.css" />
      </head>
      <body>
        <div class="container-fluid">...</div>
        <script src="./boot/js/jquery-3.6.0.min.js"></script>
        <script src="./boot/js/bootstrap.min.js"></script>
      </body>
    </html>
    
    
    展开全文
  • 页面排版本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题、页面主体、对齐、列表等常规内容。一.页面排版Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使...
  • 本次主要来了解的是布局,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下。... Bootstrap headingh2. Bootstrap headingh3. Boo...
  • 最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备。使用它编写响应式页面快捷、方便,而且屏蔽了浏览器差异。使用了 Bootstrap 后,再也无法...
  • 小颖的这个demo其实很简单的,大家一起来先来看看页面效果图:目录:代码:inde.htmlrequire.js小demojs下的文件:app.jsrequirejs.config({baseUrl: 'js/lib',paths: {jquery: 'jquery',app: '../app'}});...
  • 世界上并没有完美的程序,但是我们并不因此而沮丧,因为写程序就是一个不断追求完美的过程。 ...为了使背景图片铺满整个body而不出现多个重复,则将body的background-size的宽高都设置为100% 为了不因为内部div的...
  • 您可以直接复制代码 注意...实现tab影响 关键看bootstrap的 data-toggle= tab$(document).ready(function() {if(location.hash) {$('a[href=' + location.hash + ']').tab('show');}$(document.body).on("click", "a...
  • 本文实例讲述了bootstrap实现的自适应页面简单应用。分享给大家供大家参考,具体如下:.tNav{margin-top: 10px;border-bottom-style: none;}.bNav{text-align: center;height: 50px;line-height: 50px;font-size: 20...
  • 一、javaWeb需要将静态文件挡在static文件夹下 二、jsp 引用路径要正确
  • Bootstrap栅格布局

    2020-12-30 01:38:17
    Bootstrap框架提供了一套响应式、移动设备的流式栅格系统,该系统通过行(row)与列(column)的组合来创建页面布局。大意为把整体分为固定多少格显示。对于移动端显示布局,需要引入一个meta标签/*引入移动端窗口数据...
  • 重启IDEA,启动服务器,打开html页面Bootstrap生效。 <link rel="stylesheet" href="login.css"> <script src="login.js"></script>
  • 我的博客使用的是Bootstrap的Clean Blog模版,正好和我的英文名一样。这几天的目标是让自己的博客有按类别和标签链接文章的功能,于是从其他人的博客源码中复制了categories.html和tags.html文件,放在jekyll源码的...
  • 引入bootstrap4 css文件,只在bootstrap4有效,bs3效果不太行:垂直居中:为需要垂直居中的div新建如下样式.col-center-block {position: absolute;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: ...
  • 之前那篇文章是flask+redis的,如果用flask+mysql怎么实现呢?创建数据库:CREATEDATABASE`web12306`DEFAULTCHARACTERSETutf8;创建表:CREATETABLE`web12306`(`user_email`varchar(100)NOTNULLDEFAULT‘‘,`user_...
  • 内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor Visual Studio Code 1.32.1 typesetting Markdown code Demo 凤凰 凤凰,亦作“凤皇”,古代传说中的百鸟之王。 雄的叫“凤...
  • 栅格系统(布局)Bootstrap内置了...它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:行(row)必须包含在...
  • Bootstrap案列:首页界面

    2021-02-07 21:06:00
    在自学Bootstrap之后我开始完成一个旅游网项目的首页界面,本博文主要演示实现的具体过程。 首先导入BootStra的环境 <!--引入本地的bootstrap——css--> <link href="../js/bootstrap-3.3.7-dist/css/...
  • html如何引用bootstrap

    2021-04-24 18:04:56
    html引用bootstrap的方法:1、使用...Bootstrap的引入Bootstrap的使用一般有两种方法:引用在线的Bootstrap的样式,将Bootstrap下载到本地进行引用。在线引用基本模板如下:Bootstrap引入优点:不用本地安装Bootst...
  • Bootstrap 的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。但在实际的需求中可能出现不能被12整除的列数时(比如一行平分为5列),需要一些其他的方案解决。通过相关资料的调查,列举...
  • /* 初始化表格*/ var TableInit = function () { var oTableInit = {}; //初始化Table oTableInit.Init = ... table.bootstrapTable($.extend({}, tableDefaults, { queryParams: queryParams,//参数 response.
  • 我们都知道使用bootstrap做轮播效果非常快,但是有时候一个页面会需要两个轮播;但这个时候再次使用bootstrap做轮播效果时就会失效;原因在于bootstrap的Carousel问题,只要修改一下id,就好了~~这是第一个轮播:(未...
  • 这个布局非常好用,但是在手机端会出现横向的滚动条,导致页面左右晃动。 原因是这个布局本身带了margin和padding, row默认有:margin-left:-15px; margin-right:-15px;左右都有,上下没有。 有两种解决方案: ...
  • 我有点沉迷于这个简单的页面(我知道你可能会用它翻白眼,请忍受我)。我已经使用引导程序很多年了,直到我的经理想在手机上看到它时,有什么东西击中了我。我尝试过很多不同的方法,但是没有一个方法能与下一个截图的布局...
  • 本文主要介绍了bootstrap-table.js扩展分页工具栏,增加跳转到xx页功能,由于小编的水平停留在dom级,此次扩展只支持页面上的表格,如果大家有好的建议欢迎提出,希望能帮助到大家。新项目,准备引用bootstrap-table...
  • 在使用bootstrap 底部导航的时候遇到了一个问题 —— 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖自己写了一个JS脚本,解决自适应的问题提交$(function(){autoNav();});//解决底部自动导航的...
  • 初学web开发时,自己总是不能做出好看的前端页面,通过学习利用Bootstrap给前端添加样式后,可以快捷的做出几种漂亮的前端页面,下面介绍一下Bootstrap的用法。 1裸页面 没有任何前端样式的页面如下图: 下面展示...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 123,556
精华内容 49,422
关键字:

bootstrap页面