Bootstrap框架使用及可视化布局

谁借莪１个温暖的怀抱￠ 2023-03-14 08:23 10阅读 0赞

### Bootstrap框架的入门学习 ###

*   *   *  1. Bootstrap 概述
         *  2. Bootstrap 环境配置
         *  3. Bootstrap 基本使用
         *  4. Bootstrap 可视化布局
         *  5. 测试 demo

### 1. Bootstrap 概述 ###

Bootstrap是一个前端框架，由Twitter开发，非常受欢迎。  
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。  
相当于半成品；开发人员基于框架可以进行二次开发，大大的节省开发人员的开发时间。  
特点：

*  定义了很多的css样式和js插件，直接可以使用这些样式和插件得到丰富的 页面效果
 *  支持响应式布局，写一套页面就可以在不同分辨率的设备上有比较好的效果。

### 2. Bootstrap 环境配置 ###

1.  下载 Bootstrap：[https://v3.bootcss.com/][https_v3.bootcss.com]
2.  创建 bootstrap 目录，导入 css/ fonts/ js/ ：  
    ![Bootstrap 环境配置][Bootstrap]
3.  导入 jQuery 库：bootstrap/js/**jquery-3.5.1.min.js**
4.  将资源导入到页面：  
    Bootstrap 样式文件：bootstrap/css/`bootstrap.min.css`  
    jQuery 类库文件：bootstrap/js/`jquery-3.5.1.min.js`  
    Bootstrap 类库文件：bootstrap/js/`bootstrap.min.js`

### 3. Bootstrap 基本使用 ###

*  `样式`：[https://v3.bootcss.com/css/][https_v3.bootcss.com_css]  
    全局CSS样式/格栅系统/排版/表格/表单/按钮/图片/辅助样式等
 *  `组件`：[https://v3.bootcss.com/components/][https_v3.bootcss.com_components]  
    下拉菜单/导航条/分页/标签/徽章/巨幕/页头/缩略图/警告框/进度条等
 *  `插件`：[https://v3.bootcss.com/javascript/][https_v3.bootcss.com_javascript]  
    过滤效果/模糊框/滚动监听/标签页/工具提示/弹出框/Collapse(内容收缩)/Carousel(轮播图)等

> CV大法，按需微调。

### 4. Bootstrap 可视化布局 ###

*  Bootstrap 官方可视化布局工具：[https://www.bootcss.com/p/layoutit/][https_www.bootcss.com_p_layoutit]  
    拖拽布局，【下载】按钮生成干净的HTML, 可以复制粘贴代码到项目。
 *  第三方可视化布局工具：

1.  ibootstrap.cn：[http://www.ibootstrap.cn/][http_www.ibootstrap.cn]
2.  15 款最好的 Bootstrap 在线编辑工具：[https://www.runoob.com/bootstrap/bootstrap-ui-editor.html][https_www.runoob.com_bootstrap_bootstrap-ui-editor.html]

### 5. 测试 demo ###

效果图：  
![Bootstrap框架使用及可视化布局demo][Bootstrap_demo]  
源码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>炎黄子孙旅游网</title>
        <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-3.5.1.min.js"></script>
        <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
        <style> body { width: 100%; margin-left: auto; margin-right: auto; } .container-fluid { padding: 0; } /* 图片随窗口大小变化自动伸缩 */ #top_banner { width: 100%; height: auto; } hr { margin-top: 5px; } .price { color: orange; } /* 需要两边留白且居中的主体内容 */ .content { width: 80%; } .thumbnail { padding: 0; } </style>
    </head>
    <body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <%--顶部banner--%>
                <img id="top_banner" src="image/top_banner.jpg" alt="top-banner"/>
                <%--导航条--%>
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <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 style="color: orange; margin-left: 10px" class="navbar-brand" href="#">炎黄子孙旅游网</a>
                        </div>
    
                        
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">名胜 <span class="sr-only">(current)</span></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">各地景区 <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">郑州</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">开封</a></li>
                                        <li><a href="#">洛阳</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">南阳</a></li>
                                        <li><a href="#">驻马店</a></li>
                                        <li><a href="#">平顶山</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 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="#">退出</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <%--轮播图--%>
                <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>
                    </ol>
    
                    
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="image/banner_1.jpg" alt="轮播图1">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                        <div class="item">
                            <img src="image/banner_2.jpg" alt="轮播图2">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </div>
                        <div class="item">
                            <img src="image/banner_3.jpg" alt="轮播图3">
                            <div class="carousel-caption">
                                ...
                            </div>
                        </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">上一张</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">下一张</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="content container-fluid">
        <div class="mod_title row-fluid">
            <div class="span12">
                <%--栏目标题--%>
                <div style="margin-top: 20px">
                    <div>
                        <img src="image/icon_5.jpg" alt="">旅游精选
                    </div>
                    <hr/>
                </div>
                <%--栏目内容 2x4--%>
                <div class="row-fluid">
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="thumbnail">
                            <img src="image/jingxuan_1.jpg" alt="精选1">
                            <div class="caption">
                                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                                <span class="price">$699</span>
                                <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="thumbnail">
                            <img src="image/jingxuan_1.jpg" alt="精选1">
                            <div class="caption">
                                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                                <span class="price">$699</span>
                                <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="thumbnail">
                            <img src="image/jingxuan_1.jpg" alt="精选1">
                            <div class="caption">
                                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                                <span class="price">$699</span>
                                <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="thumbnail">
                            <img src="image/jingxuan_1.jpg" alt="精选1">
                            <div class="caption">
                                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                                <span class="price">$699</span>
                                <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="thumbnail">
                            <img src="image/jingxuan_1.jpg" alt="精选1">
                            <div class="caption">
                                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                                <span class="price">$699</span>
                                <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="thumbnail">
                            <img src="image/jingxuan_1.jpg" alt="精选1">
                            <div class="caption">
                                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                                <span class="price">$699</span>
                                <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="thumbnail">
                            <img src="image/jingxuan_1.jpg" alt="精选1">
                            <div class="caption">
                                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                                <span class="price">$699</span>
                                <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="thumbnail">
                            <img src="image/jingxuan_1.jpg" alt="精选1">
                            <div class="caption">
                                <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游首选+豪华酒店任选+机场酒店免费接送)</p>
                                <span class="price">$699</span>
                                <a href="#" class="btn btn-warning" role="button" style="margin-left: 50%">预定</a>
                            </div>
                        </div>
                    </div>
                </div>
                <%--分页栏--%>
                <div align="center">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">«</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="true">»</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <%--栏目标题--%>
                <div>
                    <div>
                        <img src="image/icon_6.jpg" alt="">人气推荐
                    </div>
                    <hr/>
                </div>
                <%--栏目内容 1 + 2x3--%>
                <div class="row-fluid">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 30%">
                        <img style="width: 300px; height: 445px;" src="image/guonei_1.jpg" alt="特卖">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 70%; padding: 0">
                        <div class="row-fluid">
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="thumbnail">
                                    <img src="image/jingxuan_1.jpg" alt="精选1">
                                    <div class="caption">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                        <span class="price">$699</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="thumbnail">
                                    <img src="image/jingxuan_2.jpg" alt="精选1">
                                    <div class="caption">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                        <span class="price">$699</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="thumbnail">
                                    <img src="image/jingxuan_3.jpg" alt="精选1">
                                    <div class="caption">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                        <span class="price">$699</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="thumbnail">
                                    <img src="image/jingxuan_4.jpg" alt="精选1">
                                    <div class="caption">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                        <span class="price">$699</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="thumbnail">
                                    <img src="image/jingxuan_5.jpg" alt="精选1">
                                    <div class="caption">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                        <span class="price">$699</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
                                <div class="thumbnail">
                                    <img src="image/jingxuan_6.jpg" alt="精选1">
                                    <div class="caption">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲旅游)</p>
                                        <span class="price">$699</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="background-color: #383838; width: 100%; height: 100px;">
        <div class="content container-fluid">
            <div class="row-fluid">
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
                        <img src="image/icon_1.jpg">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
                        <span style="font-size: 20px"><b>产品齐全</b></span>
                        <p style="color: gray; padding-top: 0px">产品全自主选，随心买</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
                        <img src="image/icon_1.jpg">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
                        <span style="font-size: 20px"><b>便利快捷</b></span>
                        <p style="color: gray; padding-top: 0px">产品全自主选，随心买</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
                        <img src="image/icon_1.jpg">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
                        <span style="font-size: 20px"><b>安全支付</b></span>
                        <p style="color: gray; padding-top: 0px">产品全自主选，随心买</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="margin-top: 20px;">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 25%;">
                        <img src="image/icon_1.jpg">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width: 75%; color: white; font-family: 'Microsoft YaHei UI'; ">
                        <span style="font-size: 20px"><b>贴心服务</b></span>
                        <p style="color: gray; padding-top: 0px">产品全自主选，随心买</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    </body>
    </html>

[https_v3.bootcss.com]: https://v3.bootcss.com/
[Bootstrap]: /images/20230312/e65266da92aa4255adb8826ce9860819.png
[https_v3.bootcss.com_css]: https://v3.bootcss.com/css/
[https_v3.bootcss.com_components]: https://v3.bootcss.com/components/
[https_v3.bootcss.com_javascript]: https://v3.bootcss.com/javascript/
[https_www.bootcss.com_p_layoutit]: https://www.bootcss.com/p/layoutit/
[http_www.ibootstrap.cn]: http://www.ibootstrap.cn/
[https_www.runoob.com_bootstrap_bootstrap-ui-editor.html]: https://www.runoob.com/bootstrap/bootstrap-ui-editor.html
[Bootstrap_demo]: /images/20230312/936c7bbd922f45269dbe84a60005c0d0.png