-
分页导航（翻页分页导航） Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。 使用方法： 在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类： <ul class="pager"> <li><a href="#">«上一页</a></li> <li><a href="#">下一页»</a></li> </ul> 对齐样式设置： 默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式： ☑ previous：让“上一步”按钮居左 ☑ next：让“下一步”按钮居右 具体使用的时候，只需要在li标签上添加对应类名即可： <ul class="pager"> <li class="previous"><a href="#">«上一页</a></li> <li class="next"><a href="#">下一页»</a></li> </ul> 状态样式设置： 和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签。 <ul class="pager"> <li class="disabled"><span>«上一页</span></li> <li><a href="#">下一页»</a></li> </ul>查看全部
-
分页导航（带页码的分页导航） 分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航： ☑ 带页码的分页导航 ☑ 带翻页的分页导航 带页码的分页导航 使用方法： 平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法 大小设置： 在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样： 1、通过“pagination-lg”让分页导航变大； 2、通过“pagination-sm”让分页导航变小：查看全部
-
反色导航条 反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。查看全部
-
固定导航条 很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式： ☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部 ☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部 使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可 存在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; }查看全部
-
.navbar-fixed-top ~ .content 表示 .navbar-fixed-top 之后出现的所有 .content查看全部
-
导航条中的按钮、文本和链接 Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式： 1、导航条中的按钮navbar-btn 2、导航条中的文本navbar-text 3、导航条中的普通链接navbar-link 但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。查看全部
-
带表单的导航条 在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单查看全部
-
为导航条添加标题、二级菜单及状态 加入导航条标题 在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现 导航条状态、二级菜单 同样的，在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条查看全部
-
基础导航条 在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。 使用方法： 在制作一个基础导航条时，主要分以下几步： 第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”查看全部
-
“@media (min-width:768px){…}”表示自适应导航仅在浏览器视窗宽度大于768px才能按上图风格显示。查看全部
-
面包屑式导航 面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。 使用方法： 使用方式就很简单，为ol加入breadcrumb类查看全部
-
导航加下拉菜单（二级导航） 前面介绍的都是使用Bootstrap框架制作一级导航，但很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以. 在制作下拉菜单时，可以用分隔线，那么在二级导航中是否可以呢？我们一起来看看： 不用再说太多，只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以了。查看全部
-
自适应导航（使用） 自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。查看全部
-
导航（垂直堆叠的导航） 在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可 大家是否还记得，在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“<li class=”nav-divider”></li>”即可查看全部
-
导航（胶囊形(pills)导航） 胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可查看全部
举报
0/150
提交
取消