正文 

当前位置： 首页 > 知识 > java教程

javaweb之bootstrap(代码片段)

达少Rising 达少Rising     2022-12-10     445

关键词：

知识回顾：
JavaWeb之Java基础知识增强
JavaWeb之JDBC
JavaWeb之数据库连接池
JavaWeb之HTML&CSS
JavaWeb之JavaScript

文章目录

1.Bootstrap概念

  • 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
    • 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
    • 好处：
      • 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
      • 响应式布局。
        • 同一套页面可以兼容不同分辨率的设备。

2.快速入门

  • 下载Bootstrap
  • 在项目中将这三个文件夹复制
  • 创建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>

3.响应式布局

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

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

  • 步骤：

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

  • 注意：

    • 一行中如果格子数目超过12，则超出部分自动换行。
    • 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
    • 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。
<!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>

4.CSS样式和JS插件

4.1. 全局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">：相框
<!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>

<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>
  • 表格
    • class="table"
    • class="table-bordered"
    • class="table-hover"
  • 表单
    • 给表单项添加：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>
    <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.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[javaweb-bootstrap]bootstrap概述(代码片段)

Bootstrap：1.概念：一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。	*框架:一个半成品软件，开发人员...  查看详情  

                

javaweb之ajax&json(代码片段)


知识回顾：JavaWeb之Java基础知识增强JavaWeb之JDBCJavaWeb之数据库连接池JavaWeb之HTML&CSSJavaWeb之JavaScriptJavaWeb之BootstrapJavaWeb之XMLJavaWeb之web服务器软件JavaWeb之ServletJavaWeb之http协议JavaWeb之会话技术JavaWeb之JSP&MVC&a  查看详情  

                

二javaweb基础(bootstrap前端框架)(代码片段)


一、BootStrap概念概述一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。它是响应式布局，同一套页面可以兼容...  查看详情  

                

[javaweb-bootstrap]bootstrap响应式布局(代码片段)


响应式布局*同一套页面可以兼容不同分辨率的设备。*实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子*步骤：	1.定义容器。相当于之前的table、		*容器分类：			1.container：两边留...  查看详情  

                

javaweb之javascript(代码片段)


知识回顾：JavaWeb之Java基础知识增强JavaWeb之JDBCJavaWeb之数据库连接池JavaWeb之HTML&CSS文章目录1.概念2.ECMAScript：客户端脚本语言的标准2.1.基本语法2.1.1.与html结合方式2.1.2.注释2.1.3.数据类型：2.1.4.变量2.1.5.运算符2.1.6....  查看详情  

                

javaweb之jsp技术(代码片段)


✍javaEE进阶之旅🔥javaEE进阶之旅地址🔥JavaWeb之HTTP协议(一)https://blog.csdn.net/Augenstern_QXL/article/details/119580669🔥JavaWeb之Servlet技术(二)https://blog.csdn.net/Augenstern_QXL/article/detail  查看详情  

                

javaweb之servlet技术(代码片段)


✍目录总览✍javaEE进阶之旅🔥javaEE进阶之旅地址🔥JavaWeb之HTTP协议(一)https://blog.csdn.net/Augenstern_QXL/article/details/119580669🔥JavaWeb之Servlet技术(二)https://blog.csdn.net/Augenstern_QXL/article/d  查看详情  

                

[javaweb-bootstrap]css样式和js插件(代码片段)


CSS样式和JS插件1.全局CSS样式：	*按钮：class="btnbtn-default"	*图片：		*class="img-responsive"：图片在任意尺寸都占100%		*图片形状			*<imgsrc="..."alt="...&#  查看详情  

                

javaweb之filter和listener技术(代码片段)


✍目录总览✍javaEE进阶之旅🔥javaEE进阶之旅地址🔥JavaWeb之HTTP协议(一)https://blog.csdn.net/Augenstern_QXL/article/details/119580669🔥JavaWeb之Servlet技术(二)https://blog.csdn.net/Augenstern_QXL/article/d  查看详情  

                

javaweb之cookie和session技术(代码片段)


✍目录总览✍javaEE进阶之旅🔥javaEE进阶之旅地址🔥JavaWeb之HTTP协议(一)https://blog.csdn.net/Augenstern_QXL/article/details/119580669🔥JavaWeb之Servlet技术(二)https://blog.csdn.net/Augenstern_QXL/article/d  查看详情  

                

前端之bootstrap(代码片段)


Bootstrap简介　　Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的MarkOtto和JacobThornton一起开发的，Bootstra框架是基于HTML、CSS、JavaScript开发的，它因简洁、直观、功能强大被开发者广发使用。　　Boot...  查看详情  

                

javaweb之servlet一(代码片段)


...2019.03.27主机环境：MacBookPro Servlet1.Servlet简介Servlet是JavaWeb的三大组件之一，属于动态资源Servlet的功能接受请求数据处理请求：每个Servlet都是唯一的，能处理的请求都是不同的完成响应Servlet需要我们自己编写2.实现Servlet的方...  查看详情  

                

css之bootstrap（快速布局）(代码片段)


简介什么是Bootstrap？Bootstrap官网框架：库liblibraryjQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式把大家都需要的功能预先写好到一些文件这就是一个框架Bootstrap让我们的Web开发更简单，更快捷；注意是Bootstrap不是BootS...  查看详情  

                

javaweb之html(代码片段)


html:HyperTextMarkupLanguage超文本标记语言   超文本：比文本功能更加强大   标记语言：通过一组标签对内容进行描述的一门语言html书写规则：   文件的后缀名：.html(建议)或者.htm   标签...  查看详情  

                

javaweb之数据库连接池(代码片段)


知识回顾：JavaWeb之Java基础知识增强JavaWeb之JDBC文章目录1.数据库连接池1.1概念1.2好处1.3实现2.C3P0：数据库连接池技术2.1步骤2.2代码3.Druid：数据库连接池实现技术，由阿里巴巴提供的3.1步骤：3.2代码：4.定义...  查看详情  

                

javaweb会话管理之用户上次访问时间(代码片段)


packageiz.cast;importjava.io.IOException;importjava.text.SimpleDateFormat;importjava.util.Date;importjavax.servlet.ServletException;importjavax.servlet.http.Cookie;importjavax.servlet.http.HttpServlet  查看详情  

                

javaweb之html&css(代码片段)


知识回顾：JavaWeb之Java基础知识增强JavaWeb之JDBCJavaWeb之数据库连接池文章目录1.web概念概述1.1软件架构：1.2B/S架构详解1.3静态资源：2.HTML2.1概念：是最基础的网页开发语言2.2快速入门：2.3标签学习2.3.1文件标签&#...  查看详情  

                

javaweb之html&css(代码片段)


知识回顾：JavaWeb之Java基础知识增强JavaWeb之JDBCJavaWeb之数据库连接池文章目录1.web概念概述1.1软件架构：1.2B/S架构详解1.3静态资源：2.HTML2.1概念：是最基础的网页开发语言2.2快速入门：2.3标签学习2.3.1文件标签&#...  查看详情