首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
javascript的事件描述
Sep 08 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
jQuery 1.9.1源码分析系列（十四）之常用jQuery工具
Dec 02 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
微信小程序生成二维码的示例代码
Mar 29 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
RTMP(1) 双向链表(6) 区块链(2) TypeScript(2) NumPy(2) 模拟登录(1) text-shadow(1) keeplive_timeout(1) 单向链表(1) location(2)
You might like
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php跨服务器访问方法小结
2015/05/12 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
javascript学习笔记（一）基础知识
2014/09/30 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
win系统下nodejs环境安装配置
2017/05/04 NodeJs
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
客服专员岗位职责范本
2013/11/29 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
物业消防安全责任书
2014/07/23 职场文书
营销经理工作检讨书
2014/11/03 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
聘用合同范本
2015/09/21 职场文书
如何计划开一家便利店？
2019/07/31 职场文书