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

使用Microsoft Ajax Minifier减小JavaScript文件大小的方法

Apr 01 Javascript

分享几个超级震憾的图片特效

Jan 08 Javascript

学习从实践开始之jQuery插件开发菜单插件开发

May 03 Javascript

利用谷歌地图API获取点与点的距离的js代码

Oct 11 Javascript

JS特殊函数(Function()构造函数、函数直接量)区别介绍

May 19 Javascript

jquery中的常用事件bind、hover、toggle等示例介绍

Jul 21 Javascript

jQuery实现进度条效果代码

Dec 17 Javascript

jQuery Easyui学习之datagrid 动态添加、移除editor

Jan 27 Javascript

半个小时学json(json传递示例)

Dec 25 Javascript

Vue + Webpack + Vue-loader学习教程之功能介绍篇

Mar 14 Javascript

Javascript中this关键字指向问题的测试与详解

Aug 11 Javascript

jQuery插件实现非常实用的tab栏切换功能【案例】

Feb 18 jQuery

实例解析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

一个用于MySQL的PHP XML类

2006/10/09 PHP

写php分页时出现的Fatal error的解决方法

2011/04/18 PHP

使用PHP计算两个路径的相对路径

2013/06/14 PHP

php函数实现判断是否移动端访问

2015/03/03 PHP

PHP异常处理定义与使用方法分析

2017/07/25 PHP

简单通用的JS滑动门代码

2008/12/19 Javascript

自己的js工具_Form 封装

2009/08/21 Javascript

IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点

2009/12/27 Javascript

CSS+jQuery实现的一个放大缩小动画效果

2013/09/24 Javascript

Javascript操作URL函数修改版

2013/11/07 Javascript

js实现ifram取父窗口URL地址的方法

2015/02/09 Javascript

使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目

2016/02/15 Javascript

浅谈JSON.stringify()和JOSN.parse()方法的不同

2016/08/29 Javascript

Vuex2.0+Vue2.0构建备忘录应用实践

2016/11/30 Javascript

AngularJS通过ng-route实现基本的路由功能实例详解

2016/12/13 Javascript

基于jQuery实现选项卡效果

2017/01/04 Javascript

BootStrap实现鼠标悬停下拉列表功能

2017/02/17 Javascript

js清除浏览器缓存的几种方法

2017/03/15 Javascript

Avalonjs双向数据绑定与监听的实例代码

2017/06/23 Javascript

基于BootStrap的文本编辑器组件Summernote

2017/10/27 Javascript

自定义Vue中的v-module双向绑定的实现

2019/04/17 Javascript

js对象数组和对象的使用实例详解

2019/08/27 Javascript

JS开发自己的类库实例分析

2019/08/28 Javascript

vue中移动端调取本地的复制的文本方式

2020/07/18 Javascript

[04:09]2014DOTA2国际邀请赛Ti西雅图历届冠军相继出局 BBC综述今日比赛

2014/07/20 DOTA

python ---lambda匿名函数介绍

2019/03/13 Python

使用python-opencv读取视频,计算视频总帧数及FPS的实现

2019/12/10 Python

django之从html页面表单获取输入的数据实例

2020/03/16 Python

Python‘==‘ 及 ‘is‘相关原理解析

2020/09/05 Python

python爬虫构建代理ip池抓取数据库的示例代码

2020/09/22 Python

对于没有初始化的变量的初始值可以作怎样的假定

2014/10/12 面试题

会计工作决心书

2014/03/11 职场文书

综合办公室主任岗位职责

2014/04/13 职场文书

《长城和运河》教学反思

2014/04/14 职场文书

基于Redis过期事件实现订单超时取消

2021/05/08 Redis

win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法

2023/01/09 数码科技