Bootstrap基础学习

最新推荐文章于 2023-05-08 17:53:24 发布
最新推荐文章于 2023-05-08 17:53:24 发布
阅读量488 收藏 3
点赞数 2
分类专栏： 前端知识 文章标签： bootstrap css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52031422/article/details/125661434
版权

Bootstrap

基础加案例

1 初识bootstrap

  • 下载，导入

  • 在HTML文件中引入<link rel="stylesheet" href="static/plugings/bootstrap-3.4.1/css/bootstrap.css">

  • 运行

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--开发版本  较小-->
    <link rel="stylesheet" href="static/plugings/bootstrap-3.4.1/css/bootstrap.css">
<!--    &lt;!&ndash;生产版本  较大&ndash;&gt;-->
<!--    <link rel="stylesheet" href="static/plugings/bootstrap-3.4.1/css/bootstrap.css">-->
</head>
<body>
    <input type="button" class="btn btn-danger" value="提交"/>
    <input type="button" class="btn btn-success" value="提交"/>
    <input type="button" class="btn btn-primary" value="提交"/>
    <input type="button" class="btn btn-primary btn-sm" value="提交"/>
</body>
</html>

  • 注意区分开发版本和生产版本的使用

结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ug2VVCuA-1657181379275)(C:\Users\凡心\AppData\Roaming\Typora\typora-user-images\image-20220705151041446.png)]

2导航

参考网址：组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugings/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar{
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Good of Fan</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Hello <span class="sr-only">(current)</span></a></li>
                <li><a href="#">小米</a></li>
                <li><a href="#">华为</a></li>
                <li><a href="#">Apple</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">商城</a></li>
                        <li><a href="#">活动</a></li>
                        <li><a href="#">新品</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="查找">
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
</body>
</html>

结果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yLriJQnm-1657181379276)(C:\Users\凡心\AppData\Roaming\Typora\typora-user-images\image-20220705155701989.png)]

3. 栅栏

参考网站：全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

  • 把整体划分为12个栅格

  • 分类

    • 响应式，可以根据屏幕宽度的不同自动换行

      .col-lg-    1170px
.col-md-    970px
.col-sm-    750px

    • 非响应式

      
.col-xs- 

<div class="col-xs-5 clearfix" style="background-color: #1b6d85">我是不变的</div>
<div class="col-xs-7 clearfix" style="background-color: #8a6d3b">我是不变的</div>

  • 列偏移

    使用 col-*-offset-*设置

    <div class="col-md-offset-2 col-md-3 clearfix" style="background-color: #b2dba1">我是变的</div>
<div class="col-md-offset-2 col-md-5 clearfix" style="background-color: #9acfea">我是变的</div>

4. container

Bootstrap自带了container（容器 默认width：1170px）和 clearfix （去除浮动）

<div class="container-fluid clearfix">
	<div class="col-md-9"> </div>
    <div class="col-md-3"> </div>
</div>

<div class="container clearfix">
	<div class="col-md-9"> </div>
    <div class="col-md-3"> </div>
</div>

5. 面板

Bootstrap自带panel 不同的风格有

  • panel-default
  • panel-primary
  • panel-footer
  • panel-danger
<div class="panel panel-default">
            <div class="panel-body">
                Panel content
            </div>
            <div class="panel-footer">Panel footer</div>
</div>

案列：blog

