bootstrap

已于 2022-03-13 15:34:48 修改
阅读量1k 收藏 1
点赞数
文章标签： bootstrap 前端 javascript
于 2022-03-13 14:47:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45445291/article/details/123459298
版权
本文介绍了Bootstrap的基本使用，包括页面模板、布局容器、栅格系统、排版样式、表单元素和样式、缩略图与面板、导航及分页。Bootstrap简化了前端开发，提供了一套响应式、移动设备优先的流式栅格系统，用于快速创建美观且适应各种屏幕尺寸的网页。此外，还展示了如何使用下拉菜单和模态框等插件。
摘要由CSDN通过智能技术生成

bootstrap

我们平时编写一个前端页面会用到css用来修饰页面，用js来添加一些交互。但是对于前端小白或者后端程序员来说，编写一些好看的页面还是比较困难的。bootstrap就是用来解决这个问题的，bootstrap其实就是对css和js文件的一个封装，同时因为bootstrap的核心js依赖jquery的核心js，所以使用bootstrap是一般还要导入jQuery文件。

note：我们并不需要记住bootstrap的所有用法，随用随取就好了。

下面将会用例子来解释如何使用bootstrap。先来看一下目录结构:
在这里插入图片描述
在这里插入图片描述

01 bootstrap的页面模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.js"></script>
    <script src="bootstrap/js//bootstrap.min.js"></script>
</head>
<body>
    hello world
</body>
</html>

02 布局容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>

<body>
    <!-- 布局容器，固定宽度 -->
    <div class="container">固定宽度</div>

    <!-- 布局容器，固定宽度 -->
    <div class="container-fluid">完整宽度</div>
</body>
</html>

03 栅格网格系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!-- 容器 -->
    <div class="container">
        <!-- 列 -->
        <div class="row">
            <!-- 一行最多十二列 -->
            <!-- 屏幕尺寸： xs 超小，sm 小，md 中，lg 大 -->
            <!-- 列组合 -->
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">4</div>
            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">8</div>
        </div>

        <div class="row">
            <!-- 列偏移,向右移动指定距离 -->
            <div class="col-md-4">4</div>
            <div class="col-md-4 col-md-offset-2">4</div>
        </div>

        <div class="row">
            <!-- 列排序,向指定方向浮动 -->
            <div class="col-md-3" style="background-color: aqua;">3</div>
            <!-- 向前 -->
            <div class="col-md-3 col-md-pull-1" style="background-color: rgb(240, 225, 25);">3</div>
            <!-- 向后 -->
            <div class="col-md-3 col-md-push-1" style="background-color: rgb(75, 30, 158);">3</div>
            <div class="col-md-3" style="background-color: rgb(218, 32, 177);">3</div>
        </div>

        <div class="row">
            <!-- 列嵌套，列还可以再分 -->
            <div class="col-md-6" style="background-color: aqua;">
                <div class="row">
                    <div class="col-md-1" style="background-color: blueviolet;">1</div>
                    <div class="col-md-9" style="background-color: rgb(190, 21, 21);">9</div>
                </div>
            </div>
            <div class="col-md-6" style="background-color: rgb(240, 225, 25);">6</div>
        </div>

        <div class="row">
            <!-- 自适应 -->
            <div class="col-md-3 col-sm-6" style="background-color: aqua;">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: rgb(240, 225, 25);">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: rgb(75, 30, 158);">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: rgb(218, 32, 177);">3</div>
        </div>
    </div>
</body>
</html>

