《Bootstrap响应式网站开发》课件-第七章使用Bootstrap布局组件_第1页
《Bootstrap响应式网站开发》课件-第七章使用Bootstrap布局组件_第2页
《Bootstrap响应式网站开发》课件-第七章使用Bootstrap布局组件_第3页
《Bootstrap响应式网站开发》课件-第七章使用Bootstrap布局组件_第4页
《Bootstrap响应式网站开发》课件-第七章使用Bootstrap布局组件_第5页
已阅读5页，还剩81页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

bootstrap响应式网站开发第七章

使用Bootstrap布局组件《Bootstrap响应式网站开发》Bootstrap作为完整的前端工具集，内建了大量的强大、优雅的可重用组件。使用Bootstrap布局组件按钮（Button）导航（Navigation）标签（Label）徽章（Badge）排版（Typography）缩略图（thumbnail）提醒（Alert）进度条（progressbar）杂项（Miscellaneous）字体图标1《Bootstrap响应式网站开发》字体图标（glyphicon）是一种实现单色图标和符号的实用方法，重点就在于它的简洁易用。字体图标的创作者已经为Bootstrap提供了一些使用Bootstrap布局组件--字体图标字体图标简介免费的图标，在开发复杂网站的时候，这些图标有很大的作用，因为多数时候图标更胜于文字。Bootstrap中广泛使用的字体图标（/components/），如图7-1所示。图7-1字体图标《Bootstrap响应式网站开发》如需使用图标，只需要简单地使用代码调用即可。使用时需要将图标和文本之间保留适当的空间。常用的图标列表类如表7-1所示，更多图标可以到官网进行查询。使用Bootstrap布局组件--字体图标使用字体图标表7-1图标列表《Bootstrap响应式网站开发》使用方法比较简单，例如：<spanclass="glyphiconglyphicon-search"></span>就可以实现搜索框。使用Bootstrap布局组件--字体图标使用字体图标<divclass="col-xs-7"><divclass="input-group"><spanclass="input-group-addon"><spanclass="glyphiconglyphicon-search"></span></span><inputtype="text"placeholder="Search"class="form-control"/></div></div>【实例7-1】使用字体搜索图标，代码如下运行【实例7-1】这段代码的输出结果如图7-2所示。图7-2搜索字体图标效果《Bootstrap响应式网站开发》在<head>部分，可以自定义的CSS样式，需要包含Bootstrap主题有关的CSS文件。通过<spanclass="glyphiconglyphicon-search"></span>代码来对搜索图标进行定义。类似地，还可以使用<spanclass="glyphiconglyphicon-log-in">代码添加Login图标。因此，所有的图标都需要通过基本类以及对应的icon类来定义。但是，有一点需要注意，图标类不能直接与其它组件相结合，在同一个元素上也不能与其它类一起使用。也就是说，要将嵌入的<span>标签放在内联元素中，该<span>标签的类必须定义为glyphicon。使用Bootstrap布局组件--字体图标使用字体图标图7-3字体图标使用效果<divclass="row"><buttontype="button"class="btnbtn-default"aria-label="LeftAlign"><spanclass="glyphiconglyphicon-align-left"></span></button> <buttontype="button"class="btnbtn-dangerbtn-sm"><spanclass="glyphiconglyphicon-star"></span>启动</button><buttonclass="btnbtn-success"><spanclass="glyphiconglyphicon-log-in"></span>登录</button><br/><buttonclass="btnbtn-default"><spanclass="glyphiconglyphicon-envelope"></span>E-Mail电子邮箱</button><br/><buttonclass="btnbtn-default"><spanclass="glyphiconglyphicon-user"></span>aboutus联系我们</butto<br/><buttonclass="btnbtn-waring"><spanclass="glyphiconglyphicon-trash"></span>EmptyTrash清空垃圾桶</button><br/><buttonclass="btnbtn-danger"><spanclass="glyphiconglyphicon-log-out"></span>CleanSystem清理系统</button><br/><buttonclass="btnbtn-success"><spanclass="glyphiconglyphicon-log-out"></span>Logout</button></div>【实例7-2】使用字体图标，代码如下《Bootstrap响应式网站开发》使用方法比较简单，例如：<spanclass="glyphiconglyphicon-search"></span>就可以实现搜索框。使用Bootstrap布局组件--字体图标使用字体图标<divclass="col-xs-7"><divclass="input-group"><spanclass="input-group-addon"><spanclass="glyphiconglyphicon-search"></span></span><inputtype="text"placeholder="Search"class="form-control"/></div></div>【实例7-1】使用字体搜索图标，代码如下运行【实例7-1】这段代码的输出结果如图7-2所示。图7-2搜索字体图标效果下拉菜单2《Bootstrap响应式网站开发》如果在一个页面上有许多的链接，页面可能会变得庞大而拥挤。为了避免出现这样的情况，可以采用的一种高效方法就是使用下拉菜单，这样只需要利用小部分屏幕区域，就可以把尽可能多的链接包含在页面中。也可以为按钮、标签页、胶囊式标签页和导航条等添加下拉菜单。下拉菜单的实现效果如图7-4所示。使用Bootstrap布局组件--下拉菜单认识下拉菜单图7-4下拉菜单的效果《Bootstrap响应式网站开发》下拉菜单主要就是在外层加入dropdown类，而在内层可以通过button标签设置data属性与dropdown类对应。下拉菜单可使用的类与描述如表7-2所示。使用Bootstrap布局组件--下拉菜单下拉菜单的使用类名描述.dropdown指定下拉菜单，下拉菜单都包裹在.dropdown里.dropdown-menu创建下拉菜单.dropdown-menu-right下拉菜单右对齐.dropdown-header下拉菜单中添加标题.dropup指定向上弹出的下拉菜单.disabled下拉菜单中的禁用项.divider下拉菜单中的分割线表7-2下拉菜单可使用的类《Bootstrap响应式网站开发》使用Bootstrap布局组件--下拉菜单下拉菜单的使用<divclass="dropdown"><buttontype="button"class="btnbtn-successdropdown-toggle"data-toggle="dropdown">热门电视剧<spanclass="caret"></span></button><ulclass="dropdown-menu"><li><aclass="dropdown-header"href="#">老中医</a></li><li><ahref="#">都挺好</a></li><li><ahref="#">芝麻胡同</a></li><liclass="divider"></li><li><ahref="#">黄金瞳</a></li><li><ahref="#">局中局</a></li></ul></div>【实例7-3】下拉菜单类的使用，代码如下运行【实例7-3】代码的输出结果如图7-5所示，如果给ul再添加其他类还可以实现其它效果，例如修改给ul添加“dropdown-menu-right”，代码修改为:<ulclass="dropdown-menudropdown-menu-right">则实现菜单向右对齐，页面效果如图7-6所示。图7-5下拉菜单使用后的效果图

