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="data:images/1.jpg" alt="..."></div><div class="carousel-item"><img src="data:images/2.jpg" alt="..."></div><div class="carousel-item"><img src="data:images/3.jpg" alt="..."></div><div class="carousel-item"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/f_wx.png" alt=""><img src="data: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>

BootStrap框架模块:BootStrap4实战相关推荐

BootStrap框架模块：BootStrap4基础
BootStrap简介 Bootstrap 是全球最受欢迎的前端开源工具库,它支持Sass混合.响应式矩阵系统和它自带的库分量和分量的JavaScript.基于Bootstrap提供强大的功能,能够让 ...
pythondjangoweb典型模块开发实战 pdf下载_胡阳《Django企业开发实战高效Python Web框架指南》PDF及代码...
Python社区中的框架Django 的定位是企业级开发框架,全功能 Web开发框架,少代码快速开发 Web应用.从开发速度还是上线后新功能的迭代,Django 都能很好地满足需求. 学完 Pytho ...
UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
【笔记-node】《Egg.js框架入门与实战》、《用 React+React Hook+Egg 造轮子全栈开发旅游电商应用》
20210226-20210227:<Egg.js框架入门与实战> 课程地址:https://www.imooc.com/learn/1185 第一章课程导学 01-01 课程介绍一. ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
BootStrap响应式项目实战之世界杯网页设计
视频 BootStrap实战目标响应式布局复习 HTML5的复习 CSS3的复习了解BootStrap 一.复习响应式布局:页面可以随着设备的变化而动态改变. 淘宝:pc端一套页面:不能随 ...
BootStrap框架的优缺点
随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现 ...
html——自定义进度条、bootstrap框架及layu框架进度条的使用及对比
先展示一下效果: 动态效果: 1. 第一个是自己写的一个进度条,纯js写的,样式不太好看,相关的函数进行了js的封装,且适配性不太好,不推荐,只是作为个人的尝试. 2. 第二个是bootstrap的进 ...
python django web典型模块开发实战_带你读《Python Django Web典型模块开发实战》之一：从新浪微博聊起多端应用-阿里云开发者社区...
Python Django Web典型模块开发实战点击查看第二章点击查看第三章寇雪松编著第1章从新浪微博聊起多端应用当人们听到"新浪",脑海里第一个浮现的关联词是& ...

BootStrap框架模块:BootStrap4实战

BootStrap4实战

1.1 项目实战一

全局公共CSS文件

顶部导航部分实现

轮播图区域实现

内容区域第一块

内容区域第二块

内容区域第三块

底部实现

BootStrap框架模块:BootStrap4实战相关推荐

最新文章

热门文章