bootstrap怎么调用addtabs

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

运动一圈
2016-07-01 · TA获得超过949个赞

知道大有可为答主

回答量：964

采纳率：92%

帮助的人：492万

我也去答题访问个人页

关注

展开全部

1.布局

Bootstrap框架的布局采用了栅格系统，默认情况下把页面分为12列。
在使用时只要在div的class属性中赋予适合的类即可。举例如下：

<div class="row">
<div class="col-sm-4 col-xs-12">
<h2 class="page-header">简介</h2>
</div>
<div>

在最外层套一个的<div class="row">作为一行。在里面添加<div class="col-sm-4 col-xs-12" >
col-sm-4 中的sm代表small，在宽度为750px以上时占用4列；
col-xs-12 中的xs在宽度按小于750px时占用12列（即满屏显示）

一般情况下，只需填写两个即可满足响应式网页的需求。
另外可以使用class="col-sm-4 hidden-xs" ，即在小于750px时隐藏元素。

参考资料：http://v3.bootcss.com/css/#grid

2. 导航条
Bootstrap框架预置了一个方便易用的导航栏，没有太多值得记录的，直接看参考资料即可掌握。

<header class="navbar navbar-inverse navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:scroll(0,0)">Maruko Toolbox</a>
</div>
<nav class="collapse navbar-collapse" id="example-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">HOME</a>
</li>
<li>
<a href="history.html">HISTORY</a>
</li>
<li>
<a href="developer.html">DEVELOPER</a>
</li>
<li class="dropdown">
<a href="tutorial.html" class="dropdown-toggle" data-toggle="dropdown">
TUTORIAL <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a target="_blank" href="http://www.bilibili.com/video/av1242020">VIDEO</a>
</li>
<li class="divider"></li>
<li>
<a target="_blank" href="http://cnbeining.com/?p=289">FAQ</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>

参考资料：http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html

3. Bootstrap 滚动监听（Scrollspy）插件以及Bootstrap 附加导航（Affix）插件

结合两者可以实现滚动页面时导航栏变换焦点
范例页面 http://v3.bootcss.com/css/

<div id="myScrollspy" class="col-sm-4 hidden-xs">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="140" role="tablist">
<li class="active"><a href="#r20140601">2014-06-01</a></li>
<li><a href="#r20140321">2014-03-21</a></li>
<li><a href="#r20140129">2014-01-29</a></li>
<li><a href="#r20131125">2013-11-25</a></li>
<li><a href="#r20130727">2013-07-27</a></li>
<li><a href="#r20130214">2013-02-14</a></li>
<li><a href="#r20121017">2012-10-17</a></li>
<li><a href="#r20120615">2012-06-15</a></li>
<li><a href="#r20120327">2012-03-27</a></li>
<li><a href="#r20120129">2012-01-29</a></li>
<li><a href="#r20110826">2011-08-26</a></li>
<li><a href="#r20110725">2011-07-25</a></li>
</ul>
</div>

1）通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。
然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。
为了它能正常工作，必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
<body data-spy="scroll" data-target="#myScrollspy">

2）设置当滚动条下滑140个像素以后切换ul.nav-pills.affix 状态。
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="140" role="tablist">

3）设置当滚动条下滑140个像素以后在页面固定（fixed) 的位置。

ul.nav-pills.affix{
top: 43px; /* Set the top position of pinned element */
}

参考资料：
http://www.w3cschool.cc/bootstrap/bootstrap-scrollspy-plugin.html
http://www.w3cschool.cc/bootstrap/bootstrap-affix-plugin.html

4. 动画
本站用了知名的animate.css来实现动画。

<link href="css/animate.css" rel="stylesheet">

只需要在需要动画的元素的class属性加入"animated zoomIn"即可实现在页面载入时产生动画。
如需要精确控制时间则在元素的css中加入：
animation-delay:2s;
animation-duration:2s;

如果需要在事件中添加动画可以在javascript中使用addClass。
jQuery代码：

$(function(){
$("#logo").click(function()
{
$("#logo").removeClass("animated zoomIn");
$("#logo").addClass("animated flip");
setTimeout(function(){
$("#logo").removeClass("animated flip");
},2000);
});
});

参考资料：
CSS动画简介
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

5. 响应式
有时需要实现个别CSS属性的响应式，这时要用 @media 来实现。

@media screen and (max-width: 768px) {
.titleContainer
{
width: 320px;
}
}

screen代表电脑屏幕，and是逻辑运算符， max-width 768px代表在768px以下才实现其中的CSS。
这段代码必须放在CSS的最后以免被覆盖。

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

bootstrap怎么调用addtabs

其他类似问题

为你推荐：