7-6菜单向右对齐的效果《Bootstrap响应式网站开发》使用Bootstrap布局组件--下拉菜单下拉菜单的使用<divclass="dropdown"><ahref="#"data-toggle="dropdown"class="dropdown-toggle"><spanclass="glyphiconglyphiconglyphicon-send">企业案例<bclass="caret"></b></span></a><ulclass="dropdown-menu"><li><ahref="#"><spanclass="glyphiconglyphicon-book">体育案例</span></a></li><liclass="divider"></li><li><ahref="#"><spanclass="glyphiconglyphicon-bookmark">教育案例</span></a></li><liclass="divider"></li><li><ahref="#"><spanclass="glyphiconglyphicon-tags">娱乐案例</span></a></li></ul></div>【实例7-4】综合使用图标与下拉菜单类，代码如下运行【实例7-4】代码的输出结果如图7-7所示图7-7下拉菜单与字体图标的综合案例按钮组3《Bootstrap响应式网站开发》按钮组就是将多个按钮集合成一个页面组件。只需要使用btn-group类和一系列的<a>或者<button>标签，就可以轻易地生成一个按钮组或按钮工具条。按钮组可使用的类与描述如表7-3所示。使用Bootstrap布局组件--按钮组认识按钮组类名描述.btn-group该类用于形成基本的按钮组。在

.btn-group

中放置一系列带有class

.btn

的按钮。.btn-toolbar该类有助于把几组<divclass="btn-group">结合到一个<divclass="btn-toolbar">中，一般获得更复杂的组件。.btn-group-lg,.btn-group-sm,.btn-group-xs这些类可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。.btn-group-vertical该类让一组按钮垂直堆叠显示，而不是水平堆叠显示。表7-3按钮组可使用的类《Bootstrap响应式网站开发》使用Bootstrap布局组件--按钮组认识按钮组<divclass="btn-group"><pclass="btn">p标签按钮</p><liclass="btn">li标签按钮</li><aclass="btn">a标签按钮</a><spanclass="btn">span标签按钮</span></div>【实例7-5】代码中，带有btn类的多个标签被包含在btn-group中，代码如下【实例7-5】中使用不同的标签定义了4个按钮，然后包含在<divclass="btn-group">标签中，预览效果如图7-8所示。通过添加btn-group-vertical样式类，例如：<divclass="btn-group-vertical">，可以设计垂直分布的按钮，效果如图7-9所示。图7-8使用不同标签定义的4个按钮图图7-9垂直的按钮组《Bootstrap响应式网站开发》要将多个按钮组包含在一个btn-toolbar中，可以设计一个按钮工具条，以此设计一个更复杂的按钮组件。【实例7-6】设计三组按钮组，把它们包含在<divclass=“btn-toolbar”>框中，得到一个分页导航条，代码如右边所示：使用Bootstrap布局组件--按钮组设计按钮导航条图7-10分页导航条效果运行【实例7-6】代码的输出结果如图7-10所示注意：按钮必须包含在btn-group中，然后才能放入btn-toolbar中，只有这样才能正确渲染整个按钮导航条。<divclass="btn-toolbartext-center"> <divclass="btn-group"> <spanclass="btnbtn-success">