结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ii8igMfT-1657181379277)(C:\Users\凡心\AppData\Roaming\Typora\typora-user-images\image-20220705165105456.png)]

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugings/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Good of Fan</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Hello <span class="sr-only">(current)</span></a></li>
                <li><a href="#">小米</a></li>
                <li><a href="#">华为</a></li>
                <li><a href="#">Apple</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">商城</a></li>
                        <li><a href="#">活动</a></li>
                        <li><a href="#">新品</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="查找">
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="container-fluid clearfix">
    <div class="col-md-9">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODFjZDdkOGU2YyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MWNkN2Q4ZTZjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">母猪的产后护理</h4>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </div>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODFjZDdkOGU2YyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MWNkN2Q4ZTZjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Harry up!</h4>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </div>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64" style="width: 64px; height: 64px;"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xODFjZDdkOGU2YyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4MWNkN2Q4ZTZjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzUyMTg1ODIxNTMzMiIgeT0iMzYuNTU5OTk5OTQyNzc5NTQiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Top aligned media</h4>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </div>

    </div>
    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-body">
                Panel content
            </div>
            <div class="panel-footer">Panel footer</div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-body">
                Panel content
            </div>
            <div class="panel-footer">Panel footer</div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-body">
                Panel content
            </div>
            <div class="panel-footer">Panel footer</div>
        </div>

    </div>
</div>
</body>
</html>
</body>
</html>

案例：登录

直接附上源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugings/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .container {
            width: 300px;
            margin-top: 100px;
            border : 1px solid #b2dba1;
            padding-bottom: 10px;

            border-radius: 5px;/* 设置圆角 */

            /**
            *第一个参数 水平的阴影距离
            *第二个参数 垂直方向的阴影距离
            *第三个参数 模糊距离
            *第四个参数 模糊的颜色
            */
            box-shadow: 5px 5px 20px lightblue;
        }

        .head {
            width: 100px;
            font-size: 20px;
            color: black;
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container clearfix">
<!--    <div class="head">用户登录</div>-->
    <h2 style="text-align: center">用户登录</h2>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="User">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>
</body>
</html>

注意的几点

  • box-shadow的设计:

    5px 5px 20px lightblue;
    *第一个参数 水平的阴影距离
    *第二个参数 垂直方向的阴影距离
    *第三个参数 模糊距离
    *第四个参数 模糊的颜色

  • 设置圆角border-radius

结果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lVzbXQMm-1657181379278)(C:\Users\凡心\AppData\Roaming\Typora\typora-user-images\image-20220705174814483.png)]

案例：后台管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugings/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .table {
            margin-top: 20px;
        }

    </style>
</head>
<body>
<div>
<!--    导航区-->
    <div>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Good of Fan</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Hello <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">小米</a></li>
                            <li><a href="#">华为</a></li>
                            <li><a href="#">Apple</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true"
                                   aria-expanded="false">更多<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">商城</a></li>
                                    <li><a href="#">活动</a></li>
                                    <li><a href="#">新品</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-left">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="查找">
                            </div>
                            <button type="submit" class="btn btn-default">提交</button>
                        </form>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">登录</a></li>
                            <li><a href="#">注册</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true"
                                   aria-expanded="false">Dropdown <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </div>
        </nav>
    </div>
<!--    表单面板区-->
    <div class="container">

        <div class="panel panel-default">
            <div class="panel-heading">表单面板</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">Name</label>
                        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail2">Email</label>
                        <input type="email" class="form-control" id="exampleInputEmail2"
                               placeholder="jane.doe@example.com">
                    </div>
                    <button type="submit" class="btn btn-primary">保 存</button>
                </form>
            </div>
        </div>

    </div>
<!--    表格面板区-->
    <div class="container">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">表格面板</div>
            <!--            <div class="panel-body">-->
            <!--                <p>注意:重要数据表格</p>-->
            <!--            </div>-->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>
                        <a class="btn btn-primary btn-xs">修改</a>
                        <a class="btn btn-danger btn-xs">删除</a>
                    </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>
    </div>
<!--    分页区-->
    <div class="container">
    <ul class="pagination">
        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="true">»</span></a></li>
    </ul>
    </div>
</div>
</body>
</html>

运行结果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DnZXOSpU-1657181379278)(C:\Users\凡心\AppData\Roaming\Typora\typora-user-images\image-20220705223137945.png)]

​

6. 图标

