BootStrap框架模块:BootStrap4实战

最新推荐文章于 2023-10-03 12:23:37 发布

脑袋不灵光的小白羊

最新推荐文章于 2023-10-03 12:23:37 发布

阅读量1.5k

点赞数

分类专栏： WEB前端文章标签： bootstrap css html

本文链接：https://blog.csdn.net/qq_42588990/article/details/122488187

版权

WEB前端专栏收录该内容

36 篇文章 4 订阅

订阅专栏

BootStrap4实战

微票儿 (opens new window)本项目是由BootStrap3升级到BootStrap4，笔者心得是，如果没有必须要求，最好不要升级。如果是新项目在3和4之间做选择。建议使用4版本。

1.1 项目实战一

全局公共CSS文件

/* 导航 */

.navbar-brand{
    padding: 0 15px;
    height: 70px;
}

/* banner */
.banner{
    /* height: 500px; */
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%;
    background: url(../images/bannerbg.png) no-repeat;
    background-size: cover;
}
ul{
    list-style-type: none;
    padding-left: 0;
}
.box{
    background: #fff;
    padding: 20px 16px;
}
.box li{
    padding-top: 10px;
}

/* content-one */
.content-one{
    margin-top: 30px;
    margin-bottom: 30px;
}

.tab-content .tab-list{
    margin-bottom: 10px;
}

顶部导航部分实现

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">
            <img src="./images/logoMsg.png" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">全国</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">演出</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">电影</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">我的微票儿 <span class="badge badge-danger">new</span></a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0 search">
                <input class="form-control mr-sm-2" type="search" placeholder="输入你想要的内容" aria-label="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav">
                <li class="nav-item"><a href="#">登录</a></li>
                <li class="nav-item"><a href="#">注册</a></li>
            </ul>
        </div>
    </nav>

轮播图区域实现

  <!-- 轮播 -->
    <div class="banner">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <!-- 轮播图效果 -->
                    <div id="carouselExampleIndicators" data-interval='3000' class="carousel slide"
                        data-ride="carousel">
                        <!-- 轮播点 -->
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                        </ol>
                        <!-- 轮播内容---每屏 item   显示选中active-->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img src="images/1.jpg" alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="images/2.jpg" alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="images/3.jpg" alt="...">
                            </div>
                            <div class="carousel-item">
                                <img src="images/4.jpg" alt="...">
                            </div>
                        </div>

                        <!-- 轮播上的左右箭头 -->
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                            data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                            data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="box">
                        <h3>特惠看</h3>
                        <img src="images/img1.jpg" class="img-responsive" alt="">
                        <ul>
                            <li><a href="#">[苏州]2016迷笛电子音乐节(预售)</a></li>
                            <li><a href="#">[苏州]2016迷笛电子音乐节(预售)</a></li>
                            <li><a href="#">[苏州]2016迷笛电子音乐节(预售)</a></li>
                            <li><a href="#">[苏州]2016迷笛电子音乐节(预售)</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

内容区域第一块

