css二级下拉菜单 Bootstrap导航条可点击和鼠标悬停显示下拉菜单(4)

MIME类型简介

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型，既设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持梦搏网络。

Bootstrap栅格系统学习笔记

[10415]

Bootstrap栅格系统知多少？

1、简介

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。

2、栅格选项

bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

通过下表可以详细查看Bootstrap的栅格系统如何在多种屏幕设备上工作的。

3、列偏移

使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

4、嵌套列

为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。

5、列排序

通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

案例

演示效果：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持梦搏网络。

Bootstrap实现带暂停功能的轮播组件(推荐)

[10412]

最近博主在项目中用到一款轮播组件，功能齐全，可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能，在此推荐给大家，供大家参考。

一、效果展示

多说无益，来看一组效果展示图，感受一下！

1、先跟大家见个面，打个招呼

2、什么？切换太慢了？好，加快速度！

3、加入其他功能

4、图片太小，看不出效果？好，那来个大图感受下！

5、如果你不想要右上角的小图标，照样可以。

6、如果你对上述滑动效果不满意，组件提供了其他几种图片切换方式

淡入淡出

水平滑动

7、再来一张图片定位

二、组件介绍

Orbit是一款github上面的开源组件，需要jquery的支持，开源地址。

三、代码示例

它的使用也是相当简单，首先下载源码，引用需要的组件到页面里面来。

然后htmll代码如下

这都是固定结构，div里面的id="featured"用于初始化组件

最后js初始化

以上简单代码就完成了上述实例图片3的效果。是不是很easy!