使用Bootstrap3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

作者：萌新求学 | 来源：互联网 | 2023-09-05 10:23

本篇体验用Tab插件显示内容。Html部分为：

        class="row" >
            class="col-sm-6">
                兰帕德宣布退出英格兰队
                class="tabbable">
                    class="nav nav-tabs">
                        class="active">英超
                        西甲
                    
                    class="tab-content">
                        class="tab-pane active" >
                            class="glyphicon glyphicon-map-marker">这里是英格兰
                            
                            
                                北京时间8月26日晚，据BBC，天空体育等多家英国媒体消息，兰帕德正式宣布退出英格兰队。此前他共为球队出场106次，打入了29球。
                            
                            
                                36岁的英格兰人在1999年10月首次代表英格兰队出场，当时的对手是比利时队。兰帕德在为三狮军团征战的15年间共出战106次，斩获了29粒入球。他最后一次代表英格兰队出场是在今夏的巴西世界杯上，英格兰队以0-0的比分逼平了哥斯达黎加，而兰帕德也是以队长的身份完成了他在三狮军团的谢幕演出。

                        class="tab-pane" >

                            class="glyphicon glyphicon-map-marker">巴萨官方宣布后防重臣正式续约4年

                            class="thumbnail pull-left"/>

                                北京时间8月25日晚，西甲巴塞罗那俱乐部官方宣布与队内后防大将马斯切拉诺续约4年，新的合同将延长至2018年6月30日，这位30岁的阿根廷国脚在巴萨的这份新合同的违约金为1亿欧元。

                                在签订了新合同后，马斯切拉诺也通过俱乐部官方向大家分享自己的喜悦：“我非常高兴能继续身披红蓝战袍留在这家伟大的俱乐部中。我盼望着能在未来的这个赛季中跟随球队取得成功，过去的一段日子的也许对我们来说确实很困难，但目前我们已经重新找回了自信。”马斯切拉诺在2010年夏天从利物浦以2200万欧元转会加盟巴萨，作为一名全能型的防守球员，马斯切拉诺一直在球队中扮演者不可或缺的角色。“小马哥”在巴萨夺得过8次冠军：1次欧冠冠军、2次西甲冠军、1次国王杯冠军、1次欧洲超级杯冠军、2次西班牙超级杯冠军和1次世俱杯，目前他已经为巴萨出场185次。

                            class="btn btn-warning" data-toggle="modal">class="glyphicon glyphicon-hand-up">点击弹出模态窗口

另起一行
○ 所有的tab内容和标题被包裹在

中，表示当页面宽度大于768像素的时候，占6个单元格
○ 所有的tab内容被包裹在

中，当一个区域用到tabbable，在该区域内必须使用tab插件
○ 选项卡的标题被放在

中
○ data-toggle="tab"中指明了使用的插件
○ 所有的选项卡内容被包裹在div class="tab-content">中
○ 每一个选项卡内容被包裹在

中

□ Modal模态窗口

当点击选项卡的按钮，弹出模态窗口。相关代码为：

                            class="btn btn-warning" data-toggle="modal">class="glyphicon glyphicon-hand-up">点击弹出模态窗口
                            
                            class="modal fade" >
                                class="modal-dialog">
                                    class="modal-content">
                                        class="modal-header">
                                            
                                            class="modal-title">标题

                                        class="modal-body">

                                            modal主体中的标题

                                                北京时间8月26日20点45，青奥会女足决赛在南京五台山体育场进行，中国U15女足国少队5-0大胜委内瑞拉队，以4战全胜进17球0失球的战绩获得冠军。

                                            又一个标题

                                            class="btn btn-danger popover">不要点我

                                            Tool tips

                                            This link这里有tooltipthis one

class="text-muted">以下表单只演示

                                        class="modal-footer">

○ 表单内容被包裹在中
○ col-lg-2属性值：表示页面宽度>=1200像素占2个单元格
○ 表单的每一行被包裹在

中

□ Popover弹出提示

点击模态窗口中的一个按钮，弹出提示。


      data-cOntainer="body" data-toggle="popover" data-placement="top" 
      data-cOntent="主题内容">不要点我

jQuery部分必须启用Popover。

$("[data-toggle='popover']").popover();

使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

○ title属性: 显示弹出提示的标题
○ data-placement属性：设置弹出位置
○ data-content属性：设置弹出的内容主体

□ Tootip提示信息

移动到a链接，出现提示信息。

This link

jQuery部分必须启用Tooltip。

$("[data-toggle='tooltip']").tooltip();

使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

□ 选项卡部分完整代码

       class="row" >
            class="col-sm-6">
                兰帕德宣布退出英格兰队
                class="tabbable">
                    class="nav nav-tabs">
                        class="active">英超
                        西甲
                    
                    class="tab-content">
                        class="tab-pane active" >
                            class="glyphicon glyphicon-map-marker">这里是英格兰
                            
                            
                                北京时间8月26日晚，据BBC，天空体育等多家英国媒体消息，兰帕德正式宣布退出英格兰队。此前他共为球队出场106次，打入了29球。
                            
                            
                                36岁的英格兰人在1999年10月首次代表英格兰队出场，当时的对手是比利时队。兰帕德在为三狮军团征战的15年间共出战106次，斩获了29粒入球。他最后一次代表英格兰队出场是在今夏的巴西世界杯上，英格兰队以0-0的比分逼平了哥斯达黎加，而兰帕德也是以队长的身份完成了他在三狮军团的谢幕演出。

参考资料：
Code a Responsive Website with Bootstrap 3 --by Brad Hussey
http://getbootstrap.com/
http://bootswatch.com/
http://www.tutorialspoint.com/
http://www.placehold.it/

使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

使用Bootstrap 3开发响应式网站实践02,轮播

使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

使用Bootstrap 3开发响应式网站实践07,页脚

class="modal-title">标题

modal主体中的标题

又一个标题

Tool tips

使用Bootstrap3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

兰帕德宣布退出英格兰队

class="glyphicon glyphicon-map-marker">这里是英格兰

class="glyphicon glyphicon-map-marker">巴萨官方宣布后防重臣正式续约4年

modal主体中的标题

又一个标题

Tool tips

兰帕德宣布退出英格兰队

class="glyphicon glyphicon-map-marker">这里是英格兰

class="glyphicon glyphicon-map-marker">巴萨官方宣布后防重臣正式续约4年

class="modal-title">标题

modal主体中的标题

点击弹出Popover

Tool tips

使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

使用Bootstrap 3开发响应式网站实践02,轮播

使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容