Bootstrap

最新推荐文章于 2024-08-19 17:04:41 发布

远道学java

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量205

点赞数

文章标签：前端 java bootstrap

本文链接：https://blog.csdn.net/xmcxmc___/article/details/123970844

版权

bootstrap简介

什么是Bootstrap？

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

为什么使用 Bootstrap？

移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。
- 不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。
- 也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

下载与使用

中文官网：https://www.bootcss.com/

英文官网：http://getbootstrap.com

下载好的，压缩包解压出来。就得到了bootstrap的资源文件了。

分别是css、js、font字体，全部放在项目的根目录即可

注意：需要把jQuery的文件也要放入项目中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>

<body>
    <h1>Hello,BootStrap</h1>
    <button class="btn btn-primary">按钮1</button>
    <button class="btn btn-success">按钮2</button>
    <button class="btn btn-warning">按钮3</button>
</body>
</html>

Bootstrap的使用

表格

和之前的表格相比，标签更丰富更加语义化，效果更佳美观

丰富的标签

<table> 为表格添加基础样式
<thead> 表格标题行的容器元素（<tr>）
<tbody> 表格主体中的表格行的容器元素（<tr>）
<tr> 表格行
<td> 默认的表格单元格。
<th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead> 内使用。
<caption> 关于表格存储内容的描述或总结。

类样式

.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) ，隔行变色
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态，鼠标悬停高亮突出显示
.table-condensed 让表格更加紧凑

情景色类样式

适合应用在<th>、<tr>，<td>

.active 激活效果（悬停颜色）
.success 表示成功或积极的动作
.info 表示普通的提示信息或动作
.warning 表示警告或需要用户注意
.danger 表示危险或潜在的带来的负面影响的动作

响应式表格

表格的父元素设置响应式，小于768px，出现边框

<table class="table table-responsive"></table>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
  </head>
  <body style="padding:30px">
    <table class="table table-striped table-bordered table-hover table-condensed table-responsive">
      <caption>
        产品大全
      </caption>
      <thead>
        <tr>
          <th>产品</th>
          <th>付款日期</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>产品1</td>
          <td>2022-01-01</td>
          <td>已付款</td>
        </tr>
        <tr class="warning">
          <td>产品2</td>
          <td>2022-02-02</td>
          <td>待付款</td>
        </tr>
        <tr class="danger">
          <td>产品3</td>
          <td>2022-03-03</td>
          <td>已收货</td>
        </tr>
        <tr class="info">
          <td>产品4</td>
          <td>2022-04-04</td>
          <td>已退货</td>
        </tr>
        <tr class="success">
          <td>产品5</td>
          <td>2022-05-05</td>
          <td>已评论</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

表单

表单布局

默认布局

在这里插入图片描述

  <body style="padding:100px">
    <form>
      <div class="form-group">
        <label>邮箱</label>
        <input type="email" class="form-control" placeholder="请输入邮箱..." />
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="请输入密码..." />
      </div>
      <div class="form-group">
        <button class="btn btn-primary">提交</button>
      </div>
    </form>
  </body>

内联布局

让所有表单元素居于一行
注意：当小于768px时,会自动还原成移动端样式.就是上面的那种样式

  <body style="padding:100px">
    <form class="form-inline"> 
      <div class="form-group">
        <label>邮箱</label>
        <input type="email" class="form-control" placeholder="请输入邮箱..." />
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="请输入密码..." />
      </div>
      <div class="form-group">
        <button class="btn btn-primary">提交</button>
      </div>
    </form>
  </body>

表单控件

输入框

在这里插入图片描述

  <body style="padding:100px">
    <form>
      <div class="form-group">
          <label for="">输入框</label>
          <input type="text" class="form-control" placeholder="请输入文本...">
      </div>
    </form>
  </body>

文本框

在这里插入图片描述

<body style="padding:100px">
    <form>
      <div class="form-group">
          <label for="">文本框</label>
          <textarea cols="30" rows="5" class="form-control"></textarea>
      </div>
    </form>
  </body>

复选框

checkbox 默认
checkbox-inline 内联

  <body style="padding:100px">
    <form>
      <div class="checkbox">
        <label for=""> <input type="checkbox" />选项1 </label>
      </div>
      <div class="checkbox">
        <label for=""> <input type="checkbox" />选项2 </label>
      </div>
      <div class="checkbox-inline">
        <label for=""> <input type="checkbox" />选项3 </label>
      </div>
      <div class="checkbox-inline">
        <label for=""> <input type="checkbox" />选项4 </label>
      </div>
    </form>

复选按钮

在这里插入图片描述

  <body style="padding:100px">
    <form>
      <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary"> <input type="checkbox" />音乐 </label>
        <label class="btn btn-primary"> <input type="checkbox" />体育 </label>
        <label class="btn btn-primary"> <input type="checkbox" />美术 </label>
        <label class="btn btn-primary"> <input type="checkbox" />电脑 </label>
      </div>
    </form>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

单选框

在这里插入图片描述

  <body style="padding:100px">
    <form>
      <div>
        <label class="radio"> <input type="radio" name="sex" />男 </label>
        <label class="radio"> <input type="radio" name="sex" />女 </label>
        <label class="radio-inline">
          <input type="radio" name="sex" />男
        </label>
        <label class="radio-inline">
          <input type="radio" name="sex" />女
        </label>
      </div>
    </form>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

单选按钮

在这里插入图片描述

  <body style="padding:100px">
    <form>
      <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary"> <input type="radio" name="sex">男</label>
          <label class="btn btn-primary"> <input type="radio" name="sex">女</label>
      </div>
    </form>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

