bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)


Posted in Javascript onDecember 01, 2016

本文算是bootstrap学习使用的年底大总结,供大家参考,具体内容如下

bootstrap框架

BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。

<!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"><!-- 浏览器缩放 -->
 <title>Bootstrap</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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

 </head>
 <body>
 <h1>你好</h1>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

导航

导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。

<nav class="nabber navbar-default" role="navigation"><!--导航条、默认样式、role定义内容是一个导航条-->
 <div class="container-fluid"><!--container居中固定宽度、c-f自适应大小的导航条-->
 <div class="navbar-header">

 <!--在响应式浏览器宽度小于一定值时,显示按钮-->
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>

 <!--logo图标-->
 <a class="navbar-brand" href="#">Brand</a>

 </div>

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--包裹代码,在宽度大于一定值时,button和此代码是没有作用的-->

 <!--导航条导航项目-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">a</a></li>
 <li><a href="#">a</a></li>
 </ul>
 </div>
 </div>
</nav>
 .navbar-inverse:改变导航条的背景颜色
 .container:居中显示
 固定导航条会遮盖页面内容,解决办法设置body的*padding-top*

下拉菜单

小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件。

<li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu">
 <li><a href="#">Action</a></li>
 <li><a href="#">Another action</a></li>
 <li><a href="#">Something else</a></li>
 <li class="divider"></li>
 <li><a href="#">linkkk/a></li>
 </ul>
</li>

    data属性API可以使用所有的Bootstrap插件

轮播广告(carousel)

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

 <!--底部导航点。。。-->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0"></li>
 <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!--轮播广告内容-->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <img src="…">
 <div class="carousel-caption">……</div>
 </div>
 <div class="item active">
 <img src="…">
 <div class="carousel-caption">……</div>
 </div>
 </div>

 <!--左右箭头-->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 <pan class="sr-only">previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 <pan class="sr-only">Next</span>
 </a>
</div>

    .data-slide-to索引,指向轮播广告的内容,从0开始
    .carousel设置广告框的样式(高度、背景色)
    .carousel .item设置广告框的样式(高度、背景色)
栅格系统布局

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4">.col-md-4</div>
 </div>
</div>

标签页tabs

<!--标签-->
<ul class="nav nav-tabs" role="tablist">
 <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
 <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
 <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!--标签的内容-->
<div class="tab-content">
 <div class="tab-pane active" id="home">…</div>
 <div class="tab-pane" id="profile">…</div>
 <div class="tab-pane" id="messages">…</div>
 <div class="tab-pane" id="settings">…</div>
</div>

标签页tabs

<div class="modal fade">
 <div class="modal-dialog">
 <div class="content">

 <!--标签头部-->
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">
 <span aria-hidden="true">×</span>
 <span class="sr-only">Close</span>
 <h4 class="modal-title">Modal title</h4>
 </button>
 </div>

 <!--标签体-->
 <div class="modal-body">
 …
 </div>

 <!--标签底部-->
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
 </div>

 </div>
 </div>
</div>

如果大家还想深入学习,可以点击这里 进行学习,再为大家附3个精彩的专题:

精彩专题分享:jQuery图片轮播 JavaScript图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的可多选的下拉列表框
Jul 20 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
vue配置接口域名方法总结
May 12 Javascript
实例解析jQuery工具函数
Dec 01 #Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 #Javascript
获取jqGrid中选择的行的数据
Nov 30 #Javascript
基于Vue.js实现简单搜索框
Mar 26 #Javascript
深入理解jQuery.data() 的实现方式
Nov 30 #Javascript
利用vue-router实现二级菜单内容转换
Nov 30 #Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 #Javascript
You might like
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
javascript运动详解
2015/07/06 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
通过实例解析python and和or使用方法
2020/11/14 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
期中考试后的感想
2015/08/07 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技