用bootstrap設計按鈕組

bootstrap不僅提供了很多圖標按鈕,還提供了btn類按鈕風格。按鈕組就是將幾個按鈕合成一個組件。只要用btn-group類和一些<a>或<button>標籤,就可製作按鈕組。

工具/原料

文本編輯器
瀏覽器

方法/步驟

新建一個html文檔,引入bootstrap.min.css,jquery.min.js,bootstrap.min.js等文件。

先定義按鈕,包含<div class="btn-group"></div>中,如圖所示

不只可以用button,使用p,li,span等標籤也是一樣的。

相關文章

  1. 如何使用Bootstrap樣式控制單選按鈕製作按鈕組

    Bootstrap自帶的樣式可以將複選框.單選按鈕等製作成按鈕組,複選框是可以多選的,單選按鈕是選擇一個記錄.下面利用一個實例說明使用Bootstrap樣式控制單選按鈕製作按鈕組,操作如下: 工具/原 ...
  2. bootstrap按鈕組樣式設置

    bootstrap按鈕樣式設置 工具/原料 bootstrap eclipse 方法/步驟 按鈕組指的是某些功能類似的按鈕集合.相關的按鈕可以定義成按鈕組. <%@ page language= ...
  3. 如何使用Bootstrap中的checkbox樣式製作按鈕組

    按鈕組顧名思義,是由兩個以及兩個以上的按鈕組成的按鈕,可以進行單選,也可以進行多選.這個按鈕組可以是複選框構成的,也可以是單選按鈕組成的.下面的實例是根據複選按鈕構成按鈕組,具體操作如下: 工具/原料 ...
  4. 如何利用Bootstrap UI單選按鈕製作按鈕組並取值

    jQuery UI Bootstrap是將Bootstrap和jQuery UI結合起來的控制項,利用Bootstrap控制組件的樣式,其中有按鈕.按鈕組.標籤頁.日期選擇器.菜單.提示框.對話框等.下 ...
  5. 如何使用wxPython第三方包設計輸入框和按鈕組

    在python語言第三方包wxPython,這個包中包含了很多組件,有輸入框.按鈕.下拉框.單選按鈕和複選框等.下面利用一個實例說明如何製作輸入框和按鈕組,操作如下: 工具/原料 python pyc ...
  6. 用bootstrap製作按鈕工具欄

    用(btn-toobar)包含多個按鈕組(btn-group),可以組成一個按鈕工具欄.這樣可以設計一個複雜的按鈕組件. 工具/原料 文本編輯器 瀏覽器 方法/步驟 在body元素中,把幾個按鈕組包含 ...
  7. 如何利用微信樣式庫設計按鈕

    微信作為現在非常流行的交流方式,對它研究的人也越來越多,對手機端的展示也越來越高了.微信公眾平台開發了自己的樣式庫,可以利用它設計更好.兼容性更好的頁面.那麼,下面講述下如何利用微信樣式設計按鈕,具體 ...
  8. 如何利用XMind軟體設計公司組織機構圖

    XMind中有一款圖形,組織機構圖,可以展示組織.團體的機構分層圖.組織機構圖,按照方向來分,可以分為向下.向上.組織機構圖顯示一個組織的機構,組成部分.下面利用XMind的組織機構圖,設計公司機構圖 ...
  9. 如何利用Axure RP 8設計按鈕控制標籤的移動路線

    Axure RP 8元件庫中有標記元件-----便簽,它們的形狀是正方形,可以利用它們設計不同的圖形.按鈕添加實例,可以控制便簽的移動,可以沿著直接移動,也可以旋轉移動.下面利用一個實例說明按鈕控制便 ...
  10. vc++中怎樣設計多組單選按鈕

    在使用VC++編程時,經常會用到單選按鈕,您有沒有遇到過這些情況?單選按鈕該互斥的不互斥.多組單選按鈕不分組.多組單選按鈕互斥邏輯混亂.每組單選按鈕沒有默認被選中項,下面我就簡單的將將怎麼簡單的解決這 ...
  11. Dreamweaver5中如何插入單項按鈕組??

    下邊給出在Dreamweaver5中插入單項按鈕組的方法,希望對大家有所幫助呵呵!! 工具/原料 Dreamweaver5 方法/步驟 1)打開軟體Dreamweaver5 1)打開或新建一個文檔 1 ...
  12. 如何利用Axure RP 8設計按鈕控制頁面框改變大小

    一般網頁中,有時會添加動畫效果,如淡入.淡出.左移.右移等.利用Axure RP 8 設計出動畫的效果,可以利用按鈕點擊事件控制頁面框框改變寬度和高度達到改變大小的目的.下面利用一個實例說明Axure ...
  13. 如何使用python語言tkinter模塊設計單選按鈕組

    在python設計語言的可視化tkinter模塊,包含了大量的組件和控制項,需要根據提供的API文檔,設計出不同的美觀的界面.其中,單選按鈕是一種常用的單選的控制項,一般是設置兩個或兩個以上.下面利用具體 ...
  14. bootstrap框架輸入框組

    輸入框組的尺寸,作為額外元素的多選框和單選框,作為額外元素的按鈕,作為額外緣故的按鈕式下拉菜單,作為額外元素的分列式按鈕下拉菜單, 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 輸 ...
  15. Foundation 按鈕組教程

    Foundation 可以在同一行內創建一系列的按鈕. 工具/原料 Foundation5.5.3 方法/步驟 可以使用 <ul> 元素並添加 .button-group 類來創建按鈕組: ...
  16. Bootstrap框架按鈕二

    可作為按鈕使用的標籤或元素,預定義樣式,按鈕尺寸,按鈕激活狀態,連結元素,禁用狀態,button元素. 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 尺寸 需要讓按鈕具有不同尺寸嗎 ...
  17. Bootstrap框架按鈕一

    可作為按鈕使用的標籤或元素,預定義樣式,按鈕尺寸,按鈕激活狀態,連結元素,禁用狀態,button元素. 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 可作為按鈕使用的標籤或元素 為 ...
  18. Bootstrap框架按鈕三

    可作為按鈕使用的標籤或元素,預定義樣式,按鈕尺寸,按鈕激活狀態,連結元素,禁用狀態,button元素. 工具/原料 電腦,DW軟體(Dreamweaver) 方法/步驟 禁用狀態 通過為按鈕的背景設置 ...
  19. Photoshop載入按鈕組

    Ps有很多樣式組,可以載入豐富樣式. 工具/原料 Photoshop7.0以上 兼容的電腦 方法/步驟 先百度 Photoshop按鈕.樣式菜單的載入樣式. 選擇按鈕,載入. 成角的色譜. 斜邊 正常 ...
  20. bootstrap-switch開關組件,bootstrap切換按鈕

    初始狀態時,input標籤加上checked屬性就會顯示off狀態,去掉checked屬性顯示on狀態. 工具/原料 bootstrap.min.css bootstrap-switch.min.cs ...