使用Bootstrap快速构建页面

最新推荐文章于 2024-06-12 11:24:03 发布

Vic·Tory

最新推荐文章于 2024-06-12 11:24:03 发布

阅读量2.5k

点赞数 1

分类专栏： WEB 文章标签： bootstrap

本文链接：https://blog.csdn.net/theVicTory/article/details/107942742

版权

WEB 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

1、引入Bootstrap

首先从Bootstrap官网下载代码包，解压后将其中的css、js、fonts中的文件放在对应的静态资源目录中。之后在要使用的页面中引入该css、js文件，或者也可以直接以CDN的方式引入。注意bootstrap.js是基于jQuery，因此也需要引入jquery.js。

接着需要用meta标签设置字符编码为utf-8，并且使用viewpoint固定页面大小以保证页面在不同分辨率的设备上看起来都是一样的

<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../static/css/bootstrap.css">
    <script src="../../static/js/jquery.js"></script>
    <script src="../../static/js/bootstrap.js"></script>
</head>

2、网格系统

Bootstrap中可以根据屏幕的大小动态计算元素的宽度。如下所示，Bootstrap会将父元素默认划分为12等份，我们通过指定占多少份来计算子元素的宽度。例如我们为元素添加类名.col-md-4，则其宽度占整个父元素的4/12。下一个子元素会自动跟在其右边，若总份数超过12之后自动换下一行，例如大小为5的元素后面是一个大小为8的元素，5+8>12该元素会自动换到下一行。
在这里插入图片描述
.col-md-4中的md代表medium中等的，即Bootstrap会对页面宽度进行检测，如果宽度复合某个区间，则对应前缀的类名生效

设备	大小	前缀
超小设备（extremely small）	<768px	.col-xs-
小型设备（small）	>768px	.col-sm-
中等设备	>992px	.col-md-
大型设备	>1200px	.col-lg-

如下所示，为网格添加类名col-md-4和col-sm-6，即当页面宽度介于768px~992px时，类名col-sm-6生效，每个网格占用六份，一行有两个网格。当页面宽度大于992px时，col-md-4生效，每个网格占4份，一行三个网格。

<div class="row">
    <div class="col-md-4 col-sm-6">网格1</div>
    <div class="col-md-4 col-sm-6">网格2</div>
    <div class="col-md-4 col-sm-6">网格3</div>
</div>

在这里插入图片描述

3、常用组件

Bootstrap官网提供了网页常用组件的demo样例，我们可以直接复制粘贴并加以简单修改后直接使用。

导航栏

在这里插入图片描述

通过<nav class="navbar navbar-default navbar-static-top">使用导航栏，其中navbar-default为白色背景，navbar-inverse可以设置为黑色背景

其中使用了navbar-toggle类声明了响应式弹框，当页面为超小型设备时会自动触发将id为navbar的导航条收起到右上角弹框。

在#navbar内通过<ul class="nav navbar-nav">标签定义多个导航标签，其中class="active"的li会显示为激活状态。在每个子<li>内可以进一步通过<ul class="dropdown-menu">定义下拉菜单

显示小徽标可以采用<span class="badge">3</span>的方式

注意到其中有许多声明为sr-only的类，这是专门为残障人士提供的屏幕阅读器属性，正常页面不会显示改内容，当使用屏幕阅读器时会朗读其中内容。

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
        <!--导航条-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <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="#">Project name</a>
        </div>
        <!--左侧导航标签-->
        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</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 role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
            <!--右侧导航标签-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">Default</a></li>
                <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
                <li><a href="../navbar-fixed-top/">Messages<span class="badge">3</span></a></li>
            </ul>
        </div>
    </div>
</nav>

轮播图

在这里插入图片描述如下所示id="carousel-example-generic"的轮播图，通过<ol class="carousel-indicators">创建轮播图的指示器，在每个li中通过data-target="#carousel-example-generic"绑定到轮播图，data-slide-to="0"绑定到具体某张图。

<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" class=""></li>
        <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
    </ol>
    
    <!--轮播图-->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3M2UxNjJmOTk1IHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTczZTE2MmY5OTUiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjxnPjx0ZXh0IHg9IjM5MC41IiB5PSIyNzUuNDQwMDAwOTE1NTI3MyI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered="true">
        </div>
        <div class="item">
            <img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzNlMTYzNjU3ZiB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjU3cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3M2UxNjM2NTdmIj48cmVjdCB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM2NjYiLz48Zz48dGV4dCB4PSIzMzUuNjE2NjY4NzAxMTcxOSIgeT0iMjc1LjQ0MDAwMDkxNTUyNzMiPlNlY29uZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
        </div>
        <div class="item">
            <img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide [1140x500]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3M2UxNjMxMDc1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTczZTE2MzEwNzUiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjxnPjx0ZXh0IHg9IjM3Ny44NzUiIHk9IjI3NS40NDAwMDA5MTU1MjczIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" 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" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

