سبد (0)

تبلیغات

بررسی container در بوت استرپ

ایجاد یک صفحه وب بوتسترپ از ابتدا

Wiki

در صفحات پیش رو به شما نشان خواهیم داد که چطور یک وب سایت بوت استرپ را از ابتدا ایجاد کنید.

ابتدا با یک صفحه ی HTML ساده شروع می کنیم و سپس اجزای بیشتری را اضافه می کنیم تا جایی که یک وب سایت کاربردی و واکنش گرا، داشته باشیم.

ابتدا با صفحه ی HTML زیر شروع می کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
</head>

<body>
  <h1>My first Bootstrap website!</h1> 
  <p>This page will grow as we add more and more components from Bootstrap...</p> 
  <p>This is a paragraph.</p> 
  <p>This is another paragraph.</p> 
  <p>This is a paragraph.</p> 
  <p>This is another paragraph.</p>
</body>
</html>

اضافه کردن بوتسترپ از یک CDN و قرار دادن عناصر در یک ظرف(container)

Wiki

اولین کاری که انجام می دهیم عبارت است از اضافه کردن بوتسترپ از یک CDN و همچنین لینک کردن جی کوئری.

سپس ما تمام عناصر درون عنصر <body>  را درون یک ظرف(container) قرار می دهیم.

مثال (اضافه کردن container)

<!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.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My first Bootstrap website!</h1> 
  <p>This page will grow as we add more and more components from Bootstrap...</p> 
  <p>This is another paragraph.</p> 
  <p>This is a paragraph.</p> 
  <p>This is another paragraph.</p>
</div>

</body>
</html>

خودتان امتحان کنید »

نکته: اگر می خواهید صفحه ی شما، تمام صفحه ی نمایش را پوشش دهد، می توانید به جای کلاس container از کلاس container-fluid استفاده کنید. 

مثال 

<!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.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My first Bootstrap website!</h1> 
  <p>This page will grow as we add more and more components from Bootstrap...</p> 
  <p>This is another paragraph.</p> 
  <p>This is a paragraph.</p> 
  <p>This is another paragraph.</p>
</div>

</body>
</html>

خودتان امتحان کنید »

آموزش صوتی Bootstrap

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان