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

JS简单操作select和dropdownlist实例

Nov 26 Javascript

DOM基础教程之事件对象

Jan 20 Javascript

原生JS实现响应式瀑布流布局

Apr 02 Javascript

jquery判断对象是否为空并遍历对象的简单实例

Jul 26 Javascript

详解JS几种变量交换方式以及性能分析对比

Nov 25 Javascript

Angular.Js之Scope作用域的学习教程

Apr 27 Javascript

基于VUE选择上传图片并页面显示（图片可删除）

May 25 Javascript

纯JS实现只能输入数字的简单代码

Jun 21 Javascript

浅析前端路由简介以及vue-router实现原理

Jun 01 Javascript

详解webpack打包后如何调试的方法步骤

Nov 07 Javascript

Vue开发之watch监听数组、对象、变量操作分析

Apr 25 Javascript

Node.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

德生PL990的分析评价

2021/03/02 无线电

php判断电脑访问、手机访问的例子

2014/05/10 PHP

php实现的替换敏感字符串类实例

2014/09/22 PHP

php递归json类实例

2014/12/02 PHP

php与Mysql的一些简单的操作

2015/02/26 PHP

学习php设计模式 php实现模板方法模式

2015/12/08 PHP

FileUpload上传图片(图片不变形)

2010/08/05 Javascript

jQuery中wrapAll()方法用法实例

2015/01/16 Javascript

JQuery标签页效果的两个实例讲解（4）

2015/09/17 Javascript

Bootstrap与KnockoutJs相结合实现分页效果实例详解

2016/05/03 Javascript

BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

2016/06/13 Javascript

Bootstrap3制作搜索框样式的方法

2016/07/11 Javascript

jQuery Ajax使用FormData对象上传文件的方法

2016/09/07 Javascript

js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换

2016/12/06 Javascript

完美解决input[type=number]无法显示非数字字符的问题

2017/02/28 Javascript

JavaScript实现获取远程的html到当前页面中

2017/03/26 Javascript

浅谈箭头函数写法在ReactJs中的使用

2017/08/22 Javascript

关于ES6箭头函数中的this问题

2018/02/27 Javascript

解决iView中时间控件选择的时间总是少一天的问题

2018/03/15 Javascript

node.js中ws模块创建服务端和客户端,网页WebSocket客户端

2019/03/06 Javascript

Vue+Java 通过websocket实现服务器与客户端双向通信操作

2020/09/22 Javascript

[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局

2016/02/27 DOTA

python使用beautifulsoup从爱奇艺网抓取视频播放

2014/01/23 Python

把MySQL表结构映射为Python中的对象的教程

2015/04/07 Python

wxPython的安装图文教程(Windows)

2017/12/28 Python

python实现决策树、随机森林的简单原理

2018/03/26 Python

Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】

2018/12/24 Python

在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例

2019/01/29 Python

python遍历文件目录、批量处理同类文件

2019/08/31 Python

南非领先的在线旅行社：Travelstart南非

2016/09/04 全球购物

时尚、社区、科技：SEVENSTORE

2019/04/26 全球购物

Web Service面试题：如何搭建Axis2的开发环境

2012/06/20 面试题

中文专业毕业生自荐信

2013/10/28 职场文书

经济管理专业毕业生自荐信范文

2014/01/02 职场文书

电子信息工程专业推荐信

2014/02/14 职场文书

python中super()函数的理解与基本使用

2021/08/30 Python