گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/15 - 11:51
كد :7099
اضافه کردن دکمه ها
می توان از کلاس های دکمه داخل عناصر <a>، <button>، یا <input> استفاده کرد.
مثال زیر یک دکمه ی جستجوی بزرگ به رنگ آبی روشن را در یک jumbotron قرار می دهد.
ما برای دستیابی به این افکت، از کلاس های btn-lg. و btn-info. استفاده می کنیم :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg">Search</a>
</div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
چرا داخل خصوصیت href لینک از علامت # استفاده می کنیم؟
زمانی که هیچ صفحه ای نداریم که به آن لینک دهیم، و نمی خواهیم که با پیغام "404" مواجه شویم، یک علامت # را به عنوان لینک قرار می دهیم.
اضافه کردن یک آیکن
Bootstrap همچنین 200 آیکن نمادین را ارائه می دهد.
برای نمایش دادن یک آیکن نمادین از کد ساده ی زیر استفاده کنید:
<span class="glyphicon glyphicon-print"></span>
کد بالا یک آیکن پرینت را برای ما نمایش می دهد : 
مثال زیر یک آیکن جستجو(Search) را به یک دکمه جستجو اضافه می کند:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
<a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>
</div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>