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

简单的无缝滚动程序-仅几行代码

May 08 Javascript

文本框的字数限制功能jquery插件

Nov 24 Javascript

轻松掌握jQuery中wrap()与unwrap()函数的用法

May 24 Javascript

jQuery与JS加载事件用法分析

Sep 04 Javascript

微信小程序实战之运维小项目

Jan 17 Javascript

JQuery Dialog对话框不能通过Esc关闭的原因分析及解决办法

Jan 18 Javascript

微信小程序五星评价功能的实现

Mar 09 Javascript

vue中实现methods一个方法调用另外一个方法

Feb 08 Javascript

Vue之Vue.set动态新增对象属性方法

Feb 23 Javascript

vue 实现强制类型转换数字类型转为字符串

Nov 07 Javascript

解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

Feb 09 Javascript

详细聊聊浏览器是如何看闭包的

Nov 11 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

《星际争霸2》终章已出 RTS时代宣告终结

2017/02/07 星际争霸

单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)

2012/07/31 PHP

php cc攻击代码与防范方法

2012/10/18 PHP

php使用substr()和strpos()联合查找字符串中某一特定字符的方法

2015/05/12 PHP

一个简单的php MVC留言本实例代码(必看篇)

2016/09/22 PHP

Thinkphp框架表单自动验证登录注册 ajax自动验证登录注册

2016/12/27 PHP

一个封装js代码-----展开收起效果示例

2013/07/03 Javascript

用JS做的简单的可折叠的两级树形菜单

2013/09/21 Javascript

jQuery实现统计输入文字个数的方法

2015/03/11 Javascript

js实现div拖动动画运行轨迹效果代码分享

2015/08/27 Javascript

深入理解JavaScript程序中内存泄漏

2016/03/17 Javascript

超全面的vue.js使用总结

2017/02/12 Javascript

微信小程序开发MAP（地图）实例详解

2017/06/27 Javascript

JS实现移动端触屏拖拽功能

2018/07/31 Javascript

Angular ElementRef简介及其使用

2018/10/01 Javascript

angular6 利用 ngContentOutlet 实现组件位置交换(重排)

2018/11/02 Javascript

vue-router实现编程式导航的代码实例

2019/01/19 Javascript

JavaScrip如果基于url实现图片下载

2020/07/03 Javascript

使用python调用zxing库生成二维码图片详解

2017/01/10 Python

Python 用Redis简单实现分布式爬虫的方法

2017/11/23 Python

使用python编写udp协议的ping程序方法

2018/04/22 Python

python将一个英文语句以单词为单位逆序排放的方法

2018/12/20 Python

Django 内置权限扩展案例详解

2019/03/04 Python

Python中format()格式输出全解

2019/04/12 Python

利用Python检测URL状态

2019/07/31 Python

django model通过字典更新数据实例

2020/04/01 Python

Python用5行代码实现批量抠图的示例代码

2020/04/14 Python

日本无添加化妆品：HABA

2016/08/18 全球购物

Expedia英国：全球最大的在线旅游公司

2017/09/07 全球购物

生产经理的自我评价分享

2013/11/07 职场文书

企业年度评优方案

2014/06/02 职场文书

物业公司的岗位任命书

2014/06/06 职场文书

责任书范本

2014/08/25 职场文书

关于空气污染危害的感想

2015/08/11 职场文书

nginx内存池源码解析

2021/11/20 Servers

Python first-order-model实现让照片动起来

2022/06/25 Python