编程 Javascript

BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

Posted in Javascript onDecember 01, 2016

bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位的个人总结，具体详情如下所示：

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*

下拉菜单

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

以上所述是小编给大家介绍的BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

- Author -

anfangw

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery.getScript加载同域JS的代码

Feb 13 Javascript

js+css实现文字散开重组动画特效代码分享

Aug 21 Javascript

Bootstrap和Java分页实例第一篇

Dec 23 Javascript

jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】

Mar 14 Javascript

Vue.js实战之Vuex的入门教程

Apr 01 Javascript

Angular中响应式表单的三种更新值方法详析

Aug 22 Javascript

BACKBONE.JS 简单入门范例

Oct 17 Javascript

微信小程序仿美团城市选择

Jun 06 Javascript

在vue+element ui框架里实现lodash的debounce防抖

Nov 13 Javascript

vue自定义树状结构图的实现方法

Oct 18 Javascript

JavaScript中Object、map、weakmap的区别分析

Dec 15 Javascript

JS数组的常用方法整理

Mar 31 Javascript

AngularJS中的JSONP实例解析

Dec 01 #Javascript

JavaScript交换两个变量值的七种解决方案

Dec 01 #Javascript

bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）

Dec 01 #Javascript

实例解析jQuery工具函数

Dec 01 #Javascript

Vue.js实现简单ToDoList 前期准备（一）

Dec 01 #Javascript

获取jqGrid中选择的行的数据

Nov 30 #Javascript

基于Vue.js实现简单搜索框

Mar 26 #Javascript

You might like

轻松修复Discuz!数据库

2008/05/03 PHP

php Smarty模板生成html文档的方法

2010/04/12 PHP

PHP中如何判断AJAX提交的数据

2012/02/05 PHP

php往mysql中批量插入数据实例教程

2018/12/12 PHP

JavaScript 学习笔记（六）

2009/12/31 Javascript

javascript 程序库的比较（一）之DOM功能

2010/04/07 Javascript

js给onclick事件赋值，动态传参数实例解说

2013/03/28 Javascript

jquery $("#variable") 循环改变variable的值示例

2014/02/23 Javascript

javascript写的异步加载js文件函数(支持数组传参)

2014/06/07 Javascript

黑帽seo劫持程序,js劫持搜索引擎代码

2015/09/15 Javascript

AngularJS内建服务$location及其功能详解

2016/07/01 Javascript

浅谈vue中数据双向绑定的实现原理

2017/09/14 Javascript

深入浅析AngularJs模版与v-bind

2018/07/06 Javascript

详解Next.js页面渲染的优化方案

2019/01/27 Javascript

vue elementUI使用tabs与导航栏联动

2019/06/21 Javascript

vue组件库的在线主题编辑器的实现思路

2020/04/03 Javascript

vue实现点击按钮切换背景颜色的示例代码

2020/06/23 Javascript

解决Vue @submit 提交后不刷新页面问题

2020/07/18 Javascript

[51:34]Ti4主赛事胜者组 DK vs EG 2

2014/07/19 DOTA

Python 爬虫多线程详解及实例代码

2016/10/08 Python

django 中使用DateTime常用的时间查询方式

2019/12/03 Python

python实现对变位词的判断方法

2020/04/05 Python

Django url 路由匹配过程详解

2021/01/22 Python

西班牙在线药店：DosFarma

2020/03/28 全球购物

西班牙Polo衫品牌：Polo Club

2020/08/09 全球购物

香港艺人陈冠希创办的潮流品牌：JUICESTORE

2021/03/04 全球购物

Linux的文件类型

2016/07/05 面试题

机电工程专业应届生求职信

2013/10/03 职场文书

车间主管岗位职责

2013/11/14 职场文书

幼儿园实习自我鉴定

2013/12/15 职场文书

财产保全担保书范文

2014/04/01 职场文书

2014国庆节餐厅促销活动策划方案

2014/09/16 职场文书

2014年公司工作总结

2014/11/22 职场文书

2015年小学二年级班主任工作总结

2015/05/21 职场文书

解决Django transaction进行事务管理踩过的坑

2021/04/24 Python

8个JS的reduce使用实例和reduce操作方式

2021/10/05 Javascript