04 常用样式-排版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!-- 常用样式
            1.标题
                bootstrap对h1-h6的标题效果进行覆盖
                提供了对应的类名，为非标题元素设置样式 .h1-.h6
                副标题small标签或.small类名 -->
    <h1>主标题
        <small>
            副标题
        </small>
    </h1>

    <h2>
        主标题
        <span class="small">副标题</span>
    </h2>

    <div class="h1">标题</div>

    <hr>

    <!-- 2.段落 -->
    <p>我只爱爱我的人，因为我不懂怎样去爱一个不爱我的人</p>
    <!-- 加粗效果 -->
    <p class="lead">我只爱<strong>爱我</strong>的人，因为我不懂怎样去爱一个<b>不爱</b>我的人</p>
    <!-- 倾斜效果 -->
    <p class="lead">我只爱<i>爱我</i>的人，因为我不懂怎样去爱一个<em>不爱</em>我的人</p>
    <!-- 缩小效果 -->
    <p class="lead">我只爱<small>爱我</small>的人，因为我不懂怎样去爱一个不爱我的人</p>

    <hr>

    <!-- 3.强调 -->
    <div class="text-muted">提示</div>
    <div class="text-primary">主要</div>
    <div class="text-success">成功</div>
    <div class="text-info">信息</div>
    <div class="text-warning">警告</div>
    <div class="text-danger">危险</div>

    <hr>

    <!-- 4.对齐 -->
    <!-- 左对齐 -->
    <p class="text-left">我只爱爱我的人，因为我不懂怎样去爱一个不爱我的人</p>
    <!-- 右对齐 -->
    <p class="text-right">我只爱爱我的人，因为我不懂怎样去爱一个不爱我的人</p>
    <!-- 居中对其 -->
    <p class="text-center">我只爱爱我的人，因为我不懂怎样去爱一个不爱我的人</p>
    <!-- 两端对齐 -->
    <p class="text-justify">我只爱爱我的人，因为我不懂怎样去爱一个不爱我的人</p>

    <hr>

    <!-- 5.列表 -->
    <!-- 无序列表 -->
    <ul>
        <li>项目一</li>
        <li>项目二</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li>项目一</li>
        <li>项目二</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表是一种样式表语言</dd>
    </dl>

    <!-- 去点列表 -->
    <ul class="list-unstyled">
        <li>项目一</li>
        <li>项目二</li>
    </ul>

    <!-- 内联列表 -->
    <ul class="list-inline">
        <li>项目一</li>
        <li>项目二</li>
    </ul>

    <!-- 自定义列表 内敛列表 -->
    <dl class="dl-horizontal">
        <dt>HTML 超文本标记语言</dt>
        <dd>HTML称为超文本标记语言，是一种标识性语言</dd>
        <dt>测试标题不能超过160px的宽度，否则会变成点</dt>
        <dd>层叠样式表是一种样式表语言</dd>
    </dl>

    <hr>

    <!-- 6.代码 -->
    <!-- 单行代码 -->
    <code>this is a simple code</code>

    <!-- 快捷键 -->
    <p>使用<kbd>ctrl</kbd> + <kbd>s</kbd>保存内容</p>
    
    <!-- 多行代码 -->
    <pre>
public class HelloWorld{
    private int age;
}
    </pre>

    <!-- 显示html代码，需要使用字符实体 -->

    <!-- 当长度超过指定值时，可以添加滚动条 -->
    <pre class="pre-scrollable">
        <ol>
            <li>......</li>
            <li>......</li>
            <li>......</li>
            <li>......</li>
            <li>......</li>
            <li>......</li>
            <li>......</li>
            <li>......</li>
            <li>......</li>
        </ol>
    </pre>

    <hr>

    <!-- 7.表格 -->
    <table class="table">
        <tr>
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr>
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr>
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
    </table>

    <!-- 有边框 -->
    <table class="table table-bordered">
        <tr>
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr>
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr>
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
    </table>

    <!-- 有边框,隔行换色 -->
    <table class="table table-bordered table-striped">
        <tr>
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr>
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr>
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
    </table>

    <!-- 有边框,隔行换色，鼠标放上有高亮效果 -->
    <table class="table table-bordered table-striped table-hover">
        <tr>
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr>
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr>
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
    </table>

    <!-- 有边框,隔行换色，鼠标放上有高亮效果,紧凑一点 -->
    <table class="table table-bordered table-striped table-hover table-condensed">
        <tr>
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr>
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr>
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
    </table>
</body>
</html>

