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

24款非常有用的 jQuery 插件分享

Apr 06 Javascript

JQuery的AJAX实现文件下载的小例子

May 15 Javascript

原生javascript实现图片滚动、延时加载功能

Jan 12 Javascript

JavaScript简单实现弹出拖拽窗口（一）

Jun 17 Javascript

JS及PHP代码编写八大排序算法

Jul 12 Javascript

Angularjs的键盘事件的绑定

Jul 27 Javascript

jQuery:unbind方法的使用详解

Aug 14 jQuery

基于three.js编写的一个项目类示例代码

Jan 05 Javascript

JS实现的透明度渐变动画效果示例

Apr 28 Javascript

JavaScript引用类型RegExp基本用法详解

Aug 09 Javascript

微信小程序上传多图到服务器并获取返回的路径

May 05 Javascript

javascript设计模式 ? 模板方法模式原理与用法实例分析

Apr 23 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

攻克CakePHP系列三表单数据增删改

2008/10/22 PHP

完美解决PHP中文乱码

2009/11/26 PHP

javascript不同页面传值的改进版

2008/09/30 Javascript

Jquery 基础学习笔记

2009/05/29 Javascript

通过Jquery遍历Json的两种数据结构的实现代码

2011/01/19 Javascript

jQuery+css实现图片滚动效果(附源码)

2013/03/18 Javascript

关于JavaScript与HTML的交互事件

2013/04/12 Javascript

在JavaScript中实现类的方式探讨

2013/08/28 Javascript

window.showModalDialog()返回值的学习心得总结

2014/01/07 Javascript

JavaScript监听和禁用浏览器回车事件实例

2015/01/31 Javascript

js实现照片墙功能实例

2015/02/05 Javascript

深入理解JavaScript中的对象复制(Object Clone)

2016/05/18 Javascript

jquery获取复选框的值的简单实例

2016/05/26 Javascript

全面解析Bootstrap中tooltip、popover的使用方法

2016/06/13 Javascript

jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】

2017/03/09 Javascript

js判断传入时间和当前时间大小实例(超简单)

2018/01/11 Javascript

Vue的事件响应式进度条组件实例详解

2018/02/04 Javascript

一步一步的了解webpack4的splitChunk插件(小结)

2018/09/17 Javascript

nodejs制作小爬虫功能示例

2020/02/24 NodeJs

vue print.js打印支持Echarts图表操作

2020/11/13 Javascript

python通过索引遍历列表的方法

2015/05/04 Python

Python使用内置json模块解析json格式数据的方法

2017/07/20 Python

pandas 数据实现行间计算的方法

2018/06/08 Python

python经典趣味24点游戏程序设计

2019/07/26 Python

python PyQt5/Pyside2 按钮右击菜单实例代码

2019/08/17 Python

selenium+python配置chrome浏览器的选项的实现

2020/03/18 Python

python3中布局背景颜色代码分析

2020/12/01 Python

css3如何绘制一个圆圆的loading转圈动画

2018/01/09 HTML / CSS

Ego Shoes官网：英国时髦鞋类品牌

2020/10/19 全球购物

俄罗斯运动、健康和美容产品在线商店：Lactomin.ru

2020/07/23 全球购物

海量信息软件测试笔试题

2015/08/08 面试题

实习生自荐信范文分享

2013/11/27 职场文书

心得体会开头

2014/01/01 职场文书

军校本科大学生自我评价

2014/01/14 职场文书

2014基建处领导班子“四风”对照检查材料思想汇报

2014/10/04 职场文书

机关干部三严三实心得体会

2014/10/13 职场文书