درک توییتر بوت استرپ 3 – قسمت دوم

درک توییتر بوت استرپ 3 – قسمت دوم

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

 

Header

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

در اینجا کلاس jumbotron را مشاهده می کنید که در داخل آن تگ های h1 و p و a اضافه کردیم. مرورگر خود را refresh کنید تا یک سربرگ زیبا مشاهده کنید! توجه کنید که خط های بالا را بعد از تگ بسته شده ی <nav> قرار دهید.

 

بخش محتوا

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

همانطور که شاید خبر داشته باشید بوت استرپ دارای 12 شبکه است. که در واقع %100 درست است. بعنی صفحه نمایش را به 12 قسمت مساوی تقسیم می کند و نیاز داریم که مشخص کنیم کدام عنصر HTML باید کدام بخش از شبکه را اشغال کند. بنابراین در یک کلام، هر عنصر حداقل یک شبک از سیستم شبکه را اشغال خواهد کرد.

حال بیایید نگاهی به نشانه گذاری های زیر کنیم:

در ابتدا از container استفاده کرده ام این کلاس باعث می شود در وسط مرورگر با عرض مناسب قرار گیرد، اگر می خواهید %100 عرض مرورگر را در بر گیرد می توانید به جای container از کلاس container-fluid استفاده کنید. آنگاه یک سطر جدید تعریف می کنیم. در مورد این نمونه کار، ما سه div داریم که همگی در داخل یک row هستند. بنابراین برای شروع یک خط جدید دیگر می توانید یک کلاس row دیگر به وب سایت اضافه کنید.

row در حال حاضر شامل سه تگ div با کلاس col-md-4 است. در اینجا عدن 4 به ما می گوید که چهار شبکه را اشغال می کند. بنابراین سه  تگ با چهار شبکه هر کدام 12 شبکه دیگر را می توانند اشغال کنند.

اطمینان حاصل کنید که بیشتر از 12 شبکه در یک سطر استفاده نکرده باشید در غیر این صورت وب سایت تراز نخواهد بود. در ادامه *-col-md به ما می گوید که در نمایشگرهای متوسط (992px<) شبکه ها در کنار هم قرار می گیرند ولی در دستگاه های کوچکتر بر روی همدیگر قرار می گیرند.

ما همچنین کلاس هایی برای صفحه نمایش های کوچک (*-sm-col) و صفحه نمایش بسیار کوچک (*-xs-col) داریم. امیدوارم که سیستم شبکه بندی بوت استرپ را درک کرده باشید.

حال که هر div را در جای مناسب قرار دادیم، می توانید محتوا را به دلخواه وارد کنید در اینجا از محوای Lorem ipsum استفاده کرده ام.  کلاس glyphicon-gift باعث می شود آیکن بزرگی برای هر gird تعیین کنیم، شما می توانید آیکون های مختلفی را از مستندات انتخاب و استفاده کنید. یا اگر دوست ندارید از آیکون استفاده کنید می توانید از تصاویر دلخواه درج کنید، برای این کار به عنوان مثال می توانید به جای span از تگ img استفاده کنید و آدرس دلخواه تصویر را مشخص کنید:

در بالا از کلاس img-responsive استفاده شده است که بدون در نظر گرفتن اندازه خود تصویر، خود را با اندازه div مادر هم اندازه می کند. در ادامه ما از تگ h3 و p برای عنوان و توضیحات استفاده کرده ایم و در آحر یک تگ a وجود دارد که نقش دکمه را بازی می کند. در اینجا ما برای کلاس a از btn-default استفاده کرده ایم، چند کلاس دیگر هم وجود دارد که می توانید به جای btn-default استفاده کنید:

  • btn-success
  • btn-info
  • btn-default
  • btn-warning
  • btn-danger

 

بخش Footer

بخش پاورقی تقریبا شبیه به قسمت قبل است:

ما از تگ HTML5 برای تعیین footer استفاده کرده ایم. آنگاه شامل یک container و row است. شما برای تمرین بیشتر می توانید همانند مثال قبل، footer را به سه قسمت تقسیم کنید و هر بخش را با محتوا دلخواه پر کنید. در این مثال من فقط خواسته ام نوشته ای را در یک سطر نمایش دهم.

 

کلاس های بیشتر Bootstrap 3

 

  • pre-scrollable. – اگر از تگ <pre> استفاده می کتید، می توانید از کلاس pre-scorllable. برای اضافه کردن نوار پیمایش استفاده کنید هنگامی که محتوای آن زیاد است.
  • table. – اگر از تگ <table> استفاده می کنید از کلاس table. برای زیبا جلوه دادن جدول استفاده کنید.
  • pull-left. و pull-right. – همانطور که حدس زده اید، این کلاس ها عناصر را به سمت چپ یا راست هل می دهد.
  • clearfix. – از این کلاس برای درست کردن عملیات شناور (float) بر روی هر عنصر استفاده می شود.

 

بنابراین دیدیم که اولین پروژه را با توییتر بوت استرپ ایجاد کنیم. انگیزه اصلی این است که درک کنید بوت استرپ چطور کار می کند. همانطور که می بینید تا حالا هیچ کد CSS خودمان ننوشتیم. بوت استرپ با استفاده از CSS ها و JS های از پیش تعریف شده کار می کند.

یکی از اشکالات بوت استرپ این است که اگر وب سایت شما با نسخه Bootstrap 2 ساخته شده باشد و قصد داشته باشید تمام CSS و JS را با Bootstrap 3 جایگزین کنید، طراحی وب سایت به هم می خورد. چون آنها برخی از نام های CSS را تغییر داده اند و عملیات ریسپانسیو کردن وب سایت را بهبود بخشیده اند.

شما همچنین می توانید CSS سفارشی خود را داشته باشید. ابتدا فایل css خود را با هر نامی ایجاد کنید، به عنوان مثال custom.css و فایل CSS بوت استرپ را داخل آن import کنید. آنگاه کلاس های سفارشی خود را بنویسید.

خوب! امیدوارم از از مقاله لذت داشته باشید. خوشحال می شم پیشنهادات و انتقادات خود را در بخش نظرات مطرح کنید.

 

بیشتر 

 

چند نکته ی قابل ذکر وجود دارد که می توانید آن را به بخش منو خود اضافه کنید:

نوار ناوبری به دو قسمت تقسیم شده است:

  1. نوار header
  2. نوار مطالب

 

navbar-header شامل خط های مخفی (hidden) شبیه به همبرگر است که فقط هنگامی که اندازه ی وب سایت کوچک است نمایش داده می شود می توانید این عمل را با کوچک کردن عرض پنجره مرورگر امتحان کنید.