摘要:
弹窗 一. 结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包 阅读全文
摘要:
一、基础面板 基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个具有边框的文本显示块。 由于“panel”不控制主题颜色,所以在“panel”的基础上增加一个控制颜色的主题“panel-default”,另外在里面添加了一个“div.panel-body”来放置面板主体内容。 二 阅读全文
摘要:
一、基本列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。 二、链接列表组 三、自定义列表组 Bootstrap框加在链接列表组的基础上新增了两个样式: ☑ list-group-item-heading:用来定义列表 阅读全文
摘要:
一、基本媒体对象 媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分: ☑ 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容 ☑ 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片 ☑ 媒体对象的主体:常使用“media-body 阅读全文
摘要:
缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。 Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。 在宽屏幕(可视区域大于768px) 阅读全文
摘要:
40% 40% 40% 40% 40% 40% 40% 20% 20% 20% 20% 20% 阅读全文
摘要:
一、默认警示框 Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下,提供了四种不同的警示框效果: 1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色; 2、信息警示框:给用户提供提示信息 阅读全文
摘要:
一、标签 在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。 那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。 颜色样式设置: 和按钮元素but 阅读全文
摘要:
一、带页码的分页导航 二、翻页分页导航 对齐样式设置: 默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式: ☑ previous:让“上一步”按钮居左 ☑ next:让“下一步”按钮居右 具体使用的时候,只需要在li标签上添加对应类名即 阅读全文
摘要:
一、基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default” 1、在Web页面制作中,常常在菜 阅读全文
摘要:
一、标签形tab导航 标签形导航,也称为选项卡导航。 标签形导航是通过“.nav-tabs”样式来实现。在制作标签形导航时需要在原导航“.nav”上追加此类名。 我们想让“Home”项为当前选中项,只需要在其标签上添加类名".active”即可。 选项卡还带有禁用状态,只需要在标签项上添加".dis 阅读全文
摘要:
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。 Bootstrap框架为大家提供了按钮组组件。 1、对于结构方面,非常的简单。使用一个名为“.btn-group”的容器,把多个按钮放到这个容器中(按钮组)。 除了 阅读全文
摘要:
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。 一、普通下拉菜单 1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为: 2、使用了一个<button>按钮做为父菜单,并且定义类名“.dropdown-toggle” 阅读全文