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、模态框、菜单定位),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
Node.js文件操作详解
Aug 16 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
PHP实现的json类实例
2015/07/28 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
jquery 插件开发备注
2010/08/27 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
axios简单实现小程序延时loading指示
2018/07/30 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python模块WSGI使用详解
2018/02/02 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
利用python绘制正态分布曲线
2021/01/04 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
调解协议书
2014/04/16 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
建筑横幅标语
2014/10/09 职场文书
信访工作汇报材料
2014/10/27 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电