-
列表组--基础列表组 基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分： ☑ list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素 ☑ list-group-item：列表项，常用的是li元素，当然也可以是div元素查看全部
-
Bootstrap框架中以下组件使用了过渡动画效果 ☑ 模态弹出窗（Modal）的滑动和渐变效果； ☑ 选项卡（Tab）的渐变效果； ☑ 警告框（Alert）的渐变效果； ☑ 图片轮播（Carousel）的滑动效果。查看全部
-
媒体对象--媒体对象列表 使用方法： 针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”查看全部
-
媒体对象--默认媒体对象 媒体对象一般是成组出现，而一组媒体对象常常包括以下几个部分： ☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 ☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片 ☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容 ☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选 除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。查看全部
-
进度条--动态条纹进度条 使用方法： 在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码： <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" ></div>查看全部
-
进度条--条纹进度条 在Bootstrap框架中除了提供了彩色进度条之外，还提供了一种条纹进度条，这种条纹进度条采用CSS3的线性渐变来实现，并未借助任何图片。使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上增加类名“progress-striped”，当然，如果你要让你的进度条条纹像彩色进度一样，具有彩色效果，你只需要在进度条上增加相应的颜色类名，如前面的彩色进度条所讲。查看全部
-
进度条--彩色进度条 Bootstrap框架中的进度条和警告信息框一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色。在此称为彩色进度条，其主要包括以下四种： ☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色 ☑ progress-bar-success：表示成功进度条，进度条颜色为绿色 ☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色 ☑ progress-bar-danger：表示错误进度条，进度条颜色为红色 使用方法： 具体使用就非常简单了，只需要在基础的进度上增加对应的类名。查看全部
-
进度条--基本样式 Bootstrap框架中对于进度条提供了一个基本样式，一个100%宽度的背景色，然后个高亮的色表示完成进度。其实制作这样的进度条非常容易，一般是使用两个容器，外容器具有一定的宽度，并且设置一个背景颜色，他的子元素设置一个宽度，比如完成度是30%（也就是父容器的宽度比例值），同时给其设置一个高亮的背景色。 使用方法： Bootstrap框架中也是按这样的方式实现的，他提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单： <div class="progress"> <div class="progress-bar" ></div> </div>查看全部
-
警示框--警示框的链接 有时候你可能想在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。 实现方法： Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。查看全部
-
警示框--可关闭的警示框 一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。 使用方法： 只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤： 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。 2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。 3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。查看全部
-
警示框--默认警示框 Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果： 1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色； 2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色； 3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色； 4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。 使用方法： 具体使用的时候，可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框，只需要在“alert”基础上追加对应的类名查看全部
-
缩略图（二） 上一小节，展示的仅只有缩略图的一种使用方式，除了这种方式之外，还可以让缩略图配合标题、描述内容，按钮等查看全部
-
缩略图（一） 缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。 使用方法： 通过“thumbnail”样式配合bootstrap的网格系统来实现。查看全部
-
徽章 在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。 使用方法： 使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类： <a href="#">Inbox <span class="badge">42</span></a> 注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。查看全部
-
标签 在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。 使用原理： 使用方法很简单，你可以在使用span这样的行内标签： <h3>Example heading <span class="label label-default">New</span></h3> 颜色样式设置： 和按钮元素button类似，label样式也提供了多种颜色： ☑ label-deafult:默认标签，深灰色 ☑ label-primary：主要标签，深蓝色 ☑ label-success:成功标签，绿色 ☑ label-in:信息标签，浅蓝色 ☑ label-warning：警告标签，橙色 ☑ label-danger：错误标签，红色查看全部
举报
0/150
提交
取消