按钮

在这里插入图片描述

<body>
    <div>
        <button class="btn btn-default">默认按钮</button>
        <button class="btn btn-fiamry">主要按钮</button>
        <button class="btn btn-success">成功按钮</button>
        <button class="btn btn-info">信息按钮</button>
        <button class="btn btn-warning">警告按钮</button>
        <button class="btn btn-danger">危险按钮</button>
        <button class="btn btn-link">连接按钮</button>
    </div>
</body>

在这里插入图片描述

<body>
    <div>
        <button class="btn btn-primary btn-lg">超大按钮</button>
        <button class="btn btn-primary">大按钮</button>
        <button class="btn btn-primary btn-sm">小按钮</button>
        <button class="btn btn-primary btn-xs">超小按钮</button>
    </div>
</body>

按钮状态

激活状态：按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）;
禁用状态：当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变;

<body>
    <div>
        <button class="btn btn-default">默认按钮</button>
        <button class="btn btn-default active">激活按钮</button>
        <button class="btn btn-default" disabled>禁用按钮</button>
    </div>
</body>

图片

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框

<body style="padding:10px">
    <img src="img/2.jpg" class="img-rounded" width="33%">
    <img src="img/2.jpg" class="img-circle" width="33%">
    <img src="img/2.jpg" class="img-thumbnail" width="33%">
</body>

响应式图片

<img src="img/2.jpg" class="img-responsive">

下拉菜单组件

在这里插入图片描述
用法的关键核心

外围容器使用 class="dropdown"包裹
内部点击按钮事件绑定 data-toggle=“dropdown”
菜单元素使用 class=“dropdown-menu”

  <body>
    <div class="dropdown">
      <button class="btn btn-primary" data-toggle="dropdown">
        拉勾教育<span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
          <li><a>前沿技术</a></li>
          <li><a>名师制作</a></li>
          <li><a>24小时导师</a></li>
      </ul>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

分页组件

在这里插入图片描述

<body>
    <ul class="pagination">
        <li class="previous"><a>&laquo;</a></li>
        <li class="active"><a>1</a></li>
        <li><a>2</a></li>
        <li><a>3</a></li>
        <li class="next"><a>&raquo;</a></li>
    </ul>
</body>

在这里插入图片描述

<body>
    <ul class="pager">
        <li class="previous"><a>&laquo;</a></li>
        <li class="active"><a>1</a></li>
        <li><a>2</a></li>
        <li><a>3</a></li>
        <li class="next"><a>&raquo;</a></li>
    </ul>
</body>

栅格系统

bootstrap的栅格系统会将整个页面水平方向上平均分成12个小格子
当浏览器大小发生变化的时候，我们可以控制每行的元素占用几个格子，从而达到响应式的效果
显示屏幕的扩大和缩小. 实现如下效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<style>
    .a{
        height: 50px;
        border: 1px solid black;
        background-color: #eeeeee;
    }
</style>
<body>
    <div class="container">
        <div class="row">
            <!-- col-lg-3 当大屏幕时，一个div占3份，一行显示4个div -->
            <!-- col-md-4 当中屏幕时，一个div占4份，一行显示3个div -->
            <!-- col-sm-6 当小屏幕时，一个div占6份，一行显示2个div -->
            <!-- 超小屏幕时，一个div占12份，一行显示1个div，默认 -->
            
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>

            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>

            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
            <div class="col-lg-3 col-md-4 col-sm-6 a"></div>
        </div>
    </div>
</body>
</html>

缩略图组件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="img/2.jpg" />
            <div class="caption">
              <h3>图文并茂</h3>
              <p>这是一个图片结合文字的缩略图</p>
              <p>
                <a href="#" class="btn btn-primary">观看</a>
                <a href="#" class="btn btn-warning">购买</a>
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="img/2.jpg" />
            <div class="caption">
              <h3>图文并茂</h3>
              <p>这是一个图片结合文字的缩略图</p>
              <p>
                <a href="#" class="btn btn-primary">观看</a>
                <a href="#" class="btn btn-warning">购买</a>
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="img/2.jpg" />
            <div class="caption">
              <h3>图文并茂</h3>
              <p>这是一个图片结合文字的缩略图</p>
              <p>
                <a href="#" class="btn btn-primary">观看</a>
                <a href="#" class="btn btn-warning">购买</a>
              </p>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
          <div class="thumbnail">
            <img src="img/2.jpg" />
            <div class="caption">
              <h3>图文并茂</h3>
              <p>这是一个图片结合文字的缩略图</p>
              <p>
                <a href="#" class="btn btn-primary">观看</a>
                <a href="#" class="btn btn-warning">购买</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

模态框组件

在这里插入图片描述

data-toggle=“modal” 触发类型:模态框modal
data-target=“#myModal” 触发的节点
data-backdrop=“static” 点击黑灰色背景，不会关闭模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-warning" data-toggle="modal" data-target="#myModal">弹框</button>

    <!-- 声明定义模态框组件 -->
    <div class="modal" id="myModal" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4>友情提示</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">
                    服务器错误，请稍后再试！
                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info">确认</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

远道学java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

bootstrap简介什么是Bootstrap？Bootstrap来自 Twitter，是目前最受欢迎的响应式前端框架。Bootstrap是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。为什么使用 Bootstrap？移动设备优先：自 Bootstrap3 起，框架包含了贯穿于整个库移动设备优先的样式。不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外
复制链接

扫一扫