-
大家是否还记得，在下拉菜单一节中，下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“<li class=”nav-divider”></li>”即可：查看全部
-
在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等查看全部
-
可以让缩略图配合标题、描述内容，按钮等：查看全部
-
缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看查看全部
-
徽章 从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，如下图所示： 在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。使用.pull-right可以设置右对齐查看全部
-
胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可查看全部
-
text-decoration 定义和用法 text-decoration 属性规定添加到文本的修饰。 注释：修饰的颜色由 "color" 属性设置。 说明 这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。查看全部
-
一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项查看全部
-
分页导航（翻页分页导航） Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。 Bootstrap框架将其独立成一个单独的部分： ☑ LESS版本：对应源文件为pager.less ☑ Sass版本：对应源文件为_pager.scss ☑ 编译后版本：对应bootstrap.css文件第4223行～第4260行 使用方法： 在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：查看全部
-
使用方法： 平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法： <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul>查看全部
-
反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。查看全部
-
使用方法： 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>查看全部
-
固定导航条 很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式： ☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部 ☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部 使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可。 存在bug及解决方法: 从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理查看全部
-
导航条中的按钮、文本和链接 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类名的表单，示例代码编辑器（29-34行）。 实现导航条表单的样式代码源码请查看bootstrap.css文件第3839行～第3904行，我们也对60多行样式代码节选了出来放到右侧bootstrap.css文件中，有兴趣的同学请查看。 在上面的示例中，大家看到了“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。查看全部
举报
0/150
提交
取消