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 相关文章推荐
JavaScript 学习技巧
Feb 17 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
three.js 入门案例详解
Jan 23 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python struct模块解析
2014/06/12 Python
python实现mean-shift聚类算法
2020/06/10 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Python 必须了解的5种高级特征
2020/09/10 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
员工年终演讲稿
2014/01/03 职场文书
创建青年文明号材料
2014/05/09 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
介绍信范文
2015/01/31 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