毕设中巩固的技术（二）Bootstrap常用组件实例

谁践踏了优雅 2022-08-24 04:27 130阅读 0赞

拿来就用的组件就不介绍了，这里主要讲解一下Bootstrap官方文档写的不那么易于理解的组件。

## 1、顶部导航栏上的搜索框 ##

Bootstrap官方提供的默认样式是这样的：

![20140625201208281][]

这个搜索框看上去有两个问题：①按钮和搜索内容隔的太远了，最好可以放到一起 ②搜索按钮最好用一个放大镜的小图标

于是我们对这个搜索框进行改写。

#searchForm {
    	margin: 12px 0;
    	background: #BBBBBB;
    	border-radius: 10px;
    }
    #search-text {
    	width: auto;
    	padding: 0 12px;
    	height: 26px;
    	background: #BBBBBB;
    	vertical-align: middle;
    	border-radius: 10px;
    	border: 0;
    }
    input#search-text:focus {
    	border-radius: 10px;
    }

实现好的效果如下：

![20140625202146968][]

## 2、弹出框的用法 ##

这个应该算Bootstrap比较坑爹的组件了，先来看看它的用法

<table style="border-collapse:collapse; border-spacing:0px; max-width:100%; width:847px; margin-bottom:20px; border:1px solid rgb(221,221,221); color:rgb(51,51,51); font-family:ff-tisa-web-pro-1,ff-tisa-web-pro-2,'Lucida Grande','Helvetica Neue',Helvetica,Arial,'Hiragino Sans GB','Hiragino Sans GB W3','WenQuanYi Micro Hei',sans-serif; font-size:14px; line-height:20px"> 
 <thead style=""> 
  <tr style=""> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> animation</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> boolean</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> true</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 为popover增加一个渐变动画的效果</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> html</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> boolean</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> false</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> popover的content可以使用html</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> placement</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> string | function</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 'right'</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> popover出现的位置，选项可以是： - top | bottom | left | right | auto.</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> selector</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> string</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> false</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> 这个比较有用，当页面上有动态生成的元素时，指定了selector的匹配规则可以匹配到新添加的元素。类似于jquery里$('body').on('click', ".rest", function(){}).</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> trigger</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> string</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> 'click'</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> popover如何被触发，选项有： - click | hover | focus | manual</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> title</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> string | function</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> ''</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> popover的标题</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> content</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> string | function</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> ''</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> popover的内容</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> delay</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> number | object</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221)"> 0</td> 
   <td style="padding:8px; vertical-align:top; border:1px solid rgb(221,221,221)"> <p style="line-height:2; margin-top:0px; margin-bottom:10px">延时&nbsp;<span style="background-color:rgb(249,242,244); color:rgb(199,37,78); font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; white-space:nowrap; line-height:2">delay: { show: 500, hide: 100 }</span></p> <p style="margin-top:0px; margin-bottom:10px">show指定的是出现之前的延时，hide指定是隐藏前的延时</p> </td> 
  </tr> 
  <tr style=""> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> container</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> string | false</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> false</td> 
   <td style="padding:8px; line-height:1.428571429; vertical-align:top; border:1px solid rgb(221,221,221); background-color:rgb(249,249,249)"> <p style="margin-top:0px; margin-bottom:10px; line-height:2">官方文档上说是防止在窗口缩放大小的时候让popover有一个可以依赖的点。但是我实验了一下好像没什么作用，希望大家有知道的告诉下。</p> </td> 
  </tr> 
 </tbody> 
</table>

下面来说说它坑爹的地方：仔细看title和content的类型，写的是string|function。看到function，第一反应这个值应该是可变的，但是不幸的是，popover只是在页面刚刚载入的时候生成内容，之后内容就不变了。

我们可以来试试：

$(function() {
    	$('#test').popover( {
    		'title' : getDynamicTitle(),
    		'content' : getDynamicContent(),
    		'trigger' : 'click'
    	});
    });
    
    function getDynamicContent() {
    	return new Date();
    }
    
    function getDynamicTitle() {
    	return new Date();
    }

发现生成的popover的时间总是固定的，就是刚载入页面的那个时间。这就大大限制了这个组件的功能，不过也有方法来弥补。

我们可以弹出框之后再通过ajax把内容填充进去，为了增强用户体验，可以在读取数据的时候先弄个载入动画放到这个popover里。

我们这里用popover实现一个简单的购物车：

$('#cartBtn').popover( {
    	html : true,
    	placement : "bottom",
    	trigger : "click",
    	content : "您的购物车还是空的，先去挑选美食吧"
    }).on("click", function(e) {
    	getCartData();
    });

getCartData方法则会通过ajax与后台交互得到数据并塞到popover中，这样便实现了popover动态载入内容，实现效果如下：

![20140625220322343][]

[20140625201208281]: /images/20220823/99411af441134cc9858144a563bf0cf9.png
[20140625202146968]: /images/20220823/7bf52cd9d4214d008bdf9513f530c535.png
[20140625220322343]: /images/20220823/50dd502a3dc340e988d88d745d1caa59.png