<spanclass="glyphiconglyphicon-fast-backward"></span> </span> <spanclass="btnbtn-success">

<spanclass="glyphiconglyphicon-step-backward"></span> </span> </div> <divclass="btn-group"> <spanclass="btn">1</span> <spanclass="btn">2</span> <spanclass="btn">...</span> <spanclass="btn">9</span> <spanclass="btn">10</span> </div> <divclass="btn-group"> <spanclass="btnbtn-success">

<spanclass="glyphiconglyphicon-step-forward"></span> </span> <spanclass="btnbtn-success">

<spanclass="glyphiconglyphicon-fast-forward"></span> </span> </div> </div>【实例7-6】设计三组按钮，代码如下《Bootstrap响应式网站开发》Bootstrap支持把按钮和下拉菜单捆绑在一起，形成按钮式下拉菜单。此时，可以将按钮包含在btn-group框中，并为其添加适当的菜单标签，即可让此按钮触发下拉菜单。【实例7-7】设置按钮式下拉菜单，只要为第一个按钮绑定下拉菜单，通过data-toggle="dropdown"触发下拉菜单交互显现，代码如下：使用Bootstrap布局组件--按钮组按钮式下拉菜单<divclass="btn-group"><buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">

按钮式下拉菜单<spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"><li><ahref="#">百度搜索</a></li><li><ahref="#">搜狗搜索</a></li><liclass="divider"></li><li><ahref="#">滴滴出行</a></li><li><ahref="#">共享单车</a></li></ul><buttontype="button"class="btnbtn-defaultdropdown-toggle">普通按钮</button><buttontype="button"class="btnbtn-primarydropdown-toggle">普通按钮</button></div>【实例7-7】设置按钮式下拉菜单，代码如下运行【实例7-7】的代码，输出结果如图7-11所示图7-11设计按钮式下拉菜单输入框组4《Bootstrap响应式网站开发》

输入框组扩展自表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。使用输入框组，可以很容易地向基于文本的输入框<input>元素添加作为前缀或后缀的文本、按钮等内容。

过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。例如，添加人民币符号“￥”、美元符号“$”、添加@符号等，或者应用程序接口所需要的其他公共的元素。使用Bootstrap布局组件--输入框组认识输入框组《Bootstrap响应式网站开发》使用Bootstrap布局组件--输入框组使用输入框组创建基本输入框组的方法如下：输入框组的所有内容被包裹在一个应用了.input-group类的<div>容器元素中。在上面的<div>元素中添加输入框<input>元素。在输入框<input>元素的前面、后面或者前后同时添加应用了.input-group-addon类的<span>元素，将前缀或后缀的内容放在对应的<span>元素中。【实例7-8】设置输入框群组，代码如右所示：<divclass="input-group"><spanclass="input-group-addon">@</span><inputtype="text"class="form-control"placeholder="用户名"/></div><br/><divclass="input-group"><inputtype="text"class="form-control"placeholder="电子邮件"/><spanclass="input-group-addon">@</span></div><br/><divclass="input-group"><spanclass="input-group-addon">￥</span><inputtype="text"class="form-control"placeholder="价格"/><spanclass="input-group-addon">.00</span></div><br/><divclass="input-group"><spanclass="input-group-addon">http://</span><inputtype="text"class="form-control"placeholder="请输入网址信息"/><spanclass="input-group-addon">Go！</span></div>【实例7-8】设置输入框群组，代码如下图7-12输入框组页面效果运行【实例7-8】的代码，输出结果如图7-12所示。导航5《Bootstrap响应式网站开发》

通过给无序列表<ul>元素添加一个.nav类，可以创建一个导航组件。.nav是一个基类，在此基类的基础上添加.nav-tabs或.nav-pills等修饰类，可以改变导航的样式。使用Bootstrap布局组件--导航导航《Bootstrap响应式网站开发》

创建一个标签式的导航菜单，以一个带有class

.nav

的无序列表ul开始，通过给列表<ul>元素使用.nav-tabs修饰类可以创建选项卡导航。【实例7-9】标签式的导航菜单，代码如下：使用Bootstrap布局组件--导航认识导航元素<p>标签式的导航菜单</p><ulclass="navnav-tabs"><li><ahref="#">首页</a></li><li><ahref="#">智慧生活</a></li><li><ahref="#">家用产品</a></li><liclass="active"><ahref="#">商业解决方案</a></li><li><ahref="#">用户服务</a></li><li><ahref="#">购买</a></li></ul>【实例7-9】标签式的导航菜单运行【实例7-9】的代码，输出结果如图7-13所示图7-13选项卡导航效果《Bootstrap响应式网站开发》

通过给【实例7-9】列表<ul>元素使用.nav-pills修饰类可以创建胶囊式导航。active这个类一般用在导航条中当前高亮的栏目，或者选项卡中当前活动着的选项。例如：<ulclass=“navnav-pills”>运行代码，输出结果如图7-14所示。

胶囊式导航也可以按垂直方向堆叠排列，只需要给<ul>元素添加.nav-stacked类即可。通过给【实例7-9】列表<ul>元素使用.nav-pills修饰类可以创建胶囊式导航。例如：<ulclass="navnav-pillsnav-stacked">运行代码，输出结果如图7-15所示使用Bootstrap布局组件--导航认识导航元素图7-14胶囊式导航效果图7-15垂直的胶囊式导航效果《Bootstrap响应式网站开发》当屏幕宽度大于768px时，通过给列表<ul>元素使用.nav-justified类可以让标签式导航或胶囊式导航与父元素等宽。使用Bootstrap布局组件--导航两端对齐导航<ulclass="navnav-pillsnav-justified"><li><ahref="#">首页</a></li><li><ahref="#">智慧生活</a></li><li><ahref="#">家用产品</a></li><liclass="active"><ahref="#">商业解决方案</a></li><li><ahref="#">用户服务</a></li><li><ahref="#">购买</a></li></ul>【实例7-10】两端对齐导航菜单，代码如下运行【实例7-10】的代码，输出结果如图7-16所示。图7-16两端对齐的导航效果《Bootstrap响应式网站开发》对任何导航组件中的某个链接选项<li>元素都可以应用.disabled类，从而实现链接为灰色且没有鼠标悬停效果（禁用了该链接的:hover状态）。需要注意的是，.disabled类只改变链接<a>元素的外观而不改变其功能，可以使用JavaScript来禁用这里的链接。使用Bootstrap布局组件--导航禁用的链接<ulclass="navnav-pillsnav-justified"><li><ahref="#">首页</a></li><li><ahref="#">智慧生活</a></li><li><ahref="#">家用产品</a></li><liclass="active"><ahref="#">商业解决方案</a></li><liclass="disabled"><ahref="#">用户服务</a></li><li><ahref="#">购买</a></li></ul>【实例7-11】禁用链接的设置，代码如下运行【实例7-11】的代码，输出结果如图7-17所示。图7-17禁用的链接效果《Bootstrap响应式网站开发》向导航中的链接选项<li>元素添加下拉菜单插件即可创建带有下拉菜单的导航，还可以添加文字图标效果。【实例7-12】带有下拉菜单的导航的综合案例，代码如下：使用Bootstrap布局组件--导航带有下拉菜单的导航<ulclass="navnav-pills"><li><ahref="#"><spanclass="glyphiconglyphicon-home"></span>首页</a></li><liclass="dropdownactive"><ahref="#"data-toggle="dropdown"class="dropdown-toggle"><spanclass="glyphiconglyphiconglyphicon-send">企业案例

<bclass="caret"></b></span></a><ulclass="dropdown-menu"><li><ahref="#"><spanclass="glyphiconglyphicon-book">体育案例

</span></a></li><liclass="divider"></li><li><ahref="#"><spanclass="glyphiconglyphicon-bookmark">教育案例

</span></a></li><liclass="divider"></li><li><ahref="#"><spanclass="glyphiconglyphicon-tags">娱乐案例

</span></a></li></ul></li><li><ahref="#"><spanclass="glyphiconglyphicon-user">联系我们</span></a></li></ul>【实例7-12】带有下拉菜单的导航的综合案例，代码如下图7-18带有下拉菜单的导航效果运行【实例7-12】代码，输出结果如图7-18所示。导航栏6《Bootstrap响应式网站开发》

