阶段三模块二 Bootstrap

最新推荐文章于 2023-11-14 08:59:54 发布

wangxu123445678

最新推荐文章于 2023-11-14 08:59:54 发布

阅读量180

点赞数 1

分类专栏： Java自学笔记

本文链接：https://blog.csdn.net/wangxu123445678/article/details/113575070

版权

Java自学笔记专栏收录该内容

65 篇文章 2 订阅

订阅专栏

内容输出来源：拉钩教育Java就业训练营

1 Bootstrap的使用

1.1 表格

1.1.1 标签

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

1.1.2 类样式

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

1.1.3 情景色类样式

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

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

1.2 表单

1.2.1 表单布局

1.2.1.1 默认布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DqazksL5-1612273726088)(Bootstrap.assets/5-1612272624847.png)]

<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="passowd" class="form-control" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <button class="btn btn-primary">提交</button>
        </div>
    </form>
</body>

1.2.1.2 内联布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HXjLN2IO-1612273726090)(Bootstrap.assets/6-1612272633074.png)]

<form class="form-inline">

1.2.2 表单控件

1.2.2.1 输入框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rwdXkknO-1612273726091)(Bootstrap.assets/7.png)]

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

1.2.2.2 文本框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdJ8bWb5-1612273726093)(Bootstrap.assets/8.png)]

<label for="">文本框</label>
    <textarea class="form-control" cols="30" rows="5"></textarea>

1.2.2.3 复选框

checkbox 默认
checkbox-inline 内联

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7UxBAw0-1612273726094)(Bootstrap.assets/9.png)]

<div class="checkbox">
    <label>
        <input type="checkbox"> 抽烟
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"> 喝酒
    </label>
</div>
    <hr>
<div class="checkbox-inline">
    <label>
        <input type="checkbox"> 洗澡
    </label>
</div>
<div class="checkbox-inline">
    <label>
        <input type="checkbox"> 烫头
    </label>
</div>

1.2.2.4 复选按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fLpuCyYP-1612273726095)(Bootstrap.assets/11.png)]

<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>

1.2.2.5 单选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s24wZ1C6-1612273726096)(Bootstrap.assets/10.png)]

<label class="radio">
    <input type="radio" name="sex"> 男
</label>
<label class="radio">
    <input type="radio" name="sex"> 女
</label>
<hr>
<label class="radio-inline">
    <input type="radio" name="gender"> 耕
</label>
<label class="radio-inline">
    <input type="radio" name="gender"> 织
</label>

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

1.2.2.6 单选按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SOYRQo1t-1612273726097)(Bootstrap.assets/12.png)]

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="gender"> 男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="gender"> 女
    </label>
</div>

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

1.3 按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OmLTeqgO-1612273726098)(Bootstrap.assets/13-1612272972676.png)]

<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">主要按钮</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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fLXp7SUe-1612273726098)(Bootstrap.assets/15-1612273225338.png)]

<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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7cQMceWJ-1612273726099)(Bootstrap.assets/14-1612273256423.png)]

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

1.4 图片

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZZZIhnS-1612273726100)(Bootstrap.assets/16-1612273293339.png)]

<img src="img/1.jpg" class="img-rounded" width="33%">
<img src="img/1.jpg" class="img-circle" width="33%">
<img src="img/1.jpg" class="img-thumbnail" width="33%">
<!-- 响应式图片-->
<img src="img/1.jpg" class="img-responsive">

1.5 下拉菜单组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ylqcqIMW-1612273726100)(Bootstrap.assets/17-1612273382008.png)]

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">拉勾教育 <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">前沿技术</a></li>
        <li><a href="#">名师制作</a></li>
        <li><a href="#">24小时导师</a></li>
    </ul>
</div>

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

用法的关键核心

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

1.6 分页组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6EShKI9Y-1612273726101)(Bootstrap.assets/20-1612273431596.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c9igXb1K-1612273726102)(Bootstrap.assets/19-1612273475294.png)]

 <ul class="pager">

1.7 栅格系统

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hnw6vlVN-1612273726104)(Bootstrap.assets/24-1612273516589.png)]

<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">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>
            <div class="col-lg-3 col-md-4 col-sm-6 a">x</div>

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

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

1.8 缩略图组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UAKzg8OH-1612273726104)(Bootstrap.assets/23-1612273567816.png)]

<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>

        <!--其余3个省略-->

    </div>
</div>

1.9 模态框组件（重点）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jlvvKTJU-1612273726105)(Bootstrap.assets/Bootstrap详解-1612273617513.jpg)]

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

<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 class="modal-title">友情提示</h4>
            </div>
            <!-- 2.框内信息 -->
            <div class="modal-body">
                服务器错误，请稍后再试！
                <hr>
                <img src="img/1.jpg" width="200px">
                <hr>
                <input type="text">
            </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>

 <img src="img/1.jpg" width="200px">
            <hr>
            <input type="text">
        </div>
        <!-- 3.框的按钮 -->
        <div class="modal-footer">
            <button class="btn btn-info">确定</button>
            <button class="btn btn-default" data-dismiss="modal">取消</button>
        </div>
    </div>
</div>

```