编程 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 setTimeout和setInterval的使用方法说明

Mar 25 Javascript

jquery的extend和fn.extend的使用说明

Jan 09 Javascript

jQuery.position()方法获取不到值的安全替换方法

Mar 13 Javascript

详解JavaScript对象和数组

Dec 03 Javascript

基于Jquery和html5实现炫酷的3D焦点图动画

Mar 02 Javascript

js仿支付宝填写支付密码效果实现多方框输入密码

Mar 09 Javascript

JavaScript实现图片懒加载(Lazyload)

Nov 28 Javascript

jQuery判断邮箱格式对错实例代码讲解

Apr 12 jQuery

提高Node.js性能的应用技巧分享

Aug 10 Javascript

用React实现一个完整的TodoList的示例代码

Oct 30 Javascript

vue使用el-upload上传文件及Feign服务间传递文件的方法

Mar 15 Javascript

关于vue路由缓存清除在main.js中的设置

Nov 06 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 字符串加密函数(在指定时间内加密还原字符串，超时无法还原)

2010/04/28 PHP

ThinkPHP采用模块和操作分析

2011/04/18 PHP

解析如何屏蔽php中的phpinfo()函数

2013/06/06 PHP

php获取网页中图片、DIV内容的简单方法

2014/06/19 PHP

php+memcache实现的网站在线人数统计代码

2014/07/04 PHP

javascript 操作文件实现方法小结

2009/07/02 Javascript

!DOCTYPE声明对JavaScript的影响分析

2010/04/12 Javascript

使用POST方式弹出窗口的两种方法示例介绍

2014/01/29 Javascript

jQuery设置指定网页元素宽度和高度的方法

2015/03/25 Javascript

文字垂直滚动之javascript代码

2015/07/29 Javascript

jquery实现列表上下移动功能

2016/02/25 Javascript

在线引用最新jquery文件的实现方法

2016/08/26 Javascript

JS实现复制内容到剪贴板功能

2017/02/05 Javascript

微信扫码支付零云插件版实例详解

2017/04/26 Javascript

JavaScript累加、迭代、穷举、递归等常用算法实例小结

2018/05/08 Javascript

详解webpack打包nodejs项目(前端代码)

2018/09/19 NodeJs

js实现时分秒倒计时

2019/12/03 Javascript

Vue vm.$attrs使用场景详解

2020/03/08 Javascript

nuxt 实现在其它js文件中使用store的方式

2020/11/05 Javascript

[01:13]这，就是刀塔

2014/07/16 DOTA

[00:52]玛尔斯技能全介绍

2019/03/06 DOTA

python中获得当前目录和上级目录的实现方法

2017/10/12 Python

python2.7和NLTK安装详细教程

2018/09/19 Python

Python中的list与tuple集合区别解析

2019/10/12 Python

python计算二维矩形IOU实例

2020/01/18 Python

python实现一个猜拳游戏

2020/04/05 Python

Pycharm常用快捷键总结及配置方法

2020/11/14 Python

英国网上花店：Bunches

2016/11/29 全球购物

必须要使用游标的SQL语句有那些

2012/05/07 面试题

运动会广播稿100字

2014/01/11 职场文书

人力资源部经理的岗位职责

2014/03/04 职场文书

党员创先争优活动总结

2014/05/04 职场文书

教研处工作方案

2014/05/26 职场文书

党的群众路线剖析材料

2014/10/09 职场文书

小学教师先进事迹材料

2014/12/15 职场文书

CSS使用SVG实现动态分布的圆环发散路径动画

2022/12/24 HTML / CSS