<div class="row content-one">
            <div class="col-md-9">
                <div class="row">
                    <div class="col-6 col-md-3">
                        <div class="card">
                            <img class="card-img-top" src="images/5.jpg" alt="Card image cap">
                            <div class="card-body">
                                <p class="card-text">[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="card">
                            <img class="card-img-top" src="images/6.jpg" alt="...">
                            <div class="card-body">
                                <p class="card-text">[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="card">
                            <img class="card-img-top" src="images/7.jpg" alt="...">
                            <div class="card-body">
                                <p class="card-text">[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="card">
                            <img class="card-img-top" src="images/8.jpg" alt="...">
                            <div class="card-body">
                                <p class="card-text">[上海]百老汇经典音乐剧《狮子王》</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 选项卡 -->
            <div class="col-md-3">
                <div class="nav">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item"><a class="nav-link active" href="#home" role="tab" data-toggle="tab">首页</a>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="#profile" role="tab" data-toggle="tab">技能课</a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <img src="images/img2.jpg" class="img-responsive" alt="">
                            <ul>
                                <li><a href="">计算机是多少电竞盛典就是简单</a></li>
                                <li><a href="">计算机是多少电竞盛典就是简单</a></li>
                            </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <img src="images/img3.jpg" class="img-responsive" alt="">
                            <ul>
                                <li><a href="">计算机是多少电竞盛典就是简单</a></li>
                                <li><a href="">计算机是多少电竞盛典就是简单</a></li>
                            </ul>
                        </div>
                    </div>

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

内容区域第二块

项目注意事项，哪怕是一张图片，也要注意响应式的处理

 <img src="images/ad1.jpg" class="img-fluid" alt="">

内容区域第三块

<div class="row content-three">
            <div class="col-md-9">
                <div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item active"><a class="nav-link active" href="#yanchang" aria-controls="home" role="tab" data-toggle="tab">演唱会</a></li>
                        <li class="nav-item"><a class="nav-link" href="#tiyu" aria-controls="profile" role="tab" data-toggle="tab">体育赛事</a></li>
                        <li class="nav-item"><a class="nav-link" href="#wutai" aria-controls="messages" role="tab" data-toggle="tab">舞台剧</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="yanchang">
                            <!-- 栅格布局 -->
                            <div class="row">
                                <div class="col-md-3 col-sm-6 tab-list">
                                    <div class="card">
                                        <img class="card-img-top" src="images/9.jpg" alt="...">
                                        <div class="card-body">
                                            <p>[上海]百老汇经典音乐剧《狮子王》</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 tab-list">
                                    <div class="card">
                                        <img class="card-img-top" src="images/10.jpg" alt="...">
                                        <div class="card-body">
                                            <p>[上海]百老汇经典音乐剧《狮子王》</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 tab-list">
                                    <div class="card">
                                        <img class="card-img-top" src="images/11.jpg" alt="...">
                                        <div class="card-body">
                                            <p>[上海]百老汇经典音乐剧《狮子王》</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 tab-list">
                                    <div class="card">
                                        <img class="card-img-top" src="images/12.jpg" alt="...">
                                        <div class="card-body">
                                            <p>[上海]百老汇经典音乐剧《狮子王》</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 tab-list">
                                    <div class="card">
                                        <img class="card-img-top" src="images/9.jpg" alt="...">
                                        <div class="card-body">
                                            <p>[上海]百老汇经典音乐剧《狮子王》</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 tab-list">
                                    <div class="card">
                                        <img class="card-img-top" src="images/10.jpg" alt="...">
                                        <div class="card-body">
                                            <p>[上海]百老汇经典音乐剧《狮子王》</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 tab-list">
                                    <div class="card">
                                        <img class="card-img-top" src="images/11.jpg" alt="...">
                                        <div class="card-body">
                                            <p>[上海]百老汇经典音乐剧《狮子王》</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 tab-list">
                                    <div class="card">
                                        <img class="card-img-top" src="images/12.jpg" alt="...">
                                        <div class="card-body">
                                            <p>[上海]百老汇经典音乐剧《狮子王》</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div role="tabpanel" class="tab-pane" id="tiyu">222</div>
                        <div role="tabpanel" class="tab-pane" id="wutai">333</div>
                    </div>

                </div>
            </div>
            <div class="col-md-3">
                <div class="content-right">
                    <div class="item">
                        内容1
                    </div>

                    <div class="item">
                        内容2
                    </div>

                    <div class="item">
                        内容3
                    </div>
                </div>
            </div>
        </div>

底部实现

<div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4 clearfix">
                    <img class="pull-left" src="images/footer_logo.png" alt="">
                    <div class="info pull-right">
                        <p class="footer-title">微信电影票官网</p>
                        <p class="small">在线占好座，覆盖影院全国第一</p>
                    </div>
                </div>
                <div class="col-md-4 clearfix">
                    <img class="pull-left" src="images/phoneIcon.png" alt="">
                    <div class="info pull-right">
                        <p class="footer-title">微信电影票官网</p>
                        <p class="small">在线占好座，覆盖影院全国第一</p>
                    </div>
                </div>
                <div class="col-md-4 clearfix">
                    <div class="pull-left">
                        <img class='img' src="images/f_wx.png" alt="">
                        <img src="images/f_wpr.png" alt="">
                    </div>
                    <div class="info pull-right">
                        <p class="footer-title">微信电影票官网</p>
                        <p class="small">在线占好座，覆盖影院全国第一</p>
                    </div>
                </div>
            </div>
            <p class="address">@2015北京微影时代科技有限公司版权所有　　京ICP备14034406号-2</p>
        </div>
    </div>