表格

在这里插入图片描述通过<table class="table">来创建一个表格，特别地，如需使用条形背景的表格再添加类名table-striped，带边框的表格table-bordered。如果需要合并两个单元格可以使用<td colspan="2">

<div class="container">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

输入框

在这里插入图片描述
对input标签添加form-control类来设置表单输入框的样式

<div class="col-md-4">
    <form class="container" th:action="@{/login}" method="post">
        <h2>请登录</h2>
    	<label for="username">账号：</label>
    	<input type="text" id="username" class="form-control" placeholder="请输入用户名" required="" autofocus="">
    	<label for="password">密码：</label>
    	<input type="password" id="password" class="form-control" placeholder="请输入密码" required="">
    	<div class="checkbox">
        	<label>
            	<input type="checkbox" value="remember-me"> 记住密码
       	 	</label>
    	</div>
    	<p th:if="${loginError}" class="alert alert-danger" th:text="${errMsg}"></p>
    	<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    </form>
</div>

列表栏

在这里插入图片描述
通过类名

声明父类包裹，子类自动成为列表，列表添加active类会显示为蓝色

<div class="col-sm-4">
    <div class="list-group">
        <a href="#" class="list-group-item active">列表项1</a>
        <a href="#" class="list-group-item">列表项2</a>
        <a href="#" class="list-group-item">列表项3</a>
        <a href="#" class="list-group-item">列表项4</a>
    </div>
</div>

按钮

在这里插入图片描述如下所示，对button添加btn类实现为按钮，并且添加类名btn-default将按钮设置为白色。类似地可以将按钮设置为其他颜色，在Bootstrap中default相关的为白色，Primary蓝色、success绿色、info浅蓝色、warning橙色、danger红色。特别的btn-link为无边框的链接按钮。

同样可以通过添加btn-lg、btn-sm、btn-xs类来设置按钮大小

<div class="container">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
    <button type="button" class="btn btn-lg btn-default">大按钮</button>
    <button type="button" class="btn btn-sm btn-default">小按钮</button>
    <button type="button" class="btn btn-xs btn-default">超小按钮</button>
</div>

在这里插入图片描述通过label设置标签显示，与按钮相比，标签无法点击。标签的颜色和按钮类似可以通过添加label-default等类名来设置。值得注意的是标签会根据外部父元素的大小自动进行变化，例如将标签分别包裹在<h3>、<h5>内大小不同。

    <h3>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
    </h3>
    <h5>
        <span class="label label-default">Default</span>
        <span class="label label-primary">Primary</span>
        <span class="label label-success">Success</span>
        <span class="label label-info">Info</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-danger">Danger</span>
    </h5>

Panel

在这里插入图片描述
通过panel类来实现面板样式，panel-default等来指定颜色

<div class="container">
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
</div>

提示框

在这里插入图片描述通过alert类来实现提示框，alert-success类可以设置其颜色

<div class="container">
    <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message.
    </div>
</div>

进度条

在这里插入图片描述进度条的实现首先在外围包裹一个<div class="progress">用于实现整体进度槽，然后在其中填充progress-bar实现的进度，通过width来控制宽度，例如60%的进度，那么就填充width: 60%。同样可以定制进度条的颜色，特别地progress-bar-striped为条纹状。可以在一个进度槽内填充多个进度条。

    <div class="progress">
        <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 35%"></div>
        <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
    </div>

其他Demo

除此之外Bootstrap官网还提供了许多现成的样例可以直接拿来修改和使用，例如：
博客页面：https://v3.bootcss.com/examples/blog/
在这里插入图片描述
控制台实现：

Vic·Tory

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
使用Bootstrap快速构建页面

1、引入Bootstrap首先从Bootstrap官网下载代码包，解压后将其中的css、js、fonts中的文件放在对应的静态资源目录中。之后在要使用的页面中引入该css、js文件，或者也可以直接以CDN的方式引入。注意bootstrap.js是基于jQuery，因此也需要引入jquery.js。接着需要用meta标签设置字符编码为utf-8，并且使用viewpoint固定页面大小以保证页面在不同分辨率的设备上看起来都是一样的<head> <meta charset="utf-8"
复制链接

扫一扫