-
col-md-* col-md-offset-*查看全部
-
btn btn-primary btn-info查看全部
-
使用默认按钮风格也非常的简单，只需要在基础按钮“btn”的基础上增加类名“btn-default”即可：<button class="btn btn-default" type="button">默认按钮</button>查看全部
-
Bootstrap框架的按钮使用非常的简单，使用方式如下： <button class="btn" type="button">我是一个基本按钮</button>查看全部
-
大小设置： 在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样： 1、通过“pagination-lg”让分页导航变大； 2、通过“pagination-sm”让分页导航变小： <ul class="pagination pagination-lg"> … </ul> <ul class="pagination"> … </ul> <ul class="pagination pagination-sm"> … </ul> 运行效果查看最右侧结果窗口。查看全部
-
使用方法： 1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。 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来决定。如： 需要折叠的div代码段： <div class="collapse navbar-collapse" id="example"> <ul class="nav navbar-nav"> … </ul> </div> 窄屏时显示的图标代码段： <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example"> ... </button> 也可以这么写，需要折叠的div代码段： <div class="collapse navbar-collapse example" > <ul class="nav navbar-nav"> … </ul> </div> 窄屏时要显示的图标： <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example"> ... </button>查看全部
-
存在bug及解决方法: 从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理： body { padding-top: 70px;/*有顶部固定导航条时设置*/ padding-bottom: 70px;/*有底部固定导航条时设置*/ } 因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。 第二种解决这个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; } 当然，这种方法有的时候也是需要具体情况具体分析的。查看全部
-
特别声明：在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。查看全部
-
制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可 在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“<li class=”nav-divider”></li>”即可查看全部
-
胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可查看全部
-
特别声明：在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。查看全部
-
使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。 <div class="btn-group"> <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div>查看全部
-
Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中 按钮组大小设置 在介绍按钮一节中，我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法： ☑ .btn-group-lg:大按钮组 ☑ .btn-group-sm:小按钮组 ☑ .btn-group-xs:超小按钮组 只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组。查看全部
-
对于结构方面，非常的简单。使用一个名为“btn-group”的容器，把多个按钮放到这个容器中 除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。唯一要保证的是：不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”查看全部
-
工具集查看全部
举报
0/150
提交
取消