Bootstrap前端开发案例一


Posted in Javascript onJune 17, 2016

现在很多公司开发中都在使用bootstrap这个框架,bootstrap是Twitter公司的一个团队的作品,大大简化了我们的前端的开发。(后面会总结一些less的使用)
学习使用API我建议直接查看官网的API,地址:http://www.bootcss.com/
下面是部分目标效果图:

Bootstrap前端开发案例一

下面我就总结一个小Demo中的技巧和原理:
第一步、http://www.bootcss.com/下载bootstrap的压缩包,新建index.html,使用sublime或其它编辑器打开index页面,解压后目录是

Bootstrap前端开发案例一 

第二步、拷贝官网http://v3.bootcss.com/getting-started/的一个基本模板,方便后续的开发,

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
 <title>Bootstrap 101 Template</title>

 <!-- Bootstrap -->
 <link href="css/bootstrap.min.css" rel="stylesheet">

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <h1>你好,世界!</h1>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

1)、注意:jquery.js的引用一定要在bootstrap.min.js的前面,并且最好手动下载一个jquery.js,放在js路径下,<script src="js/jquery.min.js"></script>
 因为后来我在仿真的时候发现下拉和carousel的动画效果都没有了,发现基本模板的jquery文件是下载的,可能没有联网,所以没有下载下来,最好自己引用本地。
  2)、注意:css引用放页面上方,js引用放页面下方,因为css需要先加载渲染页面,而js需要在页面渲染完毕后加载执行;并且适应移动设备的meta语句:<meta name="viewport" content="width=device-width, initial-scale=1">

第三步、导航条
1)居中效果:container-fluent需要改成container 
2)白色改成反差效果的黑色: <nav class="navbar navbar-default navbar-inverse"> 
3)导航条固定到顶部,增加时类属性: navbar-fixed-top 

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
 <div class="container">
 <!-- Brand and toggle get grouped for better mobile display -->
 <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 class="navbar-brand" href="#">疯狂动物城</a>
 </div>

 <!-- Collect the nav links, forms, and other content for toggling -->
 <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><a href="#">特点</a></li>
 <li><a href="#">关于</a></li> 
 
 </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
 </nav>

4)导航条会遮盖body的顶部,所以增加样式

<style type="text/css"> 
 body{
 padding-top: 50px;
 } 
 </style>

5)特点的导航项目增加下拉菜单 

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">特点</a>
 <ul class="dropdown-menu">
 <li><a href="#">动物1</a></li>
 <li><a href="#">动物2</a></li>
 <li><a href="#">动物3</a></li>
 <li><a href="#">动物4</a></li>
 </ul>
 </li>

注意,子菜单的内容均嵌套在最外层的li标签里,并且li标签有类 dropdown,子菜单也是一个ul标签,类为dropdown-menu,具体映射关系见上面。

第四步、增加轮转效果,复制修改bootstrap组件的carousel模块:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <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>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <img src="image/1.jpg" alt="...">
 <div class="carousel-caption">
 <h1>疯狂动物城1</h1>
 <p>来扩大感受到的女生看房名卡位的访问怒法师开门了国家发生的两个号</p>
 </div>
 </div>
 <div class="item">
 <img src="image/2.jpg" alt="...">
 <div class="carousel-caption">
 <h1>疯狂动物城1</h1>
 <p>来扩大感受到的女生看房名卡位的访问怒法师开门了国家发生的两个号</p>
 </div>
 </div>
 <div class="item">
 <img src="image/3.jpg" alt="...">
 <div class="carousel-caption">
 <h1>疯狂动物城1</h1>

 <p>来扩大感受到的女生看房名卡位的访问怒法师开门了国家发生的两个号</p>
 </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">上一页</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>

1)为了轮转图片的时候没有留白或间隙,增加样式 

.carousel{
 height: 500px;
 background-color: #000;
 }

 .carousel .item{
 height: 500px;
 background-color: #000;
 } .carousel img{ width: 100%; }

2)为了文字设置样式,更加美观

.casousel-caption p{
 margin-bottom: 20px;
 font-size: 20px;
 line-height: 1.8;
 }

目前的效果如下

Bootstrap前端开发案例一

 咱们继续:(打码更新中。。。) 
第二部分更新了,在基于bootstrap的前端开发案例Demo(二) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

Javascript 相关文章推荐
document.compatMode介绍
May 21 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
js实现简单选项卡制作
Aug 05 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 #Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 #Javascript
基于JS实现导航条flash导航条
Jun 17 #Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 #Javascript
Javascript中的数组常用方法解析
Jun 17 #Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 #Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
用JQuery 实现的自定义对话框
2007/03/24 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Django Highcharts制作图表
2016/08/27 Python
python单例模式实例解析
2018/08/28 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
python实现动态数组的示例代码
2019/07/15 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
写出一个方法实现冒泡排序
2016/07/08 面试题
技术总监岗位职责
2013/12/05 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
社区义诊活动总结
2014/04/30 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
出国导师推荐信
2015/03/25 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers