首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
JavaScript插件化开发教程 （二）
Jan 27 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
实例解析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
德劲(5) 灵敏度(1) TOSHIBA(1) 手调机(1) ICF-7600(1) 频率(1) RP-F11(1) 东芝(1) 数调机(1) 高放电路(1)
You might like
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP curl使用实例
2015/07/02 PHP
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
js单例模式的两种方案
2013/10/22 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
vue使用watch 观察路由变化，重新获取内容
2017/03/08 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
想学python 这5本书籍你必看！
2018/12/11 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Merrell美国官网：美国登山运动鞋品牌
2018/02/07 全球购物
Expedia韩国官网：亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
精选奢华：THE LIST
2019/09/05 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店：Eros Digital Home
2020/08/09 全球购物
自荐信模版
2013/10/24 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2014年宣传工作总结
2014/11/18 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python