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 相关文章推荐
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 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封装分页函数实现文本分页和数字分页
2014/10/23 PHP
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JavaScript DOM操作表格及样式
2015/04/13 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python中property属性实例解析
2018/02/10 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
Django框架表单操作实例分析
2019/11/04 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Python中的全局变量如何理解
2020/06/04 Python
小结Python的反射机制
2020/09/28 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
最热门的自我评价
2013/12/30 职场文书
社区工作者先进事迹
2014/01/18 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
股东合作协议书
2014/09/12 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
毕业实习单位意见
2015/06/04 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技