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

JavaScript表达式:URL 协议介绍

Mar 10 Javascript

javascript 手动给表增加数据的小例子

Jul 10 Javascript

JS代码同步文本框内容的实例方法

Jul 12 Javascript

js 获取radio按钮值的实例

Aug 17 Javascript

JS实现让网页背景图片斜向移动的方法

Feb 25 Javascript

javascript随机抽取0-100之间不重复的10个数

Feb 25 Javascript

php 解压zip压缩包内容到指定目录的实例

Jan 23 Javascript

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

Feb 08 Javascript

JS实现DOM删除节点操作示例

Apr 04 Javascript

vue2.0 自定义组件的方法（vue组件的封装）

Jun 05 Javascript

Vue多系统切换实现方案

Jun 05 Javascript

解决 viewer.js 动态更新图片导致无法预览的问题

May 14 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

《魔兽争霸3：重制版》翻车了？你想要的我们都没有

2019/11/07 魔兽争霸

PHP编程最快明白(第一讲软件环境和准备工作）

2010/10/25 PHP

PHP中date与gmdate的区别及默认时区设置

2014/05/12 PHP

PHP判断网络文件是否存在的方法

2015/03/12 PHP

十分钟打造AutoComplete自动完成效果代码

2009/12/26 Javascript

js实现交换运动效果的方法

2015/04/10 Javascript

javascript实现汉字转拼音代码分享

2015/04/20 Javascript

jQuery实现的精美平滑二级下拉菜单效果代码

2016/03/28 Javascript

jQuery Easyui Tabs扩展根据自定义属性打开页签

2016/08/15 Javascript

微信公众号-获取用户信息（网页授权获取）实现步骤

2016/10/21 Javascript

解决低版本的浏览器不支持es6的import问题

2018/03/09 Javascript

微信小程序实现日历功能

2018/11/27 Javascript

微信小程序之侧边栏滑动实现过程解析（附完整源码）

2019/08/23 Javascript

Angular6使用forRoot() 注册单一实例服务问题

2019/08/27 Javascript

vue中 this.$set的用法详解

2019/09/06 Javascript

jQuery与原生JavaScript选择HTML元素集合用法对比分析

2019/11/26 jQuery

Vue 实现显示/隐藏层的思路（加全局点击事件）

2019/12/31 Javascript

jQuery Datatables 动态列+跨列合并实现代码

2020/01/30 jQuery

Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明

2020/08/05 Javascript

PHP 502bad gateway原因及解决方案

2020/11/13 Javascript

详解Python中的join()函数的用法

2015/04/07 Python

用Python实现换行符转换的脚本的教程

2015/04/16 Python

Python正则简单实例分析

2017/03/21 Python

Python文本特征抽取与向量化算法学习

2017/12/22 Python

python模块smtplib实现纯文本邮件发送功能

2018/05/22 Python

Python pygorithm模块用法示例【常见算法测试】

2018/08/16 Python

python实现字符串和字典的转换

2018/09/29 Python

Python django框架输入汉字，数字，字符生成二维码实现详解

2019/09/24 Python

python实现简单图书管理系统

2019/11/22 Python

Python3 webservice接口测试代码详解

2020/06/23 Python

台湾旅游网站：雄狮旅游网

2017/08/16 全球购物

Vivo俄罗斯官方在线商店：中国智能手机品牌

2019/10/04 全球购物

在校大学生的职业生涯规划书

2014/03/14 职场文书

诉讼授权委托书

2014/10/15 职场文书

python实现web邮箱扫描的示例(附源码)

2021/03/30 Python

在项目中使用redis做缓存的一些思路

2021/09/14 Redis