آموزش بوت استرپ – قسمت چهارم

بوت استرپ

با قسمت چهارم از سری آموزش بوت استرپ از سایت آموزش برنامه نویسی همراه شما عزیزان هستیم.
در این قسمت از آموزش بوت استرپ می خواهیم در مورد table یا همان جدول ها در بوت استرپ صحبت کنیم.
۱- نوع اول و در واقع ابتدایی ترین جدول در بوت استرپ دارای خاصیت padding روشن و خط های جدا کننده افقی است با اضافه کردن کلاس table. مشخص می شود که با کد زیر ایجاد می شود:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">

<h2>Basic Table</h2>



The .table class adds basic styling (light padding and only horizontal dividers) to a table:

            

<table class="table">

<thead>

<tr>

<th>Firstname</th>


<th>Lastname</th>


<th>Email</th>

      </tr>

    </thead>


<tbody>

<tr>

<td>John</td>


<td>Doe</td>


<td>john@example.com</td>

      </tr>


<tr>

<td>Mary</td>


<td>Moe</td>


<td>mary@example.com</td>

      </tr>


<tr>

<td>July</td>


<td>Dooley</td>


<td>july@example.com</td>

      </tr>

    </tbody>

  </table>

</div>


</body>
</html>

کد بالا جدول زیر را تولید می کند:
بوت استرپ

۲- نوع دوم از جدول های بوت استرپ جدول با ردیف های راه راه (یکی در میان رنگ ردیف های جدول متفاوت است) یا Striped Rows که با اضافه کردن کلاس table-striped. به جدول ایجاد می شود:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">

<h2>Striped Rows</h2>



The .table-striped class adds zebra-stripes to a table:

            

<table class="table table-striped">

<thead>

<tr>

<th>Firstname</th>


<th>Lastname</th>


<th>Email</th>

      </tr>

    </thead>


<tbody>

<tr>

<td>John</td>


<td>Doe</td>


<td>john@example.com</td>

      </tr>


<tr>

<td>Mary</td>


<td>Moe</td>


<td>mary@example.com</td>

      </tr>


<tr>

<td>July</td>


<td>Dooley</td>


<td>july@example.com</td>

      </tr>

    </tbody>

  </table>

</div>


</body>
</html>

کد بالا جدول زیر را تولید می کند:
بوت استرپ

۳- نوع سوم از این جدول ها، جدول با حاشیه یا همان Bordered Table که اضافه کردن کلاس table-bordered. به جدول ایجاد می شود:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">

<h2>Bordered Table</h2>



The .table-bordered class adds borders to a table:

            

<table class="table table-bordered">

<thead>

<tr>

<th>Firstname</th>


<th>Lastname</th>


<th>Email</th>

      </tr>

    </thead>


<tbody>

<tr>

<td>John</td>


<td>Doe</td>


<td>john@example.com</td>

      </tr>


<tr>

<td>Mary</td>


<td>Moe</td>


<td>mary@example.com</td>

      </tr>


<tr>

<td>July</td>


<td>Dooley</td>


<td>july@example.com</td>

      </tr>

    </tbody>

  </table>

</div>


</body>
</html>

کد بالا جدول زیر را ایجاد می کند:
بوت استرپ

۴- نوع چهارم از این جدول ها، جدول با خاصیت Hover Rows است که با رفتن موس روی هر ردیف رنگ آن ردیف از بقیه متمایز می شود که با اضافه کردن کلاس table-hover. به جدول ایجاد می شود:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">

<h2>Hover Rows</h2>



The .table-hover class enables a hover state on table rows:

            

<table class="table table-hover">

<thead>

<tr>

<th>Firstname</th>


<th>Lastname</th>


<th>Email</th>

      </tr>

    </thead>


<tbody>

<tr>

<td>John</td>


<td>Doe</td>


<td>john@example.com</td>

      </tr>


<tr>

<td>Mary</td>


<td>Moe</td>


<td>mary@example.com</td>

      </tr>


<tr>

<td>July</td>


<td>Dooley</td>


<td>july@example.com</td>

      </tr>

    </tbody>

  </table>

</div>


</body>
</html>

کد بالا جدولی به شکل زیر ایجاد می کند:
بوت استرپ

۵- نوع پنجم از این جدول ها، جدول فشرده شده است. در این جدول با کم کردن هر چه بیشتر فاصله بین خانه های جدول، جدول به صورت فشرده نمایش داده می شود:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">

<h2>Condensed Table</h2>



The .table-condensed class makes a table more compact by cutting cell padding in half:

            

<table class="table table-condensed">

<thead>

<tr>

<th>Firstname</th>


<th>Lastname</th>


<th>Email</th>

      </tr>

    </thead>


<tbody>

<tr>

<td>John</td>


<td>Doe</td>


<td>john@example.com</td>

      </tr>


<tr>

<td>Mary</td>


<td>Moe</td>


<td>mary@example.com</td>

      </tr>


<tr>

<td>July</td>


<td>Dooley</td>


<td>july@example.com</td>

      </tr>

    </tbody>

  </table>

</div>


</body>
</html>

کد بالا جدولی به شکل زیر ایجاد می کند:
بوت استرپ

۶- نوع ششم از این جدول جدولی با ردیف های رنگی می باشد که با اضافه کردن کلاس هایی مانند success. یا danger. یا info. یا warning. یا active. به تگ tr در جدول می توانید ردیف هایی رنگی در جدول داشته باشید.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">

<h2>Contextual Classes</h2>



Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.

            

<table class="table">

<thead>

<tr>

<th>Firstname</th>


<th>Lastname</th>


<th>Email</th>

      </tr>

    </thead>


<tbody>

<tr class="success">

<td>John</td>


<td>Doe</td>


<td>john@example.com</td>

      </tr>


<tr class="danger">

<td>Mary</td>


<td>Moe</td>


<td>mary@example.com</td>

      </tr>


<tr class="info">

<td>July</td>


<td>Dooley</td>


<td>july@example.com</td>

      </tr>

    </tbody>

  </table>

</div>


</body>
</html>

کد بالا جدول زیر را تولید می کند:
بوت استرپ

۷- و در نهایت آخرین نوع این جدول ها، جدول ریسپانسیو است که در موبایل و دستگاه های کوچکتر به خود جدول (نه به کل صفحه) اسکرول افقی اضافه می کند که با اضافه کردن کلاس table-responsive. به جدول ایجاد می شود:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">

<h2>Table</h2>



The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

                                                                                      

<div class="table-responsive">          

<table class="table">

<thead>

<tr>

<th>#</th>


<th>Firstname</th>


<th>Lastname</th>


<th>Age</th>


<th>City</th>


<th>Country</th>

      </tr>

    </thead>


<tbody>

<tr>

<td>1</td>


<td>Anna</td>


<td>Pitt</td>


<td>35</td>


<td>New York</td>


<td>USA</td>

      </tr>

    </tbody>

  </table>

  </div>

</div>


</body>
</html>

خب اینم از قسمت چهارم آموزش برنامه نویسی که جدول های بوت استرپ رو در این قسمت با هم دیدیم امیدوارم استفاده لازم رو برده باشید.
سایت آموزش برنامه نویسی

موفق باشید.

ممکن است به این موارد نیز علاقه مند باشید:

0 دیدگاه در “آموزش بوت استرپ – قسمت چهارم”

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کد امنیتی را در کادر زیر بنویسید *

به ما بپیوندید