JavaWeb之Bootstrap

Posted 达少Rising

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaWeb之Bootstrap相关的知识，希望对你有一定的参考价值。

知识回顾：
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的主要内容，如果未能解决你的问题，请参考以下文章
 

 带你玩转JavaWeb开发之五-如何完成响应式开发页面


 在 Webpack 中使用 Bootstrap 的首选方式


 [JavaWeb-Bootstrap]Bootstrap快速入门


 [JavaWeb-Bootstrap]Bootstrap概述


 JavaWeb客户端服务技术


 二JavaWeb基础(BootStrap前端框架)