JavaWeb基础学习笔记7——Bootstrap

啊噢1231

已于 2022-02-18 15:00:05 修改

阅读量486

点赞数

分类专栏： JavaWeb 文章标签： bootstrap 学习 javascript

于 2022-02-16 17:36:44 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_44623055/article/details/122967615

版权

JavaWeb 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

目录

1、Bootstrap概述

2、Bootstrap快速入门

2.1、下载和使用Bootstrap

3、响应式布局和栅格系统

4、CSS样式和JS插件

4.1、全局CSS样式

4.2.1、导航条

4.2.2、分页条

4.3.1、轮播图

1、Bootstrap概述

Bootstrap：一个前端开发的框架，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。

框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。

好处：

定义了很多CSS样式和JS插件，开发人员可以直接使用这些样式和插件得到丰富的页面效果；
响应式布局（同一套页面可以兼容不同分辨率的设备）。

2、Bootstrap快速入门

2.1、下载和使用Bootstrap

1、下载地址：起步 · Bootstrap v3 中文文档 | Bootstrap 中文网

下载并解压得到3个文件夹：

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>模板</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!--  &lt;!&ndash; HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 &ndash;&gt;-->
<!--  &lt;!&ndash; 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 &ndash;&gt;-->
<!--  &lt;!&ndash;[if lt IE 9]>-->
<!--  <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
<!--  <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
<!--  <![endif]&ndash;&gt;-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

3、响应式布局和栅格系统

响应式布局：同一套页面可以兼容不同分辨率的设备。

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

步骤：

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

注意事项：

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

4、CSS样式和JS插件

4.1、全局CSS样式

4.1.1、按钮

-默认按钮：
class="btn btn-default"

4.1.2、图片

-图片在任意尺寸都占100%
class="img-responsive"

-图片形状
class="img-responsive img-rounded"：方形
class="img-responsive img-circle"：圆形
class="img-responsive img-thumbnail"：相框

4.1.3、表格

class="table"
class="table-bordered"
class="table-hover"

4.1.4、表单

-给表单项添加：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>模板</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!--  &lt;!&ndash; HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 &ndash;&gt;-->
  <!--  &lt;!&ndash; 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 &ndash;&gt;-->
  <!--  &lt;!&ndash;[if lt IE 9]>-->
  <!--  <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
  <!--  <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
  <!--  <![endif]&ndash;&gt;-->
</head>
<body>

<a class="btn btn-default" href="#" role="button">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 />

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- 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="image/search.png" class="img-responsive" />
<img src="image/search.png" class="img-responsive img-rounded" />
<img src="image/search.png" class="img-responsive img-circle" />
<img src="image/search.png" class="img-responsive img-thumbnail" />

<hr />

<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>12</td>
  </tr>
  <tr>
    <td>002</td>
    <td>张三</td>
    <td>24</td>
  </tr>
</table>

<hr />

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" 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>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

4.2、组件

4.2.1、导航条

4.2.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>模板</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!--  &lt;!&ndash; HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 &ndash;&gt;-->
  <!--  &lt;!&ndash; 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 &ndash;&gt;-->
  <!--  &lt;!&ndash;[if lt IE 9]>-->
  <!--  <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
  <!--  <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
  <!--  <![endif]&ndash;&gt;-->
</head>
<body>

<nav class="navbar navbar-inverse" >
  <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>

<hr />

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

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

4.3、JS插件

4.3.1、轮播图

<!doctype html>
<html lang="zh-CN" xmlns:z-index="http://www.w3.org/1999/xhtml">
<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>模板</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!--  &lt;!&ndash; HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 &ndash;&gt;-->
    <!--  &lt;!&ndash; 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 &ndash;&gt;-->
    <!--  &lt;!&ndash;[if lt IE 9]>-->
    <!--  <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
    <!--  <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <!--  <![endif]&ndash;&gt;-->
</head>
<body>

<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="image/search.png" alt="">
            <div class="carousel-caption">
                名字
            </div>
        </div>
        <div class="item">
            <img src="image/search.png" alt="">
            <div class="carousel-caption">
                s名字
            </div>
        </div>
        <div class="item">
            <img src="image/footer_service.png" alt="">
            <div class="carousel-caption">
                aa
            </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>

<!--&lt;!&ndash; jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) &ndash;&gt;-->
<!--<script src="js/jquery-3.2.1.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"-->
<!--        crossorigin="anonymous"></script>-->
<!--&lt;!&ndash; 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 &ndash;&gt;-->
<!--<script src="js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"-->
<!--        crossorigin="anonymous"></script>-->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js" ></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js" ></script>
</body>
</html>

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb基础学习笔记7——Bootstrap

1、Bootstrap概述Bootstrap：一个前端开发的框架，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。好处：定义了很多CSS样式和JS插件，开发人员可以直接使用这些样式和插件得到丰富的页面效果；响应式布局（同一套页面可以兼容不同分辨率的设备）。2、Bootstrap快速入门2.1、下载和使用Bootst
复制链接

扫一扫

专栏目录

啊噢1231 CSDN认证博客专家 CSDN认证企业博客

码龄5年

117: 原创

30万+: 周排名

191万+: 总排名

17万+: 访问

: 等级

1403: 积分

104: 粉丝

204: 获赞

11: 评论

1492: 收藏

私信

关注

热门文章

分类专栏

MySQL 1篇
MQTT 2篇
JavaSound 1篇
FL Studio 1篇
Nginx 6篇
Maven 1篇
问题汇总 1篇
SSM 6篇
Java并发编程 7篇
Git 1篇
设计模式 5篇
Kafka 3篇
InfuxDB 2篇
Netty 3篇
JavaWeb 20篇
Node.js 1篇
远动监控技术 3篇
数据结构 8篇
JavaSE 32篇
Java案例 11篇
Java GUI 2篇

最新评论

IEC104规约
须须草: 我直接爱你
Nginx——Nginx负载均衡
weixin_61023204: 用户手动选择有那味了
Nginx——Nginx负载均衡
伯爵944: 有一说一dns轮询式是不是错了，应该是支持对同一个域名添加多条ip地址而不是对同一个主机名添加不同的ip地址吧，我也是初学者不太懂，有人教教吗？
Nginx——Nginx反向代理
qq_45342824: 你好，这个Server_name是只能写Linux的本地地址吗，如果随意写一个地址可以吗
Nginx——Nginx负载均衡
往来^: 无敌

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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