گروه مقاله : Bootstrap
تاريخ انتشار : 1394/06/01 - 16:59
كد :6068

پنل های Bootstrap

پنل در bootstrap عبارت است از یک جعبه کادر بندی شده که در اطراف محتوای آن مقداری padding وجود دارد.
 
 
 
پنل توسط کلاس panel. ایجاد می شود و محتوای داخل پنل دارای کلاس panel-body. می باشد:
 
<!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">
  <h2>Basic Panel</h2>
  <div class="panel panel-default">
    <div class="panel-body">A Basic Panel</div>
  </div>
</div>
 
</body>
</html>
 
 
می توانیم برای استایل دادن به رنگ پنل از کلاس panel-default. استفاده کنیم. آخرین مثال این صفحه را ملاحظه کنید تا با کلاس های متنی بیشتری آشنا شوید.
 
سر فصل پنل- Panel Heading
 
 
 
توسط کلاس  panel-heading. می توانیم یک سر فصل به پنل اضافه کنیم.
 
<!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">
  <h2>Panel Heading</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
  </div>
</div>
 
</body>
</html>
 
 
فوتر پنل- Panel Footer
 
 
 
کلاس panel-footer. یک فوتر به پنل اضافه می کند:
 
<!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">
  <h2>Panel Footer</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">Panel Content</div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>
 
</body>
</html>
 
 
گروه پنل- Panel Group
برای اینکه پنل های مختلف را با هم ترکیب کنید آنها را داخل یک <div> با کلاس panel-group. قرار دهید. 
کلاس panel-group. باعث می شود که bottom-margin هر پنل پاک شود.
 
<!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">
  <h2>Panel Group</h2>
  <p>The panel-group class clears the bottom-margin. Try to remove the class and see what happens.</p>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Header</div>
      <div class="panel-body">Panel Content</div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">Panel Header</div>
      <div class="panel-body">Panel Content</div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">Panel Header</div>
      <div class="panel-body">Panel Content</div>
    </div>
  </div>
</div>
 
</body>
</html>
 
پنل با کلاس های متنی
برای رنگی کردن پنل مورد نظر، از کلاس های متنی زیر استفاده کنید:
 
panel-default.
panel-primary.
panel-success.
panel-info.
panel-warning.
panel-danger.
 
مثال:
 
نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*