导航栏是一个很好的功能，是Bootstrap网站的一个突出特点。导航栏网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在Bootstrap导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。使用Bootstrap布局组件--导航栏认识导航栏创建一个基础导航栏的步骤如下：向<nav>或<div>标签添加.navbar、.navbar-default类，也可以元素添加

role="navigation"，有助于增加可访问性。向<div>元素添加一个标题

.navbar-header类，内部包含了带有.navbar-brand类

的<a>元素，用于定义品牌图标，如果是文字视觉上看起来更大一号。为了向导航栏添加链接，只需要简单地添加带有

.nav、.navbar-nav

类的无序列表即可。《Bootstrap响应式网站开发》使用Bootstrap布局组件--导航栏认识导航栏导航栏可搭配使用的类如表7-4所示。类名描述.navbar-inverse反向颜色，修改导航的外观。.navbar-left靠左对齐，能让导航栏、链接、窗体、按钮、文字等靠左对齐，这是默认效果。.navbar-right靠右对齐，能让导航栏、链接、窗体、按钮、文字等靠右对齐。.navbar-fixed-top固定顶端，加入navbar-static-top类可以建立一个100%宽度的导航栏，它会随着页面向下滑动而消失，包含container或container-fluid类可以让导航栏的内容居中对齐。.navbar-fixed-bottom该class让一组按钮垂直堆叠显示，而不是水平堆叠显示。表7-4导航栏可使用的类《Bootstrap响应式网站开发》使用Bootstrap布局组件--导航栏<navclass="navbarnavbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#">优博教育</a></div><div><ulclass="navnavbar-nav"><liclass="active"><ahref="#">1对1课程</a></li><li><ahref="#">小组课程</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">

出国留学<bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">美国高校</a></li><liclass="divider"></li><li><ahref="#">欧洲高校</a></li><li><ahref="#">东南亚高校</a></li><li><ahref="#">欧洲高校</a></li></ul></li><li><ahref="#">艺考课程</a></li></ul></div></div></nav>【实例7-13】普通导航栏的使用，代码如下：运行【实例7-13】代码，在浏览器和iPad上输出结果如图7-19所示，而在手机上的界面如图7-20所示。图7-19普通导航栏浏览器页面效果图7-20普通导航栏手机端浏览器效果《Bootstrap响应式网站开发》响应式导航条在不同屏幕大小显示的效果不同，例如在PC端显示的效果如图7-21所示。使用Bootstrap布局组件--导航栏响应式导航栏图7-21PC端显示的效果PC端显示的效果则在手机端的小屏幕上显示的效果如图7-22所示。a)手机小屏的显示效果b)点击三横“汉堡按钮”时导航条内容文字出现图7-22手机端的小屏幕上显示的效果《Bootstrap响应式网站开发》使用Bootstrap布局组件--导航栏响应式导航栏为了实现以上这些功能，必须包含Bootstrap折叠（Collapse）插件。导航条相关的和折叠相关的，响应式导航条依赖collapse，其基类为navbar。为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有.collapse、.navbar-collapse类的<div>中。折叠起来的导航栏实际上是一个带有.navbar-toggle类的及两个data-元素的按钮。第一个是data-toggle，用于告诉JavaScript需要对按钮做什么，第二个是data-target，指示要切换到哪一个元素。三个带有class.icon-bar的<span>创建所谓的汉堡按钮。这些会切换为.nav-collapse类的<div>元素。《Bootstrap响应式网站开发》使用Bootstrap布局组件--导航栏运行【实例7-14】代码，在浏览器和iPad上输出结果如图7-23所示，而在手机上的界面如图7-24所示图7-23PC端显示的效果PC端显示的效果a)手机小屏的显示效果b)点击汉堡按钮时导航条内容文字出现图7-24手机端的小屏幕上显示的效果<navclass="navbarnavbar-inverse"role="navigation"><divclass="container"><divclass="navbar-header"><!--在移动端时导航条折叠起来，汉堡样式出现，点击可以显示或隐藏导航内容--><buttontype="button"class="navbar-toggle"data-toggle="collapse“data-target="#menu"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">优博教育</a></div><divid="menu"class="collapsenavbar-collapse"><ulclass="navnavbar-nav"><liclass="active"><ahref="#">1对1课程</a></li><li><ahref="#">小组课程</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">出国留学<bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">美国高校</a></li><liclass="divider"></li> <li><ahref="#">欧洲高校</a></li><li><ahref="#">东南亚高校</a></li><li><ahref="#">欧洲高校</a></li></ul></li><li><ahref="#">艺考课程</a></li></ul> </div></div></nav>【实例7-14】响应式导航栏的使用，代码如下《Bootstrap响应式网站开发》使用Bootstrap布局组件--导航栏导航栏的其他特效1．导航栏中的表单导航栏中使用.navbar-form类可以实现导航栏表单效果，这能实现表单在适当的垂直对齐和在较窄的视口中的折叠。使用对齐方式可以实现导航栏的内容放置具体的位置。可以使用

