آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

شروع کار با Bootstrap

دوره های مرتبط با این مقاله

BootStrap چیست؟

  • BootStrap یک فریم ورک مجانی برای طراحی سریعتر و ساده ترِ وب می باشد.
  • BootStrap شامل دستوراتِ HTML و CSS برای تولید و ارائه ی تایپوگرافی (typography) ، فرم ها(forms) ، دکمه ها(buttons) ، جداول (tables) ، پیمایش (Navigation)، تصاویر(images)، و خیلی موارد دیگر از قبیل JavaScript Plugins می باشد که لازمه ی طراحی وب هستند.
  • BootStrap همچنین این امکان را فراهم می آورد که به راحتی طرح های Responsive را طراحی و اجرا نمایید.

طراحی Responsive (واکنش گرا) وب چیست؟

طراحی Responsive وب عبارت است از ایجاد وب سایت هایی که به طور اتوماتیک خود را طوری تنظیم می کنند که بر روی همه ی دستگاهها، از گوشی های کوچک گرفته تا کامپیوترهای رومیزی بزرگ، خوب و مقبول نمایش داده شوند.

تاریخچه ی BootStrap

BootStrap توسط Mark Otto و Jakob Thornton بر روی توییتر توسعه یافت و بعنوانِ یک محصول Open Source در آگوست سال 2011 در GitHub ایجاد گردید. در ژوئن 2014، BootStrap پروژه ی شماره 1 و محبوب ترین پروژه در Github بود.

چرا از BootStrap استفاده می کنیم؟

مزایای BootStrap
  • کاربری ساده: هرکسی با اطلاعاتِ اولیه از HTML و CSS می تواند از آن استفاده کند.
  • ویژگی Responsive: کدهای Responsive CSS در این فریم ورک بر روی همه ی تلفن ها، تبلت ها، و دسکتاب ها تنظیم می شود.
  • راه کارِ Mobile-First (اولویت موبایل): در BootStrap3 شیوه های mobile-first، بخشی از چهارچوب اصلی می باشند.
  • سازگاری با مرورگرها: BootStrap با تمامی مرورگرهای مدرن (Chrome, Firefox, Internet Explorer, Safari, Opera) سازگار و منطبق می باشد.

BootStrap از چه جایی قابل دسترسی است؟

دو راه برای شروعِ استفاده از BootStrap بر روی وبسایت وجود دارد. شما می توانید:

  • BootStrap را از آدرسِ getbootstrap.com دانلود کنید.
  • BootStrap را با استفاده از یک CDN در صفحه ی خود بگنجانید.

دانلود BootStrap

اگر می خواهید BootStrap را دانلود کرده و آن را در host ذخیره کنید، به آدرس getbootstrap.com بروید و دستورالعمل های ذکر شده را دنبال کنید.

BootStrap CDN

اگر تمایلی به دانلود BootStrap ندارید، می توانید آن را از یک CDN (شبکه ی تحویل محتوا) اضافه نمایید.
MaxCDN پشتیبانیِ CDN را برای Bootstrap's CSS و JavaScript فراهم می کند. همچنین می توان jQuery را نیز اضافه نمود:

                    
                

                    
                
                    
                
                

یک مزیتِ استفاده از BootStrap CDN

بسیاری از کاربران تا کنون، در هنگام بازدید از سایتی دیگر، BootStrap را از MaxCDN دانلود کرده اند. در نتیجه، زمانی که این کاربران از وبسایت شما دیدن می کنند، BootStrap از ذخیره گاه (cache) بارگذاری می شود که این خود منجر به تسریع در روند بارگذاری می گردد. همچنین، بیشترِ CDN ها این اطمینان را حاصل می کنند که هربار که یک کاربر فایلی را درخواست می کند، در نزدیک ترین سرورِ آنها ذخیره می شود که این امر مجددا منجر به افزایش سرعت در روندِ بارگذاری می گردد.

ایجاد نخستین صفحه ی وب با به کار گیری BootStrap

1.افزودن HTML5 اسنادی (doctype)

BootStrap از اِلِمان های HTML و ویژگی های CSS بهره می گیرد که نیازمندِ DOCTYPE HTML5 می باشند.
همیشه DOCTYPE HTML5 را در ابتدای صفحه و همراه با نشانه ی “lang” و مجموعه ی صحیح کاراکترها، اضافه کنید:

                  < !DOCTYPE html>
                  < html lang="en">
                        < head>
                            < meta charset="utf-8">
                        < /head>
                 < /html>
            
2.BootStrap3 به شیوه ی mobile-first می باشد

BootStrap3 به گونه ای طراحی شده است که برای دستگاه های موبایل، Responsive (واکنش گرا) می باشد. روش های Mobile-first بخشی از فریم ورکِ اصلی می باشند. برای اطمینان از Render صحیح و زومِ لمسی، تگِ ی زیر را داخلِ عنصرِ اضافه کنید:

                   
                

قسمت width=device-width پهنای صفحه را، به منظور تطبیق با پهنای صفحه ی مانیتور، تنظیم می کند (که بر اساسِ نوع دستگاه، متغیر خواهد بود).
بخش initial-scale=1 میزانِ بزرگنمایی اولیه را، زمانی که صفحه برای اولین بار توسط مرورگر بارگذاری می شود، تنظیم می نماید.

Container (دربردارنده ی محتوا)

BootStrap برای جا دادنِ محتوای سایت، نیازمندِ یک عنصرِ محتوایی یا Container می باشد.
دو کلاسِ Container برای این منظور وجود دارد:

  • کلاس .container یک کلاسِ Container Responsive با پهنای ثابت را فراهم می کند.
  • کلاس .container-fluid یک Container با پهنای کامل ایجاد می کند که تمامیِ پهنای صفحه نمایش را در بر می گیرد.
نکته:

Containerها لانه گزین (Nestable) نیستند (نمی توان یک Container را درونِ Container دیگری قرار داد). به عبارت دیگر، نمی توان Container ها را به صورت تو در تو به کار گرفت.

دو صفحه ی BootStrap اصلی

مثال پایین، کدِ صفحه ی BootStrap اصلی را، با استفاده از یک Responsive Container با پهنای ثابت، نشان می دهد:

نمونه یک

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

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

امتحان کنید

مثال پایین، با استفاده از یک Container که دارای پهنای کامل است کد مربوط به صفحه ی BootStrap اصلی را نشان می دهد:

نمونه دو

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

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

امتحان کنید
  • 3758
  •    910
  • تاریخ ارسال :   1395/09/25

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .