bootstrap例子笔记

最新推荐文章于 2022-10-14 10:51:41 发布
最新推荐文章于 2022-10-14 10:51:41 发布
阅读量208 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23350817/article/details/84136224
版权 
<!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>

    <script src="./plunge/jquery.min.js"></script>
    <link href="./plunge/bootstrap.min.css" rel="stylesheet">
    <script str="./Popper.js"></script>
    <script src="./plunge/bootstrap.min.js"></script>

    <style>
        img {
            width: 20px;
            height: 20px;
        }

        table tr th {
            width: 40px;
        }
        .inputSty {
            width: 100px;
        }
    </style>

</head>
<body>
    <div class="container">

        <ul class="nav nav-tabs">
            <li role="presentation"><a href="#">导航一</a></li>
            <li role="presentation"><a href="#">导航二</a></li>
            <li role="presentation"><a href="#">导航三</a></li>
        </ul>
        <br><br>

        <ul class="breadcrumb">
            <li role="presentation" class="active"><a href="#">JAVA</a></li>
            <li role="presentation"><a href="#">IOS</a></li>
            <li role="presentation" class="disabled"><a href="#">C++</a></li>
        </ul>

        <br><br>

        <table class="table table-bordered table-hover">
            <tr>
                <th>头像</th>
                <th>名字</th>
                <th>HP</th>
            </tr>
            <tr class="active">
                <td><img src="./img/gareen.png" class="img-rounded"></td>
                <td>盖伦</td>
                <td>616</td>
            </tr>
            <tr>
                <td><img src="./img/teemo.png" class="img-circle"></td>
                <td>提莫</td>
                <td>383</td>
            </tr>
            <tr>
                <td><img src="./img/akali.png" class="img-thumbnail"></td>
                <td>阿卡丽</td>
                <td>448</td>
            </tr>
        </table>

        <div class="pull-centeral">文字浮动到左边</div>

        <div class="row">
            <div class="col-sm-6" style="border: 1px solid black;">一半</div>
            <div class="col-sm-6" style="border: 1px solid black;">另一半</div>
        </div>
        <br><br>
        <div class="row">
            <div class="col-xs-8" style="border: 1px solid red;">一半</div>
            <div class="col-xs-4" style="border: 1px solid red;">另一半</div>
        </div>
        <br><br>

        <div class="dropdown">
            <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">http://192.168.1.189
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">HTML</a></li>
                <li role="presentation"><a href="#">CSS</a></li>
                <li role="presentation"><a href="#">jQuery</a></li>
                <li role="presentation"><a href="#">AJAX</a></li>
            </ul>      
        </div>     


        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">@@@</span>
            <input type="text" class="inputSty form-control" placeholder="用户名" aria-describedby="basic-addon1">
            <span class="input-group-addon" id="basic-addon200">$$$</span>
        </div>

        <nav>        
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden>&laquo;</span>
                    </a>
                </li>
                <li><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="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden>&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        <br><br>

        <nav>
            <ul class="pager">
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">下一页</a></li>
            </ul>
        </nav>

        <nav>
            <ul class="pager">
                <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>

        <button class="label label-default">label-default</button>
        <button class="label label-primary">label-primary</button>
        <button class="label label-success">label-success</button>
        <button class="label label-info">label-info</button>
        <button class="label label-warning">label-warning</button>
        <button class="label label-dangerous">label-dangerous</button>
        <br><br>
        <a href="#">新的邮件信息<span class="badge">199</span></a>
        <button class="btn btn-primary">新消息<span class="badge">123</span></button>

        <br><br><br>
    </div>

    <div class="container" align="center">
        <h2 class="text-info" style="font-family:宋体;font-weight: bold;font-size: 49px">知乎</h2>
        <br>
        <div class="text-muted">与世界分享你的知乎</div>
        <br><br>
        <p><a href="#" class="btn btn-success">注册</a></p>
    </div>


    <div class="progress">
        <div class="progress-bar progress-bar-striped active" style="width: 60%; min-width: 2em">60%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 70%;">70%</div>   
    </div>

    <div class="form">
        <ul class="list-group">
            <li class="list-group-item"><a href="#">回锅肉</a><span class="badge">13</span></li>
            <li class="list-group-item">烧烤<span class="badge">15</span></li>
            <li class="list-group-item">鱼香肉丝<span class="badge">21</span></li>
            <li class="list-group-item">夫妻肺片<span class="badge">22</span></li>
            <li class="list-group-item">麻婆豆腐<span class="badge">55</span></li>
        </ul>
        <br><br><br>

        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-success">烤鱼</a>
            <a href="#" class="list-group-item list-group-item-info">鱼香肉丝</a>
        </div>

        <div class="list-group">
            <button class="list-group-item list-group-item-success">烤鱼<span class="badge">12</span></button>
            <button class="list-group-item list-group-item-info">鱼香肉丝</button>
        </div>
    </div>

    <div class="well">文字呈现</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>

    <script src="./plunge/jquery.min.js"></script>
    <link href="./plunge/bootstrap.min.css" rel="stylesheet">
    <script str="./Popper.js"></script>
    <script src="./plunge/bootstrap.min.js"></script>

    <style type="text/css">
        p {
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>

    <script>
        $(function() {
            $("[data-toggle='tooltip']").tooltip(); 
        });
     </script>

</head>

<body>
    <div class="container">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#dota" data-toggle="tab">Dota</a></li>
            <li><a href="#lol" data-toggle="tab">英雄联盟</a></li>
            <li class="dropdown">
                <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">其他类似游戏
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                    <li><a href="#storm" tabindex="-1" data-toggle="tab">暴雪游戏</a></li>
                    <li><a href="#h300" tabindex="-1" data-toggle="tab">300英雄</a></li>
                </ul>
            </li>
        </ul>

        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="dota">
                Dota游戏
            </div>
            <div class="tab-pane fade" id="lol">
                英雄联盟
            </div>
            <div class="tab-pane fade" id="storm">
                暴雪英雄
            </div>
            <div class="tab-panel fade" id="h300">
                300英雄
            </div>
        </div>

        <button class="btn btn-primary" data-toggle="tooltip" title="SunXiang" data-placement="top">Button</button>
        <button class="btn btn-primary" data-toggle="tooltip" title="SunXiang" data-placement="bottom">Button</button>
    </div>

    <br><br>

    <div class="container">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Dota</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        dota
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">lol</a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        lol
                    </div>
                </div>
            </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="./bootstrap.min.css">
    <script src="./jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="./bootstrap.min.js" type="text/javascript"></script>

    <style>
        input {
            display: inline-block;
            /* width: 50px; */
        }

        label {
            display: inline-block;
            /* width: 50%; */
        }

        table {
            font-size: 20px;
        }

        table tr {
            border: 1px solid black;
            border-radius: 8px;

        }

        table tr td,
        table tr th {
            width: 300px;
            text-align: center;

        }
    </style>

</head>

<body>
    <div class="container">
        <div class="page-header">
            <h1>Bootstrap相关优质项目推介</h1>
            <p>这些项目或者是对bootstrap进行有益的补充，或者是给予bootstrap开发</p>
        </div>

        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>简介、直观、强悍的前端开发框架、让web开发更迅速、简单。</p>
            <a href="" class="btn btn-primary btn-lg">Bootstrap3中文文档(v3.3.5)</a>
        </div>

        <table class="table table-bordered">
            <tr class="info">
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>

            <tr class="warning">
                <td class="info">孙祥</td>
                <td>男</td>
                <td>24</td>
            </tr>

            <tr class="success">
                <td>程丽芳</td>
                <td>女</td>
                <td>21</td>
            </tr>

            <tr class="danger">
                <td>周莎</td>
                <td>女</td>
                <td>22</td>
            </tr>
        </table>

        <button class="btn btn-default">下拉菜单 <span>&times;</span></button>

        <div class="row">
            <div class="col-md-8" main>
                左边，主要内容
            </div>
            <div class="col-md-4 side hidden-sm hidden-xs">
                右边的侧栏
            </div>
        </div>

        <div class="well">
            这是一个容器
        </div>

        <div class="well well-lg">
            这是一个大号的well
        </div>

        <div class="well well-sm">
            这是一个小号的well
        </div>

        <h2>热门文章</h2>
        <p>
            <span class="label label-danger">1</span>
            <a href="#">如何为网站和应用创建设计...</a>
        </p>
        <p>
            <span class="label label-danger">2</span>
            <a href="#">假如5年后你是开发总监</a>
        </p>
        <p>
            <span class="label label-danger">3</span>
            <a href="#">20个精雕细琢的LOGO草图...</a>
        </p>
        <p>
            <span class="label label-default">4</span>
            <a href="#">每个程序员都必须遵守的编程...</a>
        </p>
        <p>
            <span class="label label-default">5</span>
            <a href="#">推荐: 7个有用的HTML5学习...</a>
        </p>
        <p>
            <span class="label label-default">6</span>
            <a href="#">响应式WEB设计</a>
        </p>
        <p>
            <span class="label label-default">7</span>
            <a href="#">Javascript判断Chrome浏览器</a>
        </p>

        <button class="btn btn-primary">收件箱<span class="badge">99</span></button>
        <a href="" class="btn btn-success">未接电话<span class="badge">100</span></a>
        
        <div class="alert">提示信息</div>
        <p class="alert alert-success">操作成功</p>

        <ol class="breadcrumb">
            <li><a href="">首页</a></li>
            <li><a href="">手机</a></li>
            <li><a href="">华为</a></li>
            <li><a href="">荣耀</a></li>
        </ol>
        
        <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="">5</a></li>
            <li><a href="">6</a></li>
            <li><a href="">7</a></li>
            <li><a href="">&raquo;</a></li>
        </ul>

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

    <script src="./plunge/jquery.min.js"></script>
    <link href="./plunge/bootstrap.min.css" rel="stylesheet">
    <script str="./Popper.js"></script>
    <script src="./plunge/bootstrap.min.js"></script>

</head>
<body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <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>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://how2j.cn/img/site/step/3491.png" />
            </div>
            <div class="item">
                <img src="http://how2j.cn/img/site/step/3492.png" />
            </div>
            <div class="item">
                <img src="http://how2j.cn/img/site/step/3493.png" />
            </div>
            <div class="item">
                <img src="http://how2j.cn/img/site/step/3494.png" />
            </div>
        </div>
    </div>
</body>
</html>
Hello，C++！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap基本组件学习笔记之面板(14)
11-29
直接看Bootstrap面板例子： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link...
Bootstrap基本样式学习笔记之图片(6)
01-19
直接看Bootstrap图片基本样式例子： <!DOCTYPE html> <html lang=zh-cn> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1> <link...
基于Bootstrap5的仿W3Cschool的C++教程页面实现
小L的博客
06-08 487
仿W3Cschool的C++教程界面
c++ 学习笔记（0) boost 环境搭建
jeason的博客
12-08 905
0 .获得boost 源码 并且编译 安装 [jeason@centos7 ~]$ git clone https://gitee.com/add358/boost.git Cloning into 'boost'... remote: Enumerating objects: 97421, done. remote: Total 97421 (delta 0), reused 0 (delta 0), pack-reused 97421 Receiving objects: 100% (97421/974
ttkbootstrap 学习
qq_56402474的博客
10-14 2321
ttkbootstrap 第三方库学习，创建python GUI 界面
C++ Boost库的编译及使用
闲人的专栏
06-12 1728
https://www.jianshu.com/p/de1fda741beb https://www.cnblogs.com/weizhixiang/p/5804778.html Windows编译 生成boost的自用的编译工具bjam.exe 解压后，使用Visual Studio 编译。首先打开“Developer Command”，cd到boost解压后的根目录：cd X:\boost_X_XX_X 执行bootstrap.bat,会在boost根目录生成 b2.exe 、bjam....
bootstrap的使用
夜晓星的博客
01-19 288
Bootstrap教程 Bootstrap官方 http://www.bootcss.com/ 菜鸟教程 http://www.runoob.com/bootstrap/bootstrap-tutorial.html bootstrap图标 http://w3c.3306.biz/bootstrap/eg/bootstrap-glyph-customization.html   B...
Bootstrap基本插件学习笔记之折叠(22)
11-30
0x01 例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css...
Bootstrap基本样式学习笔记之标签(5)
11-27
直接看Bootstrap标签例子： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link...
Bootstrap基本组件学习笔记之进度条(15)
01-21
看下面的例子： <!DOCTYPE html> <html lang=zh-cn> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1> <link href=../../css/...
cpp_bootstrap
04-06
通用依赖 使用conan获取 一些conan-center中没有的库打包到jfrog上了 第一次运行conan时请使用运行一次： # run one times at one machine conan remote add khalid https://api.bintray.com/conan/puzzzzzzle1/khalidzhang conan install libgo/v3.1-stable@tao/test -r khalid conan install libco/v1.0@libco/tao -r khalid 删除cmake文件后请运行一次 mkdir build cd build # other libs conan install .. --build missing -r=conan-center cmake .. make
Boost C++ 库入门
热门推荐
小凡的专栏
09-06 3万+
简介： Boost C++ 库（Libraries）是一组扩充C++功能的经过同行评审（Peer-reviewed）且开放源代码程序库。大多数的函数为了能够以开放源代码、封闭项目的方式运作，而授权于Boost软件许可协议（Boost Software License）之下。许多Boost的开发人员是来自C++标准委员会，而部分的Boost库成为C++的TR1标准之一。 为了要确保库的效率与弹性
bootStrap 中文API
夜公子博客
10-15 7497
https://pan.baidu.com/s/107QLZvAiGSTiO1keP0Pjnw
Boost C++库介绍
渡辺麻友
02-21 1156
今天Mayuyu将来讲述一个非常实用的C++库，它叫做Boost C++库。Boost库中加入了一些在实战中非常常用的函数对C++标准进行了扩充，在实际开发中非常有用。   Boost C++的安装包可以在这里下载：http://www.boost.org/   解压后进入目录执行：sh bootstrap.sh。 完成后得到了b2可执行文件，继续执行./b2，最后执行./bjam完成安
springboot+mybatis+bootstrap简单项目实例一
c++小白的博客
06-07 2410
环境介绍 eclipse jee 2018-09 (4.9.0) jdk-11.0.1 MySQL Server 5.6.26 Navicat Premium 步骤 1、安装springboot插件 菜单栏：help–>Eclipse Marketplace 下的Search中搜索spring-tool-suite 点击install进行安装（这边已经安装过了） 2、创建maven项目，并...
Bootstrap开发漂亮的前端界面之实现原理
itsource_yx的专栏
04-02 392
引：Bootstrap采用的是一个“响应式”设计。响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后再智能手机上浏览，智能手机的屏幕 尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好(响应式:简单可以理解为不同的 设备屏幕的大小是不同的，但是页面中的内容是...
C++ boost库的安装及在VS中使用
qq_42704970的博客
07-29 4095
C++ boost库的安装及在VS中使用
[Bootstrap]从入门到实战_首页开发（二）
louShuMei 的博客
01-19 1万+
$首页 首先做任何页面之前，我们都要先把结构规划好，这样脑子里有清晰的思路，工作起来才有效率。首页的效果图前面有展示，它包括如下这几个区域： 导航条 轮播图 客户案例列表 产品截图列表 底部网站信息 $首页-1. 首页 HTML 骨架与素材准备assets目录里面 图片素材（分别是轮播图、客户案例、产品截图，各 3 张） style.css 文件，用于保存自定义样式。 然后在 Template
8个强大的基于Bootstrap的CSS框架
weixin_33851604的博客
09-08 998
做过前端开发的小伙伴们应该对Bootstrap不会陌生，它是由Twitter推出的开源CSS框架，其中包含了很多Web前端开发的工具包和应用组件。当然，和jQuery一样，Bootstrap同时也是一个开放式的CSS框架，基于Bootstrap，我们也可以做许多不错的CSS UI组件。本文就介绍了8个强大的基于Bootstrap的CSS框架，一起来看看。 1、Bootstrap Metro Da...
bootstrap学习笔记
最新发布
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值