bootstrap入門教程,按鈕、按鈕風格、下拉菜單

bootstrap入門教程,按鈕、按鈕風格、下拉菜單等

本教程演示:

bootstrap框架的按鈕、按鈕大小、按鈕風格、按鈕組、下拉菜單製作等。

使用的版本:Bootstrap v2.3.2 。

下面是頁面的截圖:

示例代碼很簡單,後面會貼出完整代碼。

這些東西很簡單,就簡單說幾個要點吧:

class='btn'  ,使用了btn這個class類名,bootstrap自動給給你加上按鈕的樣式;

btn-small、btn-large等,可以控制按鈕的大小;

btn-primary  、btn-danger  、btn-warning等,可以改變按鈕的樣式風格,可以按需要去使用這些class。

class='btn-group',這樣就可以聲明這是一個按鈕組,一個分組的按鈕,bootstrap會把第一個按鈕、最好一個按鈕圓角效果處理好,看起來會更美觀。

<span class='caret'></span>,這個就是上圖的三角形圖標元素。

貼出全部代碼:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>bootstrap demo</title>

<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" charset="utf-8"/>

<script type="text/javascript" charset="utf-8" src='js/jquery-1.9.1.min.js'></script>

<script type="text/javascript" charset="utf-8" src='bootstrap/js/bootstrap.js'></script>

</head>

<body >

<div class='container'>

<br>

<br>

按鈕、按鈕大小、按鈕風格<br>

<div class=''>

<a class='btn' href='javascript:;'>常規按鈕</a>

<a class='btn btn-small' href='javascript:;'>小按鈕</a>

<a class='btn btn-large' href='javascript:;'>主要按鈕</a>

<a class='btn btn-primary' href='javascript:;'>primary</a>

<a class='btn btn-danger' href='javascript:;'>danger</a>

<a class='btn btn-warning' href='javascript:;'>warning</a>

<a class='btn btn-success' href='javascript:;'>success</a>

<a class='btn btn-info' href='javascript:;'>info</a>

<a class='btn btn-inverse' href='javascript:;'>inverse</a>

</div>

<br>

按鈕組<br>

<div class='btn-group'>

<a class='btn ' href='javascript:;'>按鈕1</a>

<a class='btn ' href='javascript:;'>按鈕2</a>

<a class='btn ' href='javascript:;'>按鈕3</a>

</div>

<br>

<br>

<br>

下拉菜單<br>

<div class='btn-group'>

<a class='btn'>按鈕4</a>

<a class='btn dropdown-toggle' data-toggle='dropdown' href='javascript:;'><span class='caret'></span></a>

<ul class='dropdown-menu'>

<li><a href='javascript:;'>item1</a></li>

<li><a href='javascript:;'>item2</a></li>

<li><a href='javascript:;'>item3</a></li>

</ul>

</div>

</div>

</body>

</html>

