响应式网页开发基础教程(jQuery+Bootstrap)第6章Bootstrap组件设计课件.pptx

第6章 Bootstrap组件设计
1
Bootstrap组件设计
Bootstrap表单设计
使用Bootstrap，通过一些简单的 HTML 标签和扩展的类，即可创建出不同样式的表单。
Bootstrap 提供了3种类型nfo
.btn- warning
.btn- danger
不同的预定义按钮样式，分别是默认样式、保持链接样式、原始按钮样式、成功样式、一般信息样式、警告样式、危险样式
.btn- block
块级按钮（拉伸至父元素100%的宽度）
.active
.disabled
按钮的激活及禁用状态
.btn- group- vertical
该class让一组按钮垂直堆叠显示
Bootstrap表单设计
按钮组默认是水平显示的，-group-vertical使其垂直显示。
【例6-11】是一个垂直显示按钮组的示例
在DreamweaverCC中，可通过选择“插入/Bootstrap组件/Button Groups”等菜单，插入各种形式的按钮组。
示例：【例6-12】
Bootstrap表单设计
输入框组
使用输入框组，可以向基于文本的输入框添加作为前缀和后缀的文本或按钮。输入框组为表单前后增加“组”，可以使用图标或文字。向 .form-control元素添加前缀或后缀元素的步骤如下。
（1）把前缀或后缀元素放在一个带有class="input-group"的 <div> 中。
（2）在相同的<div>内，在class="input-group-addon"的 <div>或<span> 内放置额外的内容。
（3）把该<div>或<span>放置在 <input> 元素的前面或者后面。
注意为了保持跨浏览器的兼容性，应避免使用 <select> 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的class，因为输入框组是一个孤立的组件。
Bootstrap下拉菜单
下拉菜单示例
如需使用下拉菜单，-toggle的调用并增加data-toggle属性的设置，即可实现下拉菜单。
导航下拉菜单示例:【例6-14】
打开的每个下拉菜单其实都是一个列表，-menu类，而每个菜单项是一个列表项，其中，<li class="divider"></li>可以设置下拉菜单中的分隔线。如果要给下拉菜单增加标题，-header。如果要禁用下拉菜单的项，。
类
描述
.dropdown
指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown- menu
创建下拉菜单
.dropdown- menu- right
下拉菜单右对齐
.dropdown- header
在下拉菜单中添加标题
.dropup
指定向上弹出的下拉菜单
.disabled
下拉菜单中的禁用项
.divider
下拉菜单中的分割线
.pull- right
下拉菜单右对齐
Bootstrap下拉菜单
下拉菜单的对齐及弹出方向也可以改变。--menu-right可以使得下拉菜单靠页面右侧对齐，。
示例：【例6-15】
Bootstrap下拉菜单
下拉菜单实现方法
1．按钮下拉菜单
一个默认类型的按钮：
<div class="btn-group">
<button type="button" class="btn btn-default" >按钮下拉菜单</button>
</div>
（1）添加按钮属性。给按钮添加对类dropdown-toggle的调用，并添加属性data-toggle ="dropdown"。为了显示向下箭头，在按钮文本处添加<span class="caret"></span>。
（2）添加下拉菜单所显示的列表<ul>，-menu的调用，如果是靠右对齐或向上弹出的菜单，可调用表6-2给出的类。
（3）设置列表项。每个列表项都需设置为超链接形式，并可参考表6-2，设置分割线、不可用的列表项、列表标题等特殊项目。
简单按钮下拉菜单示例：【例6-16】
Bootstrap下拉菜单
2．导航下拉菜单
以下代码所示的是一个导航，每个导航项都是一个超链接:
<nav> <ul type="none">
<li><a href="#" >导航下拉菜单</a>
<li>其他导航项</li>
</