编程 Javascript

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图片轮播

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

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

- Author -

anfangw

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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 数码科技