相關文章

  1. Delphi 工具條按鈕上的下拉菜單

    製作步驟: 1.添加一個 TImageList: ImageList1, 然後載入些圖標; 2.添加兩個 TPopupMenu: PopupMenu1.PopupMenu2, 並分別添加些菜單項; 3 ...
  2. Excel知識動畫教程:[1]單元格下拉菜單的建立

    在單元格建立一個下拉菜單,為我們的工作省去了不少麻煩.不用重複的輸入同一種類型的內容:小編為大家介紹方法: 工具/原料 Office Excel/WPS 方法/步驟 先要新建一個空白Excel表格,重 ...
  3. wps表格教程之快速生成下拉菜單

    我們在利用wps表格編輯數據時,有某列的單元格數據只需要填寫幾個同樣的條件信息.而我們每次都需要輸入的話就會覺得很不方便.那有沒有什麼方法把這些條件信息放在一起我們只需要選擇它就能達到我們想要的結果呢 ...
  4. 教你創建帶有下拉菜單的按鈕並消除攝像機標誌

    在unity環境中,利用NGUI創建帶有下拉菜單的按鈕.靈活使用 UIEventListener函數,TweenRotation組件和TweenPosition組件 方法/步驟 新建一個unity工程 ...
  5. iphone不越獄變成安卓的快捷按鈕下拉菜單

    iphone 不越獄也能像安卓一樣好用,大家不用在羨慕安卓手機那快捷的下拉菜單了.今天你也可以擁有. 工具/原料 一台升級到ios8 的iPhone手機 方法/步驟 當你升級到IOS 8 系統之後,點 ...
  6. PS CC 2014入門教程——鎖定圖層按鈕詳解

    本教程將介紹如何鎖定圖層內容 工具/原料 Adobe Photoshop CC 2014 方法/步驟 為什麼要鎖定圖層 答:為了防止對圖層進行錯誤操作. 通過"圖層"面板中的各鎖定 ...
  7. 易語言入門教程2 認識按鈕

    延續上一個教程,上一個經驗自行尋找吧! 工具/原料 易語言(5.5)不同也可以 電腦 方法/步驟 首先創建一個空白程序,這個應該都會吧?不會的請點開我的主頁,尋找教程1. 選擇右側組件中的" ...
  8. Excel教程_定義名稱製作二級下拉菜單

    隨著辦公軟體的普及使用,能熟練使用辦公軟體無論在職場還是在生活中變得很重要. 下面為大家簡單介紹2級下拉菜單的製作,希望能對大家有所幫助. 工具/原料 office,Excel 方法/步驟 第一步:[ ...
  9. 用bootstrap製作導航的下拉菜單

    一般網頁導航欄的標題很多時候有下拉菜單選項,在bootstrap框架中可以用導航組件和下拉菜單組件(dropdown)很方便地製作出這個效果. 工具/原料 電腦 代碼編輯器 瀏覽器 方法/步驟 先製作 ...
  10. iH5高級教程:H5交互菜單,下拉菜單特效

    下拉菜單的三種不同效果. 工具/原料 iH5 方法/步驟 選中舞台,點擊頁面工具,添加3個頁面,每個頁面製作不同的下拉菜單效果 1.選中頁面1,點擊時間軸工具.總時長0.4秒,自動播放和循環播放為NO ...
  11. 簡潔的下拉菜單製作教程

    簡潔的下拉菜單製作,這裡提供最新的編輯過程,純手工代碼編寫,相信會給每一位愛好者帶來好的體驗. 工具/原料 文本編輯器 計算機 方法/步驟 首先新建文件夾(名稱自定):打開文件夾新建文件夾js. 打開 ...
  12. bootstrap入門教程

    bootstrap是現在比較火的前端框架,它是用LESS編譯寫的,小編最近都是用它來開發的,它的柵格系統,流動網格布局,布局,響應式設計,都是很實用的,那麼它如何入門呢?這裡小編給大家分享一下boot ...
  13. 教程excel下拉菜單怎麼做?

    excel下拉菜單,可以在編輯大量數據時候方便通過下拉菜單選取數據,進而提高工作效率.方法也比較簡單,以下作為演示 工具/原料 電腦 excel,或者wps 方法/步驟 打開excel表格,選中需要下 ...
  14. Eclipse插件開發教程2-帶下拉菜單的插件開發

    Eclipse插件可以給開發人員提供不少便利,在很多場景下,插件甚至是必不可少的.那麼怎麼自己開發一個插件呢?前面講了怎麼開發一個簡單的插件,它是沒有任何自己寫的代碼的,下面就寫一個具有完整功能的帶下 ...
  15. 讓bootstrap 的下拉菜單變成滑鼠晃過後自動下拉

    博主最近在用bootstrap框架做前端的頁面,但是bootstrap的下拉菜單為了兼容移動適配 不是滑鼠移上去後就自動下拉的.特此分享給大家,bootstrap下拉菜單使用方式 方法/步驟 下載bo ...
  16. excel教程_Excel中製作一級下拉菜單

    隨著辦公軟體的普及使用,能熟練使用辦公軟體無論在職場還是在生活中變得很重要. 下面為大家介紹利用數據驗證製作一級下拉菜單,希望能對大家有所幫助. 工具/原料 office2016,excel 方法/步 ...
  17. excel二級聯動下拉菜單教程

    里有不少分享,但是感覺都不夠簡單明了.特製作此Excel中製作聯動的二級下拉菜單教程. 工具/原料 Excel 方法/步驟 1.以省市為例,第一步將省市名稱列好,建議單獨成一個sheet. 2.在名稱 ...
  18. excel表格的基本操作下拉菜單怎麼做視屏教程

    你是不是和我一樣.在大學沒有學習excel,工作中發現用處很大,想自學,這套教程是我自己使用的,覺得還不錯,分享給大家. 工具/原料 電腦手機 百度雲 方法/步驟 第一步,獲取資源. 第二步,開始學習 ...
  19. 設定IUNI OS下拉菜單背景圖片教程

    怎樣修改IUNI手機IUNI OS下拉菜單背景圖片?看完這個教程你就會懂了! 下拉菜單黑乎乎的一片,如果加一個背景圖片確實增色不少: 具體方法: 1)首先安裝一個叫做xposed框架的程序.這個程序是 ...
  20. excel下拉菜單怎麼做,詳細教程

    這裡介紹創建Excel下拉菜單的4種快速方法 - 基於值列表,單元格區域,命名區域和動態下拉菜單,並且還提供了如何從另一個工作簿創建下拉菜單.Excel下拉菜單(又名下拉框或下拉列表)用於從預定義的項 ...