.navbar-btn

类向不在<form>中的<button>元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn

类可被使用在<a>和<input>元素上。不要在.navbar-nav类内的<a>元素上使用.navbar-btn类，因为它不是标准的button类。运行【实例7-15】代码，在浏览器和iPad上输出结果如图7-25中a图所示，而在手机上的界面如图7-25中b图所示。a)PC页面的显示效果b)手机小屏的显示效果图7-25预览页面的效果<navclass="navbarnavbar-inverse"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#">优博教育</a></div><formclass="navbar-formnavbar-left"role="search"><divclass="form-group"><inputtype="text"class="form-control"placeholder="课程名称"></div><buttontype="submit"class="btnbtn-default">搜索</button></form><buttontype="button"class="btnbtn-defaultnavbar-btn">导航栏按钮

</button></div></nav>【实例7-15】导航栏中的表单的使用，代码如下《Bootstrap响应式网站开发》使用Bootstrap布局组件--导航栏导航栏的其他特效2．导航栏中的文本与导航链接导航栏中使用navbar-text类可以在导航栏插入文本字符串，使用.

glyphiconglyphicon-*

类可以在导航中插入文字图标。<navclass="navbarnavbar-default"role="navigation"><divclass="container-fluid"><divclass="navbar-header"><aclass="navbar-brand"href="#">优博教育</a></div><pclass="navbar-text">欢迎访问本网站</p><ulclass="navnavbar-navnavbar-right"><li><ahref="#"><spanclass="glyphiconglyphicon-user"></span>注册</a></li><li><ahref="#"><spanclass="glyphiconglyphicon-log-in"></span>登录</a></li></ul> </div></nav>【实例7-16】导航栏中的文本与导航链接的使用，代码如下运行【实例7-16】代码，在浏览器上的页面效果如图7-26所示。图7-26导航栏中的文本与导航链接的预览效果《Bootstrap响应式网站开发》使用Bootstrap布局组件--导航栏面包屑导航

面包屑是作为辅助和补充的导航方式，它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。最常见的面包屑的样式是：横向的文字链接，由大于号“>”分开，这个符号也暗示了它们的层级关系。

使用面包屑作为用户寻找路径的一种辅助手段，能方便他们定位和导航。它可以减少的用户返回上一级页面的所需的操作次数。他具有临时性，动态性，占用屏幕空间小，干扰性小，同时，也降低网站访问者的总体跳出率。基于导航功能面包屑导航可以分为以下几类。1.基于用户所在的层级位置。

基于位置的面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航（通常具有2级以上导航）的网站中，如图7-27所示。图7-27腾讯网中的面包屑导航效果《Bootstrap响应式网站开发》使用Bootstrap布局组件--导航栏

这种类型的面包屑常出现在具有大量类别产品和服务的网站中，如电子商务网站，网上教学服务等，如图7-28所示。3.基于用户的足迹。2.基于产品的属性。图7-28基于产品属性的面包屑导航效果显示用户浏览的轨迹，面包屑之间没有明显的层级关系。<ulclass="breadcrumb"><li><ahref="#">首页</a></li><li><ahref="#">出国留学</a></li><li><ahref="#">美国高校</a></li><liclass="active">麻省理工学院</li></ul>【实例7-17】面包屑导航的使用，代码如下运行【实例7-17】代码，在浏览器上的页面效果如图7-29所示。图7-29面包屑导航的预览效果Bootstrap中的面包屑导航（Breadcrumbs）是一个简单的带有

