编程 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 相关文章推荐

jQuery Selector选择器小结

May 06 Javascript

jquery 表格的增行删行实现思路

Mar 21 Javascript

GRID拖拽行的实例代码

Jul 18 Javascript

JavaScript中访问节点对象的方法有哪些如何使用

Sep 24 Javascript

javascript性能优化之DOM交互操作实例分析

Dec 12 Javascript

实例讲解JavaScript中的this指向错误解决方法

Jun 13 Javascript

jQuery实现对象转为url参数的方法

Jan 11 Javascript

jQuery实现页面倒计时并刷新效果

Mar 13 Javascript

微信小程序中吸底按钮适配iPhone X方案

Nov 29 Javascript

VueJs组件之父子通讯的方式

May 06 Javascript

js实现录音上传功能

Nov 22 Javascript

vue-cli设置publicPath小记

Apr 14 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

smarty实现多级分类的方法

2014/12/05 PHP

PHP 无限级分类

2017/05/04 PHP

php readfile下载大文件失败的解决方法

2017/05/22 PHP

PHP实现的下载远程文件类定义与用法示例

2017/07/05 PHP

使用js判断TextBox控件值改变然后出发事件

2014/03/07 Javascript

JS常用字符串处理方法应用总结

2014/05/22 Javascript

jQuery给多个不同元素添加class样式的方法

2015/03/26 Javascript

原生js制作简单的数字键盘

2015/04/24 Javascript

uploadify多文件上传参数设置技巧

2015/11/16 Javascript

js获取及判断键盘按键的方法

2015/12/01 Javascript

小白谈谈对JS原型链的理解

2016/05/03 Javascript

原生js仿jquery一些常用方法(必看篇)

2016/09/20 Javascript

学习使用bootstrap的modal和carousel

2016/12/09 Javascript

js实现省份下拉菜单效果

2017/02/15 Javascript

JS验证字符串功能

2017/02/22 Javascript

记一次webpack3升级webpack4的踩坑经历

2018/06/12 Javascript

vue实现文字横向无缝走马灯组件效果的实例代码

2019/04/09 Javascript

js中实现继承的五种方法

2021/01/25 Javascript

使用webpack和rollup打包组件库的方法

2021/02/25 Javascript

[01:03:36]Ti4 循环赛第三日DK vs Titan

2014/07/12 DOTA

[53:15]2018DOTA2亚洲邀请赛3月29日小组赛A组 KG VS OG

2018/03/30 DOTA

[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀

2018/04/06 DOTA

python实现bitmap数据结构详解

2014/02/17 Python

Python装饰器入门学习教程(九步学习)

2016/01/28 Python

Python 由字符串函数名得到对应的函数(实例讲解)

2017/08/10 Python

python实现任意位置文件分割的实例

2018/12/14 Python

教你如何编写、保存与运行Python程序的方法

2019/07/12 Python

pandas实现excel中的数据透视表和Vlookup函数功能代码

2020/02/14 Python

python+gdal+遥感图像拼接(mosaic)的实例

2020/03/10 Python

Amaze UI 文件选择域的示例代码

2020/08/26 HTML / CSS

国土资源局开展党的群众路线教育实践活动整改措施

2014/09/26 职场文书

简单的辞职信怎么写

2015/02/28 职场文书

大学生实习推荐信

2015/03/27 职场文书

运动会开幕式新闻稿

2015/07/17 职场文书

JavaScript异步操作中串行和并行

2021/11/20 Javascript

Golang获取List列表元素的四种方式

2022/04/20 Golang