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>

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場