Bootstrap前端开发案例一

现在很多公司开发中都在使用bootstrap这个框架，bootstrap是Twitter公司的一个团队的作品，大大简化了我们的前端的开发。（后面会总结一些less的使用）
学习使用API我建议直接查看官网的API，地址：http://www.bootcss.com/
下面是部分目标效果图：

下面我就总结一个小Demo中的技巧和原理：
第一步、http://www.bootcss.com/下载bootstrap的压缩包，新建index.html,使用sublime或其它编辑器打开index页面，解压后目录是

第二步、拷贝官网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="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://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="https://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的前端开发案例Demo（二）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

赞 (0)

相关推荐

  • JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解

    在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部

  • WEB前端开发框架Bootstrap3 VS Foundation5

    开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么. Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一件事: ZURB 和 Twitter 的两种设计理念是很清楚的, 从他们对自己的框架的命名就可以看出来: Bootstrap 有引导, 开机自举的意思, 换言之, 它尝试处理你项目中一切所需要的. 而 Foundation 有创建, 创造的意思, 换言之, 它仅仅给你项目中强有力的创造力. 保持这种

  • Bootstrap开发实战之第一次接触Bootstrap

    本文我们主要了解一下 Boostrap 历史.特点.用途,以及为什么选择 Boostrap 来开发我们的 Web 项目. 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁.视觉优美,可用于快速.简单地构建基于 PC

  • Bootstrap树形控件使用方法详解

    Bootstrap树形控件使用方法详解

    一.JQuery树形控件 Jquery树形控件是一款基于JQuery+bootstrap.完全通过js和样式手写出来的非常轻量级的控件,网上很多地方都能看到它的影子.它功能简单.用户体验不错.对于一些简单的层级关系展示比较实用,但对于节点的增删改实现起来就不容易了,如果非要做,可能需要自己去封装. 1.一睹初容 全部收起 展开一级 全部展开 2.代码示例 此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可. <link href="~/Content/Tree1/

  • Bootstrap前端开发案例二

    Bootstrap前端开发案例二

    我接着前面的一篇布局接着写,前一篇我已经完成了导航条和广告的布局. 开始继续码起来: 我想最终实现的效果图是这样的,如下:分了三个页面截图,太大了: 接着上次的未完成的,继续码起来: 第五步.增加栅格系统,我选择了三列的布局col-md-4;满格是12,4是12的三分之一,还可以响应式布局,设置多个栅格: <div class="container" id="tag_container"> <div class="row">

  • Bootstrap开发实战之响应式轮播图

    本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下 一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"

  • JS组件Bootstrap实现弹出框和提示框效果代码

    JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • JS组件Bootstrap Table使用方法详解

    JS组件Bootstrap Table使用方法详解

    最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.BootStrap table简单介绍 bootStra

  • Bootstrap每天必学之前端开发框架

    Bootstrap每天必学之前端开发框架

    BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢.本文总结了Bootstrap之所以广泛流传的11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.小编也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习. bootstrap深受广大屌丝喜爱的原因到底是什

  • JS表格组件神器bootstrap table详解（基础版）

    JS表格组件神器bootstrap table详解（基础版）

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

随机推荐