若是須要更多資料點擊下方圖片加好友領取⬇(註明來意)
表單主要功能是用來與用戶作交流的一個網頁控件,良好的表單設計可以讓網頁與用戶更好的溝通。表單中常見的元素主要包括:文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。html
使用下拉與按鈕組合能夠製做導航jquery
要點:bootstrap
一、基本樣式: .nav 與 「nav-tabs」、「nav-pills」組合製做導航 二、分類: 1)、標籤型 (nav-tabs)導航 2)、膠囊形(nav-pills)導航 3)、堆棧(nav-stacked)導航 4)、自適應(nav-justified)導航 5)、麪包屑式(breadcrumb)導航 ,單獨使用樣式,不與nav一塊兒使用,直接加入到ol、ul中便可,通常用於導航,主要是起的做用是告訴用戶如今所處頁面的位置(當前位置) 三、狀態: 1)、選中狀態 active 樣式 2)、禁用狀態: disable 四、二級菜單
<p>標籤式的導航菜單</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
<p>基本的膠囊式導航菜單</p> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
分頁隨處可見,分爲頁碼導航和翻頁導航框架
頁碼導航:ul標籤上加pagination [pagination-lg | pagination-sm] ide
翻頁導航:ul標籤上加pagerspa
<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul>
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
在使用Bootstrap框架的下拉菜單時,必須使用兩個js插件
<!-- 若是要使用Bootstrap的js插件,必須先調入jQuery --> <script src="js/jquery-3.4.1.js"></script> <!-- 包括全部bootstrap的js插件或者能夠根據須要使用的js插件調用 --> <script src="js/bootstrap.min.js"></script>
要點:設計
一、使用一個類名爲dropdown 或btn-group的div 包裹整個下拉框: <div class="dropdown"></div> 二、默認向下dropdown,向上彈起加入 . dropup 便可 三、使用button做爲父菜單,使用類名: dropdown-toggle 和自定義data-toggle屬性 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button> 四、在button中 使用font 製做下拉箭頭 <span class="caret"></span> 五、下拉菜單項使用一個ul列表,而且定義一個類名爲「dropdown-menu 六、分組分割線: <li>添加類名「divider」來實現添加下拉分隔線的功能 七、分組標題: li 添加類名 「dropdown-header」 來實現分組的功能 八、對齊方式: 1)、dropdown-menu-left 左對齊 默認樣式 2)、dropdown-menu-right 右對齊 九、激活狀態(.active)和禁用狀態(.disabled)
<!--使用一個類名爲dropdown,默認向下dropdown,向上彈起加入 . dropup 便可--> <div class="dropdown "> <!--使用button做爲父菜單,使用類名: dropdown-toggle 和自定義data-toggle屬性--> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 喜歡頻道 <span class="caret"></span><!--下拉箭頭--> </button> <!--下拉菜單項使用一個ul列表,而且定義一個類名爲「dropdown-menu--> <ul class="dropdown-menu"> <!--dropdown-menu-right右對齊--> <!--分組標題: li 添加類名 「dropdown-header」 來實現分組的功能--> <li class="dropdown-header">----科普----</li> <li> <a href="#">人與天然</a> </li> <!--分組分割線: <li>添加類名「divider」來實現添加下拉分隔線的功能--> <li class="divider"></li> <li class="dropdown-header">----搞笑----</li> <li> <a href="#">歡樂喜劇人</a> </li> <li> <a href="#">快樂大本營</a> </li> <li class="divider"></li> <li class="disabled"> <!--禁用狀態--> <a href="#">生活大爆炸</a> </li> </ul> </div>
模態框(Modal)是覆蓋在父窗體上的子窗體。一般,目的是顯示來自一個單獨的源的內容,能夠在不離開父窗體的狀況下有一些互動。子窗體可提供信息、交互等。3d
$('#identifier').modal(options);
<h2>建立模態框(Modal)</h2> <!-- 按鈕觸發模態框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 開始演示模態框 </button> <!-- 模態框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模態框(Modal)標題</h4> </div> <div class="modal-body">在這裏添加一些文本</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
方法 | 描述 | 實例 |
---|---|---|
Toggle: .modal('toggle') | 手動切換模態框。 | $('#identifier').modal('toggle'); |
Show: .modal('show') | 手動打開模態框。 | $('#identifier').modal('show'); |
Hide: .modal('hide') | 手動隱藏模態框。 | $('#identifier').modal('hide'); |