编程 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插件-jRating评分插件源码分析及使用方法

Dec 28 Javascript

jquery时间下拉框小例子

Apr 15 Javascript

JavaScript中的关键字"VAR"使用详解分享

Jul 31 Javascript

JS关闭窗口或JS关闭页面的几种代码分享

Oct 25 Javascript

JavaScript编程的单例设计模讲解

Nov 10 Javascript

完美解决IE不支持Data.parse()的问题

Nov 24 Javascript

Javascript 制作图形验证码实例详解

Dec 22 Javascript

JavaScript利用fetch实现异步请求的方法实例

Jul 26 Javascript

微信小程序简单实现form表单获取输入数据功能示例

Nov 30 Javascript

Javascript网页抢红包外挂实现分享

Jan 11 Javascript

MVVM框架下实现分页功能示例

Jun 14 Javascript

vue 本地环境跨域请求proxyTable的方法

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

如何从一个php文件向另一个地址post数据，不用表单和隐藏的变量的

2007/03/06 PHP

php学习笔记之函数声明

2011/06/09 PHP

php中常量DIRECTORY_SEPARATOR用法深入分析

2014/11/14 PHP

PHP获取音频文件的相关信息

2015/06/22 PHP

PHP处理会话函数大总结

2015/08/05 PHP

PHP 实现等比压缩图片尺寸和大小实例代码

2016/10/08 PHP

Laravel学习教程之本地化模块

2017/08/18 PHP

PHP删除数组中指定下标的元素方法

2018/02/03 PHP

PHP PDO和消息队列的个人理解与应用实例分析

2019/11/25 PHP

JavaScript面向对象(极简主义法minimalist approach)

2012/07/17 Javascript

jquery插件开发之实现jquery手风琴功能分享

2014/03/10 Javascript

js 获取浏览器版本以此来调整CSS的样式

2014/06/03 Javascript

JavaScript中实现sprintf、printf函数

2015/01/27 Javascript

使用CamanJS在Web页面上处理图像的技巧

2015/08/18 Javascript

jQuery得到多个值只能用取Class ,不能用取ID的方法

2016/12/04 Javascript

你不知道的 javascript【推荐】

2017/01/08 Javascript

JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码

2017/09/07 Javascript

使用express+multer实现node中的图片上传功能

2018/02/02 Javascript

解决Mac安装thrift因bison报错的问题

2018/05/17 Javascript

JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】

2019/02/21 Javascript

vue.js实现左边导航切换右边内容

2019/10/21 Javascript

仿照Element-ui实现一个简易的$message方法

2020/09/14 Javascript

vue 数据双向绑定的实现方法

2021/03/04 Vue.js

Python写的PHPMyAdmin暴力破解工具代码

2014/08/06 Python

Python中文分词实现方法(安装pymmseg)

2016/06/14 Python

浅谈python类属性的访问、设置和删除方法

2016/07/25 Python

python方向键控制上下左右代码

2018/01/20 Python

python学习开发mock接口

2019/04/28 Python

十分钟搞定pandas(入门教程)

2019/06/21 Python

英国设计师泳装、沙滩装和比基尼在线精品店：Beach Cafe

2019/08/28 全球购物

党员服务承诺书

2014/05/28 职场文书

热情服务标语

2014/10/07 职场文书

教师党的群众路线学习心得体会

2014/11/04 职场文书

简历自我评价：教师师德表现自我评价

2019/04/24 职场文书

入团申请书格式

2019/06/20 职场文书

Python自动化工具之实现Excel转Markdown表格

2022/04/08 Python