bootstrap

复制代码
<!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 101 Template</title>

    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

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

<body>
    <form class="form-inline">
        <div class="form-group">
          <label class="sr-only" for="exampleInputAmount">人民币</label>
          <div class="input-group">
            <div class="input-group-addon">￥</div>
            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
            <div class="input-group-addon">元</div>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Transfer cash</button>
      </form>
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <table class="table table-hover">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
    <h1>你好，世界！</h1>
    <!-- Single button -->
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>

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

</html>
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../bootstrap-3.3.7-dist/js/jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        .cart {
            background-color: #ffffff;
            /* 父元素相对定位 */
            position: relative;

        }

        .count {
            /* 绝对定位 */
            position: absolute;
            background-color: red;
            right: -20px;
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 2px;

        }
    </style>
    <script>
        // jq,,
        $(function () {
            $("#btn").on('click', function () {
                //手动打开模态框。。
                //$('#myModal').modal('show')

                /* 
                
                .modal('toggle')//不实用
                手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中；

                modal('show')
                手动打开模态框。在模态框显示之前返回到主调函数中 
                
                .modal('hide')
                手动隐藏模态框。在模态框隐藏之前返回到主调函数中  */

                //设置模态框
                $('#myModal').modal({
                    backdrop: false// false 半透明褐色遮罩没有了，点击空白不能关闭模态框
                    //或 字符串 'static'褐色遮罩有点击空白不能关闭模态框
                })
                $('#myModal').modal('show')


                //打开模态框后：show 方法调用之后立即触发该事件'hidden.bs.modal'
                $('#myModal').on('hidden.bs.modal', function (e) {
                    //重置表单
                    $("form")[0].reset();
                })


                //关闭模态框：data-dismiss="modal"方式之一

            })
        })
    </script>
</head>

<body>
    <!-- 滚动监听。。。切换 -->
    <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
        <ul class="nav nav-tabs" id="myTabs" role="tablist">
            <li class="active" role="presentation"><a id="home-tab" role="tab" aria-expanded="true" aria-controls="home"
                    href="#home" data-toggle="tab">Home</a></li>
            <li role="presentation"><a id="profile-tab" role="tab" aria-expanded="false" aria-controls="profile"
                    href="#profile" data-toggle="tab">Profile</a></li>
            <li class="dropdown" role="presentation">
                <a class="dropdown-toggle" id="myTabDrop1" aria-expanded="false" aria-controls="myTabDrop1-contents"
                    href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" id="myTabDrop1-contents" aria-labelledby="myTabDrop1">
                    <li><a id="dropdown1-tab" role="tab" aria-controls="dropdown1" href="#dropdown1"
                            data-toggle="tab">@fat</a></li>
                    <li><a id="dropdown2-tab" role="tab" aria-controls="dropdown2" href="#dropdown2"
                            data-toggle="tab">@mdo</a></li>
                </ul>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade active in" id="home" role="tabpanel" aria-labelledby="home-tab">
                <p> show.bs.modal
                    show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。</p>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <p> shown.bs.modal
                    此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。</p>
            </div>
            <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">
                <p> hide.bs.modal
                    hide 方法调用之后立即触发该事件。
                    hidden.bs.modal
                    此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。</p>
            </div>
            <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">
                <p> loaded.bs.modal
                    从远端的数据源加载完数据之后触发该事件。</p>
            </div>
        </div>
    </div>
    <!-- 事件类型
            描述
            show.bs.modal
            show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
            shown.bs.modal
            此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
            hide.bs.modal
            hide 方法调用之后立即触发该事件。
            hidden.bs.modal
            此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
            loaded.bs.modal
            从远端的数据源加载完数据之后触发该事件。
        
                    $('#myModal').on('hidden.bs.modal', function (e) {
            // do something...
            })-->



    <!-- 模态框 -->
    <!-- Button trigger modal ::: data-toggle="modal" data-target="#myModal"-->
    <button id="btn" type="button" class="btn btn-primary btn-lg" data-toggle="tooltip"  data-placement="top" title="郭童的提示》》》》">
        弹出模态框：
    </button>
    <hr>
    <!-- HTML to write -->
    <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
    <!-- Generated markup by the plugin -->
    <div class="tooltip top" role="tooltip">
        <div class="tooltip-arrow"></div>
        <div class="tooltip-inner">
            Some tooltip text!
        </div>
    </div>

    <!-- Modal -->
    <!-- modal(模态框声明层) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <!-- dialog(窗口声明层) -->
        <div class="modal-dialog" role="document">
            <!-- content(内容层) -->
            <div class="modal-content">
                <!-- header(头部) -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <!-- body(主体) -->
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1"
                                aria-describedby="emailHelp">
                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
                                else.</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1">
                        </div>
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="exampleCheck1">
                            <label class="form-check-label" for="exampleCheck1">Check me out</label>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
                <!-- footer(注脚) -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 容器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-6 ">
                <!-- 按钮图片 -->
                <button type="button" class="btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Star
                </button>
            </div>

        </div>

    </div>
    <hr>
    <!-- 轮播图 -->
    <div class="bs-example" data-example-id="simple-carousel" style="width: 50%;">
        <div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0"></li>
            <!-- class="active"第一次激活的是哪一个：这里是第二个，所以一打开就是第二个被激活 -->
            <li class="active" data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="item">
              <img alt="First slide [900x500]" src="../../案例/timg.jpg" data-src="holder.js/900x500/auto/#777:#555/text:First slide" data-holder-rendered="true">
            </div>
            <!-- .active 是激活的是哪一个图片 -->
            <div class="item active">
              <img alt="Second slide [900x500]" src="../../案例/timg.jpg" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" data-holder-rendered="true">
            </div>
            <div class="item">
              <img alt="Third slide [900x500]" src="../../案例/timg.jpg" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" data-holder-rendered="true">
            </div>
          </div>
          <!-- 左右控制键 -->
          <a class="left carousel-control" role="button" href="#carousel-example-generic" 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" role="button" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    <!-- 带购物车小标的按钮 -->
    <div class="center-block">
        <button class="btn btn-primary cart" type="button">
            <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"
                style="font-size: 20px;color: red;"></span>
            <span class="badge count" style=" top: -45px;">4</span>
        </button>
    </div>


</body>

</html>
复制代码

观看bootstrap开发者文档：https://v3.bootcss.com/javascript/#collapse

 

 

posted on   白嫖老郭  阅读(66)  评论(0)  编辑  收藏  举报

编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
AI IDE Trae