(i

<div class="clearfix more">
    <i class="fa fa-user-circle-o" aria-hidden="true">凡</i>
    <i class="fa fa-calendar" aria-hidden="true">2022-07-06</i>
    <i class="fa fa-comment" aria-hidden="true">1000</i>

    <i style="float: right" class="fa fa-thumbs-up" aria-hidden="true">100</i>
</div>

7. 依赖

Bootstrpt依赖JavaScript的类库，jQuery

  • 下载jQuery，在页面上应用jQuery

  • 在页面上应用Bootstrpt的JavaScript包

    <script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugings/bootstrap-3.4.1/js/bootstrap.min.js"></script>
小凡在努力
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap从入门到精通（全）
码农研究僧的博客
11-22 6万+
目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统3. 常用样式 前言 在了解这篇文章的时候 需要提前知道这些知识点 可看我之前的文章 html从入门到精通（全） css属性从入门到精通（全） JavaScript从入门到精通（全） 这篇文章的学习主要通过 2021最新完整版Bootstrap教程（最给力的前端框架）bootstrap框架讲解-快速上手,最适合后端开发人员的bootstrap保姆级使用教程 关于Bootstrap的主要作用 是⼀套现成的 CSS 样
bootstrap入门教程
专治八阿哥的孟老师
03-31 6125
bootstrap简介：​ bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。​ bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。boostrap特点​ 1 ) 移动设备优先：自 bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持：​​ 2 ) 所有的主流浏览器都支持 bootstrap。​​ 3 ) 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 bootstrap。
Bootstrap学习
weixin_45790889的博客
03-28 622
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210507110807987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc5MDg4OQ==,size_16,color_FFFFFF,t_70
BootStrap简单学习
秋雨绵绵
03-04 1268
本文是关于BootStrap的简单学习，适合后端开发者查阅。
Bootstrap框架学习
2023也要一起加油鸭
03-01 461
文章目录1.Bootstrap的概念2.Bootstrap的好处3.快速入门知识讲解4.Bootstrap的响应式布局5.CSS样式和JS插件（具体使用去Bootstrap中文官网查找）5.1 全局CSS样式5.2 组件5.3 轮播图6.Bootstrap练习 1.Bootstrap的概念 一个前端开发框架，Bootstrap 基于 HTML、CSS、JavaScript 的，它简洁灵活，......
bootstrap基础知识学习笔记
09-01
主要针对bootstrap基础知识为大家整理了详细的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap零基础学习第一课之模板
09-02
主要为大家详细介绍了Bootstrap零基础学习第一课：模板，感兴趣的小伙伴们可以参考一下
BOOTSTRAP基础
01-26
这里是我一些学习的BOOTSTRAP基础，希望对你们有用，现在已经转行了
Bootstrap 入门
我的的博客哦
05-08 2658
🔰框架顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的，其功能单一，并且比较小。🔰前端常用的框架有 Bootstrap、Vue、Angular、React 等，既能开发 PC 端，也能开发移动端。🔰Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。
bootstrap-真正使用完整学习手册
09-13
bootstrap-真正使用完整学习手册，含版面设计、表单验证等等
BootStrap快速入门
chenguoao1999的博客
09-15 930
课程笔记Day47 BootStrap快速入门 BootStrap栅格系统 BootStrap常用样式 第一章 BootStrap快速入门 第01节 基础理论 1、概念介绍 1. 什么是 BootStrap ? BootStrap 是一款前端的框架, 基于 HTML CSS 和 JavaScript 开发出来的, 目前持续的更新着 2. BootStrap 有什么作用啊? 可以快速的搭建网页, 内部制定了很多的样式效果,可以直接拿过来快速使用。 3. BootStrap 有什么特色呢? 支持响
Bootstrap【学习笔记】
weixin_52487106的博客
01-18 306
学习笔记
Bootstrap入门（一）
qq_62331938的博客
04-27 2184
前言 大家好！我是九歌，今天我要分享的内容是Bootstrap的入门，首先老规矩先上思维导图。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Bootstrap 学习一门新的技术我们终究都逃不过三个W。What,Why,Where。 1.What——Bootstrap是什么？ Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍...
HTML学习笔记（三）(Bootstrap框架入门)
qq_47267252的博客
05-31 597
HTML学习笔记（三） 前言Bootstrap框架1.安装 前言 HTML（结构）+CSS（美化）+JavaScript（操作），但是程序员不是美工，所有我们没有大量的时间去自己去写一条完整的网站界面，那么就有人提供了一条针对于开发人员使用的前端框架，方便我们开发人员使用，不需要在操心一些样式布局等操作。 Bootstrap框架 出身名门（FaceBook脸谱网），简单、直观、强悍的前端开发框架，我们需要学习开发框架给我们预先设计好的使用标准（API），让WEB开发更加迅速、简单用于开发响应式布局、移
BootStrap基础学习
m0_73647713的博客
04-12 102
1.2Bootstrap是一套用于HTML、CSS、JavaScript的开源工具集。1.3BootStrap中有许多版本，个人建议使用BootStrap4版本的。1.1BootStrap是一个用于快速开发Web应用程序和网站的前端框架。3.5分别点击js/css会出现许多bootstrap中的文件。2.1易于使用具有html，css基础的都可以学得会使用。3.2下载的是Bootstrap的压缩包，此时需要解压。4.使用BootStrap里面的内容 **2. 为什么要去使用BootStrap？
Bootstrap教程（基于Bootstrap3）~~~一文完结系列
充满好奇的threecat
06-19 2504
前言： 即使我们有了HTML+CSS+JavaScript，但是开发起来还是代码比较多的，所以呢，我们就有了Bootstrap，来自Twitter，是目前最受欢迎的前端框架。它是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。 一、简洁 1、什么是Bootstrap？ Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。由Twitter的Mark Otto和Jaco...
BootStrap
weixin_55878545的博客
02-27 874
BootStrap框架
Bootstrap简单学习
小王的博客
03-11 762
目录一、Bootstrap简介二、响应式布局三、CSS样式和JS插件四、事件监听机制 一、Bootstrap简介 1.1、概念：一个前端开发的框架 框架：一个半成品软件，开发人员可以在框架基础上，在进行开发，简化代码。 好处： 1、定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插得到丰富的页面效果。 2、响应式布局：同一套页面可以兼容不同分辨率的设备。 1.2、快速入门 1、下载Bootstrap 2、在项目中将这三个文件夹复制 3、创建html页面，引入必要的资源文件 二、响应式布局
bootstrap 学习
最新发布
05-26
Bootstrap是一个开源的前端框架，由Twitter的设计师和工程师共同开发。它提供了一系列的CSS、JavaScript和HTML组件，可用于快速搭建现代化的响应式网站和Web应用程序。 学习Bootstrap可以帮助你更高效地开发Web应用程序，减少开发时间和成本。以下是一些学习Bootstrap的步骤： 1. 了解Bootstrap的基础知识：Bootstrap提供了一系列的CSS类和JavaScript插件，用于快速搭建响应式布局、表单、导航条等组件。你可以先了解Bootstrap的基础知识，包括网格系统、排版、颜色、图标等。 2. 阅读Bootstrap文档：Bootstrap官方文档提供了详细的说明和示例，可以帮助你更好地理解Bootstrap的用法和功能。你可以按照文档的顺序逐步学习Bootstrap的各个组件和插件，从而掌握其使用方法。 3. 实践Bootstrap的应用：通过实践应用，你可以更深入地理解Bootstrap的用法和功能。你可以从简单的网站布局开始，逐步尝试使用Bootstrap的各个组件和插件，例如导航条、表单、模态框等。 4. 学习Bootstrap的扩展库：Bootstrap有许多扩展库，例如Bootstrap Material Design、BootstrapVue等，可以进一步扩展Bootstrap的功能和应用范围。你可以学习这些扩展库，并尝试将其应用到你的项目中。 5. 查阅Bootstrap的案例：Bootstrap已经被广泛应用于各种类型的Web应用程序，你可以查阅一些Bootstrap的案例，例如Bootstrap官方网站、Bootstrap Expo等，了解Bootstrap在实际项目中的应用和优化方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值