05 常用样式-表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!-- 1.文本框 -->

    <!-- 使用栅格网格修饰 -->
    <div class="row">
        <div class="col-md-3">
            <input type="text" class="form-control"><br>
            <!-- 控制文本框的大小 -->
            <input type="text" class="form-control input-lg"><br>
            <input type="text" class="form-control input-sm"><br>
        </div>
    </div>

    <!-- 2.下拉框 -->
    <div class="row">
        <div class="col-md-3">
            <select class="form-control">
                <option>请选择城市</option>
                <option>上海</option>
                <option>北京</option>
                <option>深圳</option>
            </select>
        </div>
    </div>

    <!-- 3.文本域 -->
    <div class="row">
        <div class="col-md-3">
            <textarea class="form-control">
            </textarea>
        </div>
    </div>

    <!-- 4.复选框 -->
    <!-- 垂直显示 -->
    <div class="row">
        <div class="col-md-3">
            <div class="checkbox">
                <label><input type="checkbox" name="hobby"> 唱歌</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby"> 跳舞</label>
            </div>
        </div>
    </div>

    <!-- 水平显示 -->
    <div class="row">
        <div class="col-md-3">
            <label class="checkbox-inline"><input type="checkbox" name="hobby"> 唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby"> 跳舞</label>
        </div>
    </div>

    <!-- 5.单选框 -->
    <!-- 垂直显示 -->
    <div class="row">
        <div class="col-md-3">
            <div class="radio">
                <label><input type="radio" name="sex1" value="male"> 男</label>
            </div>
            <div class="radio">
                <label><input type="radio" name="sex1" value="female"> 女</label>
            </div>
        </div>
    </div>

    <!-- 水平显示 -->
    <div class="row">
        <div class="col-md-3">
            <label class="radio-inline"><input type="radio" name="sex2" value="male"> 男</label>
            <label class="radio-inline"><input type="radio" name="sex2" value="female"> 女</label>
        </div>
    </div>

    <!-- 6.按钮 -->
    <button class="btn">按钮</button>
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-success">按钮</button>
    <button class="btn btn-warning">按钮</button>
    <button class="btn btn-primary">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-link">按钮</button>

    <!-- 可以把其它标签变成按钮 -->
    <a href="#" class="btn btn-success">a标签</a>
    <span class="btn btn-warning">span标签</span>
    <div class="btn btn-default">div标签</div>

    <!-- 设置按钮的大小 -->
    <button class="btn btn-danger">按钮</button>
    <button class="btn btn-success btn-lg">按钮</button>
    <button class="btn btn-warning btn-sm">按钮</button>
    <button class="btn btn-warning btn-xs">按钮</button>

    <!-- 按钮禁用 -->
    <button class="btn btn-danger" onclick="alert('hello')">按钮</button>
    <!-- 真正的禁用 -->
    <button class="btn btn-success" onclick="alert('hello')" disabled="disabled">按钮</button>
    <!-- 只是样式上的禁用 -->
    <button class="btn btn-warning disabled" onclick="alert('hello')">按钮</button>


    <hr>

    <!-- 7.表单布局 -->
    <!-- 水平表单 -->
    <form action="#" method="post" class="form-horizontal" role="form">
        <!-- 表单中的表单元素组 -->
        <div class="form-group">
            <!-- 这里label标签是用来聚焦的 -->
            <label for="uname" class="control-label col-md-2">姓名</label>
            <div class="col-md-8">
                <input type="text" id="uname" class="form-control" placeholder="请输入姓名">
            </div>
        </div>
        <div class="form-group">
            <label for="upwd" class="control-label col-md-2">密码</label>
            <div class="col-md-8">
                <input type="text" id="upwd" class="form-control" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">爱好</label>
            <div class="col-md-3">
                <label class="checkbox-inline"><input type="checkbox" name="hobby"> 唱歌</label>
                <label class="checkbox-inline"><input type="checkbox" name="hobby"> 跳舞</label>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">城市</label>
            <div class="col-md-3">
                <select class="form-control">
                    <option>请选择城市</option>
                    <option>上海</option>
                    <option>北京</option>
                    <option>深圳</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-3 col-md-offset-5">
                <button class="btn btn-danger" onclick="alert('hello')">按钮</button>
            </div>
        </div>
    </form>

    <!-- 内联表单，全部在一行显示 -->
    <form action="#" method="post" class="form-inline" role="form">
        <div class="form-group">
            <!-- 这里label标签是用来聚焦的 -->
            <label for="username" class="control-label">姓名</label>
            <input type="text" id="username" class="form-control" placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label for="userpwd" class="control-label">密码</label>
            <input type="text" id="userpwd" class="form-control" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label class="control-label">爱好</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby"> 唱歌</label>
            <label class="checkbox-inline"><input type="checkbox" name="hobby"> 跳舞</label>
        </div>
        <div class="form-group">
            <label class="control-label">城市</label>
            <select class="form-control">
                <option>请选择城市</option>
                <option>上海</option>
                <option>北京</option>
                <option>深圳</option>
            </select>
        </div>
        <div class="form-group">
            <button class="btn btn-danger" onclick="alert('hello')">按钮</button>
        </div>
    </form>

</body>
</html>

