سبد (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>

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

دیدگاه‌ها  

+2 # saye kian 1394-04-27 13:12
یک سوال که برای من پیش اومده این است که چرا خود شما برای سایتتان از بوت استرپ استفاده نمی کنید و آنرا ریسپانسیو نمی کنید
و یک سوال دیگر هم داشتم
وقتی که از کلاس کانتینر استفاده میکنیم جطور میتوانیم بگوییم که از اطراف بیشتر حاشبه بگذارد؛آخه حاشیه هاش خیلی کمه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # بوت استرپ 1397-04-15 13:54
خیلی خوب بود با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-04-27 13:46
ببینید سایت بیاموز از جوملا 2.5 استفاده می کنه. و همون طور که میدونید، در جوملا 2.5 هیچ نسخه ای از بوتسترپ وجود نداره که ما قالب رو بر اساس اون طراحی کنیم. ولی اگر که سیستم ما جوملا 3 بود اونوقت می شد از قالب protostar استفاده کرد و سایت رو ریسپانسیو کرد. این امکان ریسپانسیو بودن الان در جوملا 3 به بالا کاملا فراهم هست.
در مورد اضافه کردن حاشیه. اگر که منظورتون حاشیه ی داخلی یا همان padding است، فعلا کلاسی رو سراغ نداریم که به شما معرفی کنیم. تنها کاری که میشه کرد اینه که به صورت دستی به container مقداری padding بدهیم. که البته ممکن هست که در سیستم گرید(شبکه بندی) اختلال ایجاد کنه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

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

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

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

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