首页
所有分类
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 相关文章推荐
IE下使用cloneNode注意事项分享
Nov 22 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
jquery实现弹出层效果实例
May 19 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 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
数据表(1) SSH(3) 时钟(1) mysql(6) OVERLORD(1) Vscode(3) character(1) 2022年7月新番(1) 字符集(1) data(4)
You might like
php 操作数组（合并，拆分，追加，查找，删除等）
2012/07/20 PHP
php中cookie的使用方法
2014/03/29 PHP
详解php比较操作符的安全问题
2015/12/03 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Python中 Lambda表达式全面解析
2016/11/28 Python
python机器学习理论与实战（一）K近邻法
2021/01/28 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python小项目之五子棋游戏
2019/12/26 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
在校生自我鉴定
2014/01/23 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
对教师的评语
2014/04/28 职场文书
爱国主义电影观后感
2015/06/18 职场文书
围城读书笔记
2015/06/26 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js