06 常用样式-缩略图和面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 缩略图 -->
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/1.JPG" >
                <button class="btn">
                    <span class="glyphicon glyphicon-heart">点赞</span>
                </button>
                <button class="btn">
                    <span class="glyphicon glyphicon-pencil">评论</span>
                </button>
                </div>
            </div>
    
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/1.JPG" >
                <button class="btn">
                    <span class="glyphicon glyphicon-heart">点赞</span>
                </button>
                <button class="btn">
                    <span class="glyphicon glyphicon-pencil">评论</span>
                </button>
                </div>        </div>
    
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/1.JPG" >
                <button class="btn">
                    <span class="glyphicon glyphicon-heart">点赞</span>
                </button>
                <button class="btn">
                    <span class="glyphicon glyphicon-pencil">评论</span>
                </button>
                </div>        </div>
    
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/1.JPG" >
                <button class="btn">
                    <span class="glyphicon glyphicon-heart">点赞</span>
                </button>
                <button class="btn">
                    <span class="glyphicon glyphicon-pencil">评论</span>
                </button>
                </div>        
            </div>
    
        </div>
    </div>


    <!-- 面板 -->
    <div class="panel panel-success">
        <div class="panel-heading">
            狗狗合集
        </div>
        <div class="panel=body">
            <div class="container">
                <div class="row">
                    <!-- 缩略图 -->
                    <div class="col-md-3">
                        <div class="thumbnail">
                            <img src="img/1.JPG" >
                        <button class="btn">
                            <span class="glyphicon glyphicon-heart">点赞</span>
                        </button>
                        <button class="btn">
                            <span class="glyphicon glyphicon-pencil">评论</span>
                        </button>
                        </div>
                    </div>
            
                    <div class="col-md-3">
                        <div class="thumbnail">
                            <img src="img/1.JPG" >
                        <button class="btn">
                            <span class="glyphicon glyphicon-heart">点赞</span>
                        </button>
                        <button class="btn">
                            <span class="glyphicon glyphicon-pencil">评论</span>
                        </button>
                        </div>        </div>
            
                    <div class="col-md-3">
                        <div class="thumbnail">
                            <img src="img/1.JPG" >
                        <button class="btn">
                            <span class="glyphicon glyphicon-heart">点赞</span>
                        </button>
                        <button class="btn">
                            <span class="glyphicon glyphicon-pencil">评论</span>
                        </button>
                        </div>        </div>
            
                    <div class="col-md-3">
                        <div class="thumbnail">
                            <img src="img/1.JPG" >
                        <button class="btn">
                            <span class="glyphicon glyphicon-heart">点赞</span>
                        </button>
                        <button class="btn">
                            <span class="glyphicon glyphicon-pencil">评论</span>
                        </button>
                        </div>        
                    </div>
            
                </div>
            </div>
        </div>
    </div>
</body>
</html>

07 导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!-- 标签式导航 -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

    <!-- 胶囊式导航 -->
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>

    <!-- 面包屑式导航 -->
    <ul class="breadcrumb">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>


</body>
</html>

08 分页导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!-- 分页导航 -->
    <ul class="pagination">
        <li><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><a href="#">4</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>

    <!-- 翻页导航 -->
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>

</body>
</html>

09 插件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.js"></script>
    <!-- bootstrap的核心js文件依赖jQuery的核心js文件 -->
    <script src="bootstrap/js//bootstrap.min.js"></script>
</head>

<body>
    <!-- 下拉菜单 -->
    <div class="dropdown">
        <!-- 下拉框按钮 -->
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            喜欢的频道
            <!-- 设置下拉箭头 -->
            <span class="caret"></span>
        </button>
        <!-- 下拉菜单 -->
        <ul class="dropdown-menu">
            <li class="dropdown-header">科普</li>
            <li><a href="#">人与自然</a></li>

            <!-- 分割线 -->
            <li class="divider"></li>

            <li class="dropdown-header">搞笑</li>
            <li><a href="#">快乐大本营</a></li>
            <li><a href="#">欢乐喜剧人</a></li>
        </ul>
    </div>

    <!-- 模态框 -->
    <h2>创建模态框（Modal）</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
                </div>
                <div class="modal-body">在这里添加一些文本</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <button id="btn">打开模态框</button>
    <script>
        $("#btn").click(function(){
            $("#myModal").modal("show");
        })
    </script>
</body>

</html>
糠猪
关注
Bootstrap. - 跟着李南江学编程
ljh1972的博客
05-20 192
警报 通过少量可用和灵活的警报消息，为典型的用户操作提供上下文反馈消息 <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> A simple secondary alert—check it out! </div> <di
bootstrap常用类
qq_42041288的博客
08-06 895
bootstrap常用类 一．文本 1）对齐方式 text-left 文本左对齐 =======> text-align：left text-center 文本居中对齐 text-right 文本右对齐 text-justify 文本两端对齐 text-nowrap 不换行 text-lowercase 小写 text-uppercase 大写 text-capitalize 首字母大写 2...
Bootstrap
weixin_63823376的博客
03-31 138
需使用工具：HBuilder X 文章目录 前言 一.WW（What Why） ①bootstrap是什么？ ②为什么要使用bootstrap 二、使用步骤 环境安装 案例 前言 bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架，是一个用于快速开发Web应用程序和网站的前端框架。 提示：以下是本篇文章正文内容，下面案例可供参 一、WW（What Why） Bootstrap是什么？ Bootstrap是一个建立一个页面，.
bootstrap中外层div盒子的class设置为"container"和设置为"container-fluid"的区别
热门推荐
Java从入门到放弃
05-20 4万+
直接正文 一句话概括：在bootstrap中，规定了每一行都被分为了固定的12个栅栏，每一个栅栏都有自己的宽度。如果你的div用了container的样式，那么它的宽度最大也打不过12个栅栏一共的最大宽度。而，当你的div用了container-fluid的样式，它会无视12个栅栏的规定，根据屏幕自动适应自动填充。(当然，宽度要设置为width:100%)，下面用例子说明。 当&amp;l...
【BootStrap入门级教程】基础类
世人万千丶的博客
09-27 502
BootStrap中的文本颜色、对齐，背景色，边框、边距、定位和弹性盒子
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
bootstrap-5.3.0.zip
最新发布
02-21
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，使得构建响应式、移动设备优先的网站变得简单高效。"bootstrap-5.3.0.zip" 是Bootstrap的5.3.0版本的压缩包，包含了这个版本的所有...
bootstrap-5.3.2-dist.zip
10-10
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网站。这个压缩包“bootstrap-5.3.2-dist.zip”包含了Bootstrap 5.3.2的分布式文件...
Bootstrap布局组件
sinat_38378976的博客
05-19 321
Bootstrap
Bootstrap框架--全局CSS样式
Archer1724的博客
04-04 776
文章目录1.概括2.栅格系统3.排版4.代码5.表格6.表单7.按钮8.图片9.辅助类 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 在201...
BootStrap容器介绍
hongcaixia的博客
04-21 4692
BootStrap容器介绍布局容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。.container 类用于固定宽度并支持响应式布局的容器。<div class="container"> ... </div> .container-fluid 类用于 100% 宽
bootstrap第二章：bootstrap布局
qq_62244121的博客
10-17 4107
bootstrap布局详细介绍，附有网格列偏移和网格列嵌套
Bootstrap: Container容器
Tech in Pieces
06-29 3416
Bootstrap原生带三种container宽度规范： .container, 居中，适配不同的断的 max-width 尺寸。 .container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。 .container-{断点规格}（见下表，如.container-sm), 在指定规格断上width: 100% 尺寸。 Syntax： .container: 是一个响应式容器，它有固定宽度和最max-width 设置，并支持响应式断点，你应该用它作为整个DIV的最外层容器。 &lt
Layui布局容器和栅格系统
Shelly Long的博客
01-20 1719
布局容器 1.固定宽度（两侧有留白效果） <div class="layui-container"> <div class="layui-row"> 固定宽度…… </div> </div> 2.完整宽度（占据屏幕宽度的100%） <div class="layui-fluid"> 完整宽度…… </div> 栅格系统 <!-- 栅格系统 1、
BootStrap基本使用
m0_60027772的博客
09-18 2万+
html超文本标记语言，多出来的html为超文本标记语言，是一种标识性语言css为层叠样式表css为层叠样式表，为前端三剑客之一
bootstrap常用类名
chanming的博客
06-01 1150
一、 常用类 1、container 居中的内容展示 2、row  行内容显示 3、col 列内容显示， 列必须在row 中 xs 宽度小于768 ，sm宽度小于990 大于768 ,md 宽度大于990，小于1200， lg宽度大于1200 col-xs-4 代表 小屏下显示为4列， col-xs-4 col-md-2  代表小屏下占4列，大屏下占2列 div class="
Bootstrap的常用类(CSS和布局组件)的总结
鬼谷传人的博客
05-30 1万+
Bootstrap通过给标签赋予一个类名(class name),来生成对应类名的效果标签网格选项row :行col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列)col-*-*-*:列排序(第一个*
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值