首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
intro.js 页面引导简单用法 分享
Aug 06 Javascript
javascript中if和switch，==和===详解
Jul 30 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
JavaScript类的写法
Sep 17 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
基于vue手写tree插件的那点事儿
Aug 20 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
filter(1) Selenium(1) openEuler(1) EditText(1) TextInputLayout(1) Tsmoothie(1) SQLite3(1) reduce(2) dockerfile(1) Django(9)
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
在线竞拍系统的PHP实现框架（一）
2006/10/09 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
js 判断上传文件大小及格式代码
2013/11/13 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
Python显示进度条的方法
2014/09/20 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python清理子进程机制剖析
2017/11/23 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
基于树莓派的语音对话机器人
2019/06/17 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
JD Sports荷兰：英国领先的运动时尚零售商
2020/03/13 全球购物
Abbott Lyon官网：女士手表、珠宝及配件
2020/12/26 全球购物
Ruby如何定义一个类
2012/10/08 面试题
酒店收银员岗位职责
2015/04/07 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Nginx隐藏式跳转（浏览器URL跳转后保持不变）
2022/04/07 Servers