Bootstrap案例

最新推荐文章于 2024-01-05 10:55:59 发布

原创最新推荐文章于 2024-01-05 10:55:59 发布 · 346 阅读

1 ·

CC 4.0 BY-SA版权

代码同时被 2 个专栏收录

33 篇文章

订阅专栏

初级运用

19 篇文章

订阅专栏

该博客主要介绍了Bootstrap在网页设计中的应用，包括首页布局、门票预订、酒店查询、旅行套餐整合、香港交通、国内外旅游项目、定制旅行服务、全球自由行方案、旅游攻略分享、租车服务、国际电话卡购买以及商业保险和本地导游安排等丰富内容。

<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap.min.js"></script>
<style>
    .paddtop {
        padding-top: 10px;
    }

    .sousuo {
        float: left;
        border: 2px solid #ffc900;
        width: 400px;
        height: 35px;
        padding-left: 5px;
        margin-top: 15px;
    }

    .sousuo2 {
        float: left;
        border: 1px solid #ffc900;
        width: 90px;
        height: 35px;
        background-color: #ffc900;
        text-align: center;
        line-height: 35px;
        margin-top: 15px;
    }

    .jx {
        border-bottom: 2px solid #ffc900;
        padding: 5px;
    }

    .foot {
        height: 40px;
        background-color: #ffc900;
        text-align: center;
        line-height: 40px;
        font-size: 8px;
    }
</style>

搜索

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/banner_1.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="img/banner_2.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="img/banner_3.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
        </div>

        <!-- Controls -->
        <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>
</div>

黑马精选

上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）

¥699

上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）

¥699

上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）

¥699

上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）

¥699

</div>
<div class="row jx">
    <img src="img/icon_6.jpg">国内游
</div>
<div class="row paddtop">
    <div class="col-md-4">
        <img src="img/guonei_1.jpg">
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg">
                    <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">&yen899</font>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg">
                    <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">&yen899</font>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg">
                    <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">&yen899</font>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg">
                    <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">&yen899</font>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg">
                    <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">&yen899</font>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <img src="img/jiangxuan_1.jpg">
                    <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）</p>
                    <font color="red">&yen899</font>
                </div>
            </div>
        </div>
    </div>
</div>