新一期的乾貨來了,BootStrap該怎麼用(樂字節java)5

BootStrap 插件

                            若是須要更多資料點擊下方圖片加好友領取⬇(註明來意)
                    image
​ 表單主要功能是用來與用戶作交流的一個網頁控件,良好的表單設計可以讓網頁與用戶更好的溝通。表單中常見的元素主要包括:文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。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="#">&laquo;</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="#">&raquo;</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

用法

  1. 經過 data 屬性:在控制器元素(好比按鈕或者連接)上設置屬性 data-toggle="modal",同時設置 data-target="#identifier"href="#identifier" 來指定要切換的特定的模態框(帶有 id="identifier")。
  2. 經過 JavaScript:使用這種技術,能夠經過 JavaScript 來調用帶有 id="identifier" 的模態框:
$('#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">&times;</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');

相關文章
相關標籤/搜索