【前端】如何實現一個簡單地可折疊展開右側懸浮工具欄？

效果如下：

 

主要問題以及解決方案：

1、tooltips如何實現？

參考資料：http://bootsnipp.com/snippets/A8QrP

http://bootsnipp.com/snippets/55V87

2、collapse如何實現？

參考資料：http://bootsnipp.com/snippets/408yW

http://v3.bootcss.com/javascript/#collapse

3、bootstrap實現內聯表單？

參考資料：http://book.2cto.com/201405/42716.html

 

圖標：http://v3.bootcss.com/components/

顏色：http://www.w3school.com.cn/cssref/css_colors.asp

 

代碼片段：

<div style="position:fixed;top:250px;right:10%;font-weight:bold;border:1px solid #C0C0C0;padding:5px;background-color:#FFCC99">
                                <a title="實用小工具" data-toggle="collapse" data-html="true" rel="tooltip" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                    <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;My Tool Suits 
                                </a>
                                <div class="collapse" id="collapseExample">
                                    <form class="form-inline">
                                      <div class="form-group" style="display: inline-block;vertical-align: bottom;">
                                        <label title="魔幻數據龍抓手, 一鍵復用任意部署數據 !" data-html="true" rel="tooltip" for="id_magic_data_grab" style="text-decoration:underline">Magic Data Grab: </label>
                                      </div>
                                      <div class="form-group" style="display: inline-block;vertical-align: middle;">
                                        <input type="text" class="form-control"  id="id_magic_data_grab" placeholder="Input deployID...">
                                      </div>
                                      <div class="form-group" style="display: inline-block;vertical-align: middle;">
<!--                                         <a title="魔幻數據龍抓手, 一鍵復用任意部署數據 !" href="javascript:magic_data_grab();" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Magic Data Grab</a>
 -->                                        <a title="抓取所有數據" data-html="true" rel="tooltip" href="javascript:magic_data_grab();" class="btn btn-success" role="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Grab All</a>
                                      </div>
                                      <div class="form-group" style="display: inline-block;vertical-align: middle;">
<!--                                         <a title="魔幻數據龍抓手, 一鍵復用任意部署數據 !" href="javascript:magic_data_grab();" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Magic Data Grab</a>
 -->                                        <a title="僅抓取SVN路徑、版本數據" data-html="true" rel="tooltip" href="javascript:magic_data_grab_svn();" class="btn btn-info" role="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> SVN Only</a>
                                      </div>
                                    </form>
                                </div>
                            </div>