boostrap---btn

時間 2019-12-02

標籤 boostrap btn 欄目 C&C++ 简体版

原文原文鏈接

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

本教程演示：css

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

使用的版本：Bootstrap v2.3.2 。java

下面是頁面的截圖：jquery

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

這些東西很簡單，就簡單說幾個要點吧：框架

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

btn-small、btn-large等，能夠控制按鈕的大小；spa

btn-primary 、btn-danger 、btn-warning等，能夠改變按鈕的樣式風格，能夠按須要去使用這些class。htm

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

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

貼出所有代碼：

<!DOCTYPE html>

<html>

<head>

<title>bootstrap demo</title>

</head>

<body >

<br>

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

<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-inverse' href='javascript:;'>inverse</a>

</div>

<br>

按鈕組<br>

</div>

<br>

下拉菜單<br>

</ul>

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。