编程 Javascript

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学习教程

Bootstrap前端开发案例一

- Author -

rongyux

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 语言的递归编程

May 18 Javascript

无缝滚动改进版支持上下左右滚动（封装成函数）

Dec 04 Javascript

关于jQuery $.isNumeric vs. $.isNaN vs. isNaN

Apr 15 Javascript

用IE重起计算机或者关机的示例代码

Mar 10 Javascript

jquery trigger函数执行两次的解决方法

Feb 29 Javascript

javascript基本数据类型和转换

Mar 17 Javascript

Ext JS 实现建议词模糊动态搜索功能

May 13 Javascript

日期时间范围选择插件:daterangepicker使用总结(必看篇)

Sep 14 Javascript

打字效果动画的4种实现方法(超简单)

Oct 18 Javascript

vue项目中使用Svg的方法

Oct 24 Javascript

Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

Sep 01 Javascript

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

Sep 12 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

利用static实现表格的颜色隔行显示

2006/10/09 PHP

基于Jquery插件开发之图片放大镜效果(仿淘宝)

2011/11/19 Javascript

用示例说明filter()与find()的用法以及children()与find()的区别分析

2013/04/26 Javascript

eclipse导入jquery包后报错的解决方法

2014/02/17 Javascript

DIV始终居中的js代码

2014/02/17 Javascript

使用js操作css实现js改变背景图片示例

2014/03/10 Javascript

jquery的attr方法禁用表单元素禁用输入内容

2014/06/23 Javascript

javascript实现滑动解锁功能

2014/12/31 Javascript

js实现适用于素材网站的黑色多级菜单导航条效果

2015/08/24 Javascript

js检查是否关闭浏览器的方法

2016/08/02 Javascript

AngularJS service之select下拉菜单效果

2017/07/28 Javascript

微信小程序使用video组件播放视频功能示例【附源码下载】

2017/12/08 Javascript

iview实现图片上传功能

2020/06/29 Javascript

[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况

2014/07/14 DOTA

python实现代码行数统计示例分享

2014/02/10 Python

低版本中Python除法运算小技巧

2015/04/05 Python

python读取文件名称生成list的方法

2018/04/27 Python

对python同一个文件夹里面不同.py文件的交叉引用方法详解

2018/12/15 Python

Python实现繁?转为简体的方法示例

2018/12/18 Python

详解python执行shell脚本创建用户及相关操作

2019/04/11 Python

python实现在函数中修改变量值的方法

2019/07/16 Python

详解用Python为直方图绘制拟合曲线的两种方法

2019/08/21 Python

分享PyCharm的几个使用技巧

2019/11/10 Python

如何查看Django ORM执行的SQL语句的实现

2020/04/20 Python

韩国女装NO.1网店：STYLENANDA

2016/09/16 全球购物

党校培训自我鉴定

2014/02/01 职场文书

学生干部学习的自我评价

2014/02/18 职场文书

行政助理工作职责范本

2014/03/04 职场文书

文艺晚会主持词

2014/03/24 职场文书

党的群众路线教育实践活动通讯稿

2014/09/10 职场文书

村当支部个人对照检查材料思想汇报

2014/10/06 职场文书

房屋授权无偿使用证明

2014/11/29 职场文书

倡议书作文

2015/01/19 职场文书

刑事附带民事起诉状

2015/05/19 职场文书

教你如何使用Python下载B站视频的详细教程

2021/04/29 Python

Python面向对象之内置函数相关知识总结

2021/06/24 Python