گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/15 - 11:51
كد :7099

اضافه کردن دکمه ها و آیکن ها در Bootstrap

اضافه کردن دکمه ها
می توان از کلاس های دکمه داخل عناصر <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>
 
 
 
 
 
نظرات كاربران :