-
Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法： ☑ 调用统一编译的bootstrap.js； ☑ 调用单一的过渡动画的JavaScript插件文件transition.js（右侧第29行引入Bootstrap上对外公布的transition.js的地址）。查看全部
-
使用方法： 使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类： <a href="#">Inbox <span class="badge">42</span></a>查看全部
-
使用方法很简单，你可以在使用span这样的行内标签： <h3>Example heading <span class="label label-default">New</span></h3> 有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏： .label:empty { display: none; } 颜色样式设置： 和按钮元素button类似，label样式也提供了多种颜色： ☑ label-deafult:默认标签，深灰色 ☑ label-primary：主要标签，深蓝色 ☑ label-success:成功标签，绿色 ☑ label-in:信息标签，浅蓝色 ☑ label-warning：警告标签，橙色 ☑ label-danger：错误标签，红色查看全部
-
注意：要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下的a标签换成span标签。查看全部
-
在data-target中，若为class类名，必须在名称前加上“.”；若为id名，则必须加上“#”查看全部
-
使用方法： 1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名[此例中添加的是[.navbar-responsive-collapse]。 2、保证在窄屏时要显示的图标样式（固定写法）： <button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。查看全部
-
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> 【对比下拉菜单的<button>】 <button class="dropdown-toggle" type="button" data-toggle="dropdown">查看全部
-
collapse [英]kəˈlæps [美]kəˈlæps vi. 折叠;倒塌;崩溃;（尤指工作劳累后）坐下 vt. 使倒塌;使坍塌;使瓦解 n. 垮台;（身体的）衰弱查看全部
-
第二种解决这个bug方法： 其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面： <div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> … </div> <div class="content">我是内容</div> 在文件中添加下列样式代码： .navbar-fixed-top ~ .content { padding-top: 70px; } .navbar-fixed-bottom ~ .content { padding-bottom: 70px; } 当然，这种方法有的时候也是需要具体情况具体分析的。查看全部
-
存在bug及解决方法: 从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理： body { padding-top: 70px;/*有顶部固定导航条时设置*/ padding-bottom: 70px;/*有底部固定导航条时设置*/ } 因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。查看全部
-
<div class="nav navbar-nav"> <a href="##" class="navbar-text">Navbar Text</a> <a href="##" class="navbar-text">Navbar Text</a> <a href="##" class="navbar-text">Navbar Text</a> </div>查看全部
-
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式： 1、导航条中的按钮navbar-btn 2、导航条中的文本navbar-text 3、导航条中的普通链接navbar-link 但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。查看全部
-
缩略图（一） 缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。 源码文件： ☑ LESS版本：对应文件thumbnails.less ☑ Sass版本：对应文件_thumbnails.scss ☑ 编译后版本：bootstrap.css文件第4402行～第4426行 使用方法： 通过“thumbnail”样式配合bootstrap的网格系统来实现。查看全部
-
使用方法： 使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类： <a href="#">Inbox <span class="badge">42</span></a>查看全部
-
标签 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示： 那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。 既然他是一个独立的组件，当然在不同的版本下有不同的文件： ☑ LESS版本：对应的源文件label.less ☑ Sass版本：对应的源文件_label.scss ☑ 编译后版本：bootstrap.css文件第4261行～第4327行 使用原理： 使用方法很简单，你可以在使用span这样的行内标签： <h3>Example heading <span class="label label-default">New</span></h3>查看全部
举报
0/150
提交
取消