.breadcrumb类的无序列表。分隔符会通过CSS（bootstrap.css）中下面所示的class自动被添加：.breadcrumb>li+li:before{color:#CCCCCC;content:"/\00a0";padding:05px;}如果需要修改分隔的符号，例如更换为“|”，则只需要修改设置content的值为“|”即可。分页7《Bootstrap响应式网站开发》使用Bootstrap布局组件--分页认识分页分页组件可以展示页码。其使用非常方便，易单击、易缩放，在页面中经常被使用到。分页组件主要使用无序列表来建立的一种顺序效果。分页效果的实现非常简单，只需要在<ul>标签中加入.pagination类即可。【实例7-18】分页效果的使用，代码如下： <ulclass="pagination"> <li><ahref="#">«</a></li> <li><ahref="#">1</a></li> <li><ahref="#">2</a></li> <li><ahref="#">3</a></li> <li><ahref="#">4</a></li> <li><ahref="#">5</a></li> <li><ahref="#">»</a></li> </ul>【实例7-18】分页效果的使用，代码如下运行【实例7-18】代码，在浏览器上的页面效果如图7-30所示。图7-30分页的预览效果《Bootstrap响应式网站开发》使用Bootstrap布局组件--分页分页类其他辅助类分页类.pagination还可以搭配其他的辅助项目，分页辅助类如表7-5所示。辅助类主要应用在<li>标签中。类名描述.disabled可以自定义不可点击的链接.active指示当前的页面。。.pagination-lg,.pagination-md.pagination-sm,.pagination-xs使用这些类来获取不同大小的项。.pager添加该.来获得翻页链接.previous上一页，使用class

.previous

把链接向左对齐。.next下一页，使用

.next

把链接向右对齐.pager换页，一个简单的分页链接，链接居中对齐。表7-5分页可使用的类《Bootstrap响应式网站开发》使用Bootstrap布局组件--分页分页类其他辅助类<ulclass="paginationpagination-lg"><li><ahref="#">«</a></li><liclass="previous"><ahref="#"><上一页</a></li><li><ahref="#">1</a></li><li><ahref="#">2</a></li><liclass="active"><ahref="#">3</a></li><liclass="disabled"><ahref="#">4</a></li><li><ahref="#">5</a></li><liclass="next"><ahref="#">下一页></a></li><li><ahref="#">»</a></li></ul>【实例7-19】普通导航栏的使用，代码如下运行【实例7-19】代码，在浏览器上的页面效果如图7-31所示。图7-31分页辅助类的预览效果标签与徽章8《Bootstrap响应式网站开发》标签主要用于计数、提示或页面上其他的标记显示，使用

.label

类来显示标签，此外，还辅助了一些其他类，如表7-6所示。Bootstrap表格--标签与徽章标签的使用类名描述.labellabel-default默认的灰色标签.labellabel-primary蓝色标签.labellabel-success绿色标签.labellabel-info浅蓝色标签.labellabel-warning黄色标签.labellabel-danger红色标签表7-6标签的辅助的类《Bootstrap响应式网站开发》Bootstrap表格--标签与徽章标签的使用<spanclass="labellabel-default">默认标签</span><spanclass="labellabel-primary">主要标签</span><spanclass="labellabel-success">成功标签</span><spanclass="labellabel-info">信息标签</span><spanclass="labellabel-warning">警告标签</span><spanclass="labellabel-danger">危险标签</span>【实例7-20】标签的使用，代码如下运行【实例7-20】代码，在浏览器上的页面效果如图7-32所示。图7-32标签的预览效果《Bootstrap响应式网站开发》徽章的主要功能在于提示，也可以理解为提示标志，例如用于突出显示新的或未读的项，可呈现为“新”或者“未读”。如需使用徽章，只需要把

<spanclass="badge">

添加到链接、Bootstrap导航等这些元素上即可。Bootstrap表格--标签与徽章徽章的使用<divclass="container"><p>邮箱系统：<ahref="#">收件箱<spanclass="badge">12</span></a><ahref="#">发件箱<spanclass="badge">3</span></a></p></div>【实例7-21】徽章的使用，代码如下运行【实例7-21】代码，在浏览器上的页面效果如图7-33所示。图7-33徽章的预览效果《Bootstrap响应式网站开发》还可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用

<spanclass="badge">

来激活链接。Bootstrap表格--标签与徽章徽章的使用<ulclass="navnav-pills"><li><ahref="#">最新案例<spanclass="badge">2</span></a></li><li><ahref="#">经典案例</a></li><liclass="active"><ahref="#">客户评价<spanclass="badge">3</span></a></li><li><ahref="#">客户留言<spanclass="badge">3</span></a></li></ul>【实例7-22】胶囊式导航中的激活状态的使用，代码如下运行【实例7-22】代码，在浏览器上的页面效果如图7-34所示图7-34胶囊式导航中的激活状态预览效果超大屏幕与缩略图9《Bootstrap响应式网站开发》超大屏幕可以增加标题的大小，并为登陆页面内容添加更多的外边距。使用超大屏幕（Jumbotron）的方法就是创建一个带有.jumbotron类的容器<div>即可。Bootstrap表格--超大屏幕与缩略图超大屏幕的使用<divclass="jumbotron"><divclass="container"><h1>欢迎进入智慧城市系统！</h1><p>这是一个超大屏幕（Jumbotron）的实例。</p><p><aclass="btnbtn-successbtn-lg">进入体验</a></p></div></div>【实例7-23】超大屏幕的使用，代码如下运行【实例7-23】代码，在浏览器上的页面效果如图7-35所示。图7-35超大屏幕的预览效果《Bootstrap响应式网站开发》Bootstrap提供了缩略图组建，以便于在站点布局图像、视频、文本等。使用Bootstrap创建缩略图的具体方法如下：第一步：在图像周围添加带有

.thumbnail

类的<a>标签。第二步：添加4像素的内边距（padding）和一个灰色的边框。第三步：当鼠标悬停在图像上时，会动画显示出图像的轮廓。Bootstrap表格--超大屏幕与缩略图缩略图的使用运行【实例7-24】代码，在浏览器上的页面效果如图7-36所示。图7-36缩略图的预览效果<divclass="container"><divclass="row"><divclass="col-sm-6col-md-3"><ahref="#"class="thumbnail"><imgsrc="image/1.jpg"title="三只松鼠每日坚果750克"></a></div><divclass="col-sm-6col-md-3"><ahref="#"class="thumbnail"><imgsrc="image/2.jpg"title="三只松鼠夏威夷果250克"></a></div><divclass="col-sm-6col-md-3"><ahref="#"class="thumbnail"><imgsrc="image/3.jpg"title="三只松鼠

芒果干250克"></a></div><divclass="col-sm-6col-md-3"><ahref="#"class="thumbnail"><imgsrc="image/4.jpg"title="三只松鼠开心果250克"></a></div></div></div>【实例7-24】缩略图的使用，代码如下《Bootstrap响应式网站开发》

在一个基本的缩略图之上，可以向缩略图添加各种HTML内容，比如标题、段落或按钮。例如，可以将带有

.thumbnail

类的<a>标签改为<div>。然后，在该<div>内，添加任何需要添加的东西。由于这是一个<div>，可以使用默认的基于span的命名规则来调整大小。如果需要要给多个图像进行分组，请把它们放置在一个无序列表中，且每个列表项向左浮动。Bootstrap表格--超大屏幕与缩略图<divclass="row"><divclass="col-sm-6col-md-3"><divclass="thumbnail"><imgsrc="image/1.jpg"><divclass="caption"><h3>三只松鼠特价</h3><p>每日坚果750克<spanclass="text-danger">¥126.00</span></p><p>好评<spanclass="badge">3266</span></p><p><ahref="#"class="btnbtn-danger">加入购物车</a></p></div></div></div><divclass="col-sm-6col-md-3">【实例7-24】缩略图的使用，代码如下<divclass="thumbnail"><imgsrc="image/2.jpg"><divclass="caption"><h3>三只松鼠特价</h3><p>夏威夷果250克<spanclass="text-danger">¥46.00</span></p><p>好评<spanclass="badge">13288</span></p><p><ahref="#"class="btnbtn-danger">加入购物车</a></p></div></div></div><divclass="col-sm-6col-md-3"><divclass="thumbnail"><imgsrc="image/3.jpg"><divclass="caption"><h3>三只松鼠特价</h3><p>芒果干480克<spanclass="text-danger">¥30.00</span></p><p>好评<spanclass="badge">1257</span></p><p><ahref="#"class="btnbtn-danger">加入购物车</a></p></div></div></div><divclass="col-sm-6col-md-3"><divclass="thumbnail"><imgsrc="image/4.jpg"><divclass="caption"><h3>三只松鼠特价</h3><p>开心果500克<spanclass="text-danger">¥70.00</span></p><p>好评<spanclass="badge">988</span></p><p><ahref="#"class="btnbtn-danger">加入购物车</a></p></div></div></div> </div>page1page2《Bootstrap响应式网站开发》运行【实例7-25】代码，在浏览器上的页面效果如图7-37所示。Bootstrap表格--超大屏幕与缩略图图7-37缩略图的预览效果警告与进度条10《Bootstrap响应式网站开发》Bootstrap表格--警告与进度条警告的使用警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。通过创建一个<div>，并向其添加一个

.alert类和四个上下文的

.alert-success、.alert-info、.alert-warning、.alert-danger类之一，来添加一个基本的警告框。也可以在警告条中添加一个可取消的警告，通过创建一个<div>，并向其添加一个

.alert类和四个上下文

.alert-success、.alert-info、.alert-warning、.alert-danger类之一，来添加一个基本的警告框。同时向上面的<div>元素中添加可选的

.alert-dismissable类，添加一个关闭按钮。如果在警告（Alerts）中创建链接，则

.alert-link

实体类来快速提供带有匹配颜色的链接。《Bootstrap响应式网站开发》Bootstrap表格--警告与进度条警告的使用<divclass="alertalert-

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论