saeed410
13th December 2014, 01:54 AM
مقدمات بوت استرپ و طراحی واکنش گرا
به تور آموزشی بوت استرپ خوش آمدید. در این مجموعه آموزشی قصد داریم طراحی سایت
به وسیله بوت استرپ را آموزش بدیم. علاوه بر این طراحی واکنش گرا
یا Responsive Design هم مورد بحث و بررسی قرار میگیره. این مجموعه آموزشی با 1- مقدماتی در باره بوت استرپ شروع میشود ، که خود شامل چند بخشه. بعد از پایان مقدمات بوت استرپ سراغ 2- کار با بوت استرپ با استفاده از کلاسهای CSS میریم. بعد از آشنایی با کلاس های CSS استفاده شده در بوت استرپ و همچنین طراحی واکنش گرا آموزش را با بحث و گفتگو در باره 3- کامپوننت های بوت استرپ برای طراحی سایت واکنش گرا پیش میبریم. سعی میکنیم اکثر کامپوننت های مورد استفاده در بوت استرپ رو با یک مثال به صورت کامل توضیح بدیم. در بخش 4- در مورد پلاگین های بوت استرپ صحبت خواهیم کرد. و در آخر یک مثال کامل از طراحی سایت و طراحی واکنش گرا با استفاده از بوتسترپ را تقدیم میکنیم. امیدوارم مفید باشه و مورد استفاده همه قرار بگیره. قبل از یادگیری بوت استرپ به چه چیزهایی نیاز دارم؟
قبل از اینکه بخواهید کار با فریم وورک بوت استرپ را یاد بگیرید باید مفاهیم پایه موارد زیر را فراگرفته باشید :
HTML
CSS
JavaScript/Jquery
اگر با مقدمات مفاهیم عنوان شده در بالا کار نکرده اید ؛ پیشنهاد میکنیم قبل از یادگیری و بکارگیری بوتسترپ این مفاهیم را فراگیرید.
بوت استرپ چیست؟
بوت استرپ یک مجموعه رایگان از ابزار مورد نیازی برای طراحی و ایجاد وبسایت ها و وب اپلیکیشن ها است.
بوت استرپ شامل قالب های طراحی HTML و مبتنی بر CSS است که میتواند برای متن ها ، فرم ها ، عکس ها ، دکمه ها ، منو ها ، اسلایدرها و کامپوننت های دیگر استفاده شود.
بوت استرپ دارای افزونه های جاوااسکرپیتی است که به راحتی میتوانید آنها را استفاده کنید و با سفارشی سازی آنها به طراحی خود جلوه دهید.
بوت استرپ یک ابزار رایگان است که میتوانید از لینک زیر دانلود کنید. http://getbootstrap.com (http://getbootstrap.com)
تاریخچه بوت استرپ :
بوت استرپ به وسیله دو نفر از کارمندان توئیتر(Mark Otto و Jacob Thornton) برای ایجاد سازگاری بین ابزار مختلف استفاده شده در سایت توئیتر نوشته شده است. توئیتر قبل از بوت استرپ؛ از کتابخانه ها و ابزار زیادی استفاده کرده بود که هر کدام از آنها باعث ایجاد ناسازگاری می شدند و هزینه نگهداری بالا میرفت. به دلیل استقبال زیاد از بوت استرپ این محصول در سال 2011 به صورت کدباز در اختیار همه قرار گرفت.
چرا از بوت استرپ استفاده کنیم؟(مزایای بوت استرپ چیست؟)
رویکرد Mobile First : در طراحی بوت استرپ از رویکرد طراحی Mobile First ( موبایل در اولویت) استفاده میکند. اگر با این واژه آشنا نیستید اجازه دهید یک تعریف کلی از این واژه داشته باشیم : در این رویکرد عنوان میشود قبل از اینکه بخواهید یک وب سایت یا وب اپلیکیشن را برای سیستم های دسکتاپ طراحی کنید باید آنرا برای دستگاههای موبایل طراحی کنید. در باره رویکرد Mobile First گفته های زیادی وجود داره ولی در اینجا چون مورد بحث ما نیست ، اگر دوستان درخواست کردند یک مقاله جدا رو به توضیحات بیشتر در این زمینه اختصاص میدیم. برای درک بهتر تصویر زیر مربوط به طراحی افرادی است که وب سایت خود را با محوریت Desktop طراحی میکنند:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/001/DesktopApprouch.jpg
اما در رویکرد Mobile First ما چون با اولویت موبایل شروع به طراحی سایت خودمون میکنیم تصویر زیر رو داریم:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/001/MobileFirstAppraoch.jpg
پشتیبانی مرورگر ها : بوت استرپ توسط اکثر مرورگرهای محبوب پشتیبانی میشود.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/001/browsers.jpg
راحتی استفاده : با داشتن دانش جزئی در باره CSS و HTMLمیتوانید از بوتسترپ استفاده کنید. همچنین مستندسازی های بسیار جامعی در باره بوت استرپ در سایت رسمی این فریم وورک وجود دارد که میتوانید از آنها به عنوان راهنمایی برای طراحی سایت استفاده کنید.
طراحی واکنش گرا : بوت استرپ دارای ابزاری است که میتواند به طراحی واکنش گرا برای دستگاههای مختلف کمک کند. بوت استرپ به صورت پیش فرض دارای کلاسهایی است که برای چهار نوع صفحه نمایش با ابعاد مختلف راهکارهایی را دارد.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/001/responsiveDesign.jpg
بسته دانلود شده بوت استرپ شامل چه چیزهایی است؟
چهارچوب بندی (Scaffolding) : بوت استرپ یک ساختار اولیه فراهم میکند که شامل سیستم شبکه بندی ، استایل لینک ها ، پس زمینه ها و.... است. تمام این موارد در آینده به صورت مفصل توضیح داده خواهد شد.
CSS : بوت استرپ شامل کلاسهای CSS از پیش تعریف شده است که میتواند به کار شما سرعت ببخشد.
کامپوننت ها : بوت استرپ دارای یک سری کامپوننت های قابل استفاده مجدد است که برای ایجاد فونتهای زیبا ، منو ها ، پیغام های خطا و... استفاده میشود.
پلاگین های جاوا اسکریپت : بوت استرپ شامل پلاگین های Jquery است که میتوانید همه آنها را در وب سایت خود استفاده کنید یا هر یک از انها را به صورت سفارشی مورد استفاده قرار دهید.
قابلیت سفارشی سازی: با استفاده از کدمنبع که بوت استرپ در اختیار شما قرار میدهد میتوانید آنها را ویرایش و به صورت سفارشی شده استفاده کنید.
در قسمت بعدی در مورد ساختار فایلهای بوت استرپ ؛ همچنین سیستم شبکه بندی بوت استرپ صحبت خواهیم کرد.
استفاده از مطالب این سایت فقط با ذکر منبع مجاز است.
در گروه: مقدمات بوت استرپ (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/3/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE)
منبع: مقدمات بوت استرپ و طراحی واکنش گرا (http://sypna.ir/AllArticles/ID/1/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7)
- - - به روز رسانی شده - - -
شروع کار با بوت استرپ و طراحی واکنش گرا
در تاریخ 19 آذر , 1393 20:03
در آموزش قبل مقدمات بوت استرپ و طراحی واکش گرا (http://sypna.ir/AllArticles/ID/1/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7) را مورد بررسی قرار دادیم. در این آموزش میخواهیم روش های مختلف استفاده از بوت استرپ و محیط کلی آن را مورد بررسی قرار دهیم.
دانلود بوت استرپ
برای دانلود بوت استرپ به این آدرس بروید (http://getbootstrap.com/getting-started/#download)زمانی که این صفحه باز شود مطابق شکل زیر سه گزینه برای دانلود داریم:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/002/bootstrap-Download-Page.JPG
در اینجا ما روی دکمه Download Bootstrap کلیک میکنیم. گزینه های دیگر در ابتدای کار نیاز نیست. اگر با کد های Less کار کرده اید میتوانید این کد را دانلود کنید و با کامپایلر دلخواه خود تغییرات را در کد اعمال کنید. همچنین میتوانید کد Sass بوت استرپ را دانلود کنید. ما در این مجموعه آموزشی کار با CSS و جاوااسکریپت کامپایل شده را آموزش میدهیم. همچنین در یک یا چند مقاله کار با کد Sass را نیز آموزش خواهیم داد.
ساختار فایل بوت استرپ
بعد از دانلود بوت استرپ کامپایل شده سه پوشه خواهید دید که شامل فایلهای استایل دهی ، جاوااسکریپت و فونت ها هستند.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/002/Bootstrap-File-Structure.JPG
در پوشه CSS دوفایل Bootstrap.css و bootstrap.min.css با هم یکی هستند و فایل دوم فشرده شده و مینیفای شده ی فایل اول است. به همین صورت فایلهای همنامی دیگر نیز هم به صورت غیر فشرده وجود دارند ، هم به صورت فشرده. در پوشه fonts فونت glyphicons وجود دارد ؛ که این فونت فقط در پروژه های بوت استرپ به صورت رایگان وجود دارد. میتوانید از آیکن های زیبای این فونت به طور رایگان استفاده کنید.
قالب HTML برای استفاده از بوت استرپ
برای شروع ؛ ابتدا فایل فشرده دانلود شده را اکسترکت کنید. سپس پوشه های CSS,JS,Fonts را انتخاب کنید و به پوشه ایی انتقال دهید که میخواهید تمرینهای بوت استرپ خود را در آنجا انجام دهید.
حالا notepad رو باز کنید و کد زیر را داخل آن کپی کنید. از این به بعد در تمام صفحات باید این کدها رو به صورت پایه داشته باشید:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
حالا تگ های که ممکن در آنها ابهام وجود داشته باشه را توضیح میدیم:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
اگه یادتون باشه در قسمت قبل (http://sypna.ir/AllArticles/ID/1/categoryId/3/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7) گفتیم بوت استرپ دارای رویکرد Mobile First است. با استفاده از تگ متای بالا ، سند خودمون برای نمایش در انواع نمایشگرها آماده میکنیم. همچنین برای بعضی از موبایلها که امکان زوم کردن روی تصویر رو دارند هم ما مقدار اولیه Zoom رو با initial-scale=1.0 برابر با اندازه اصلی خودش مشخص کردیم.
در ادامه فایل bootstrap.min.css رو لینک دادیم به فایل خودمون.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
در کد بالا قابلیت های HTML5.0 و واکنش گرایی رو به IE8 اضافه میکنیم. در صورتی که مرورگر کاربر IE8 باشه از این دو فایل استفاده میشه. و در قسمت Body صفحه دو فایل جاوااسکریپت که مورد نیاز استفاده در بوت استرپ هستند رو اضافه کردیم. برای ذخیره این فایل ، از منوی File در notepad گزینه Save as رو بزنید و Save as type را روی All files بزارید. همچنین Encoding را روی UTF-8 بزارید. این فایل را با یک نام دلخواه در پوشه ایی که برای تمرین هاتون آماده کردید ذخیره کنید.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/002/index.JPG
استفاده از CDN ها :
اگر نمیخواهید به صورت دستی بوت استرپ را دانلود کنید و آنها را در داخل هاست خود آپلود و استفاده کنید میتوانید از CDN ها استفاده کنید. با استفاده از CDN ها میتوانید تمام موارد مورد نیاز بوت استرپ را به صفحه خودتون لینک کنید. بنابراین در کدهای بالا برای فایلهای bootstrap.min.css و bootstrap.min.js ، همچنین JQuery میتوانید از CDN زیر استفاده کنید:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script
قرار دادن کدها در کانتینر
برای استفاده از بوت استرپ هنگام اضافه کردن محتوا به بدنه صفحات خود آنها را داخل کانتینر ها قرار دهید. دو نوع کانتینر در بوت استرپ وجود دارد که میتوانید از آنها استفاده کنید:
1- کانتینر با کلاس .container که دارای عرض فیکس است به صورت زیر:
<div class="container">
محتوا
</div>
2- کانتینر با کلاس .container-fluid که دارای عرض کامل یا Full است. اگر از کلاس قبلی استفاده کنید مشاهد خواهید کرد که محتویات صفحه شما در نمایشگرهای رومیزی از کناره ها دارای فاصله است. در صورتی که نمیخواهید این فاصله وجود داشته باشد و محتویات به صورت تمام صفحه نمایش داده شوند از این کلاس استفاه کنید:
<div class="container-fluid">
...
</div>
در این قسمت اصول اولیه استفاده از بوت استرپ را فراگرفتیم. در قسمتهای بعد با کلاسهای بوت استرپ آشنا خواهیم شد.
در گروه: مقدمات بوت استرپ (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/3/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE)
منبع : شروع کار با بوت استرپ و طراحی واکنش گرا (http://sypna.ir/AllArticles/ID/2/%D8%B4%D8%B1%D9%88%D8%B9-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7)
- - - به روز رسانی شده - - -
آموزش بوت استرپ و طراحی واکنش گرا سیستم شبکه بندیدر این آموزش قصد داریم سیستم شبکه بندی بوت استرپ
را بحث کنیم. شبکه (Grid) چیست؟
با مراجعه به ویکی پدیا تعریف زیر را از شبکه داریم:
شبکه در طراحی گرافیکی به یک ساختار (معمولاً دو بعدی) گفته میشود که برای ایجاد محتوای ساخت یافته از خطوط مستقیم عمودی و افقی استفاه میکند. از این سیستم برای ایجاد لایه های متناسب با چاپ استفاده میشود. همچنین در طراحی وب برای ایجاد لایه های متناسب و سازگار با یکدیگر از سیستم شبکه بندی استفاده میشود.
سیستم شبکه بندی در بوت استرپ صفحه وب ما را به قسمت های مساوی تقسیم میکند. همانند یک برگه در نقشه کشی ؛ با این کار میتوانیم سازگاری و تناسب بین اشیاء مختلف در وب سایت خودمون رو حفظ کنیم.
سیستم شبکه بندی در بوت استرپ چیست؟
باتوجه به تعریف رسمی سایت بوت استرپ ؛ سیستم شبکه بندی در بوت استرپ به صورت زیر تعریف میشود:
بوت استرپ شامل سیستم شبکه بندی متحرک و با رویکردی Mobile First است که عرض صفحه را به 12 ستون مساوی تقسیم میکند. اندازه ستون ها باتوجه به عرض دستگاه کم و زیاد میشوند. بوت استرپ شامل کلاسهای از پیش تعریف شده ای است که با استفاده از آنها میتوانید به لایه بندی صفحات سرعت بخشید ، همچنین دارای میکسین هایی است که میتوانید لایه های سفارشی ایجاد کنید.
در مورد استراتژی Mobile First در قسمت های قبل صحبت شده است. در این روش طراحی ، طراح باید تمام تمرکز خود را روی دستگاه ها با عرض و اندازه های کوچک قرار دهد و لایه بندی و استایل را برای این نوع دستگاه ها انجام دهد ، سپس میتواند با استفاده از کوئری های مدیا برای دستگاههای بزرگتر مثل تبلت و کامپیوترهای رومیزی نیز ، طراحی خود را سازگار کند. اولویت اول در این روش طراحی دستگاههای موبایل هستند.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/bootstrap-Grid-System.JPG
بوت استرپ برای تمام ستونها ، کلاسهای از پیش تعریف شده ایی دارد. همچنین اسامی استفاده شده دارای ساختار هستندبنابراین استفاده از آنها و حفظ کردن آنها راحت است.
کلاسهای CSS برای شبکه بندی در بوت استرپ :
بوت استرپ برای 4 نوع دستگاه با اندازه های مختلف راهکارهایی دارد. کلاسهای ایجاد شده به صورت زیر هستند:
کلاس xs (برای تلفن های همرا ) - نام کامل : EXtra Small
کلاس sm (برای تبلتها )- نام کامل small
کلاس md (برای لپ تاپ ها و صفحه نمایش ها نسبتاً بزرگ) - نام کامل medium
کلاس lg (برای صفحه نمایش ها با اندازه های بزرگ ) - نام کامل large
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/bootstrp-Grid-System-features.JPG
قوانین استفاده از سیستم شبکه بندی :
در شبکه بندی بوت استرپ صفحه به سطرهایی تقسیم میشود که هر سطر به نوبه خود به 12 ستون مساوی تقسیم میشود. برای استفاده از این قابلیتها باید از div ها به شیوه درست استفاده کرد. باید سطرها را داخل کلاس .container قرار داد.
محتواها باید در داخل ستونها قرار بگیرند. و ستونها باید بلافاصله بعد از تعریف یک سطر داخل آن اولین تگ باشند
کلاسهای از پیش تعریف شده ایی مثل .row و .col-*-* برای لایه بندی سریع وجود دارند.
ساختار پایه کدهای Html برای استفاده از شبکه بندی:
<div class="container">
<div class="row">
<div class="col-*-*">
محتوا
</div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
از این ساختار باید داخل تگ Body خود استفاده کنید. در قسمت قبل ساختار کلی صفحه html را مورد بررسی قرار دادیم. در اینجا ساختار کلی داخل تگ body صفحه را مشخص کرده ایم. در اینجا کلاسهایی وجود دارند که با علامت ستاره(*) علامت دار شده اند. در این کلاسها بجای ستاره اول میتوانید اندازه دستگاه را بنویسید و بجای ستاره دوم تعداد ستونهای اشغال شده توسط محتوا.به عنوان مثال در Div زیر ما با قرار دادن md به جای ستاره اول میگوییم این اندازه برای دستگاههای متوسط است ، و اندازه ستون را 8 در نظر میگیریم:
<div class="col-md-8"></div>
در مثال زیر از لایه بندی ترکیبی استفاده شده است. به این صورت که برای دستگاههای خیلی کوچک 12 ستون و برای دستگاههای متوسط 6 ستون برای div در نظر گرفته شده است:
<div class="col-md-6 col-sm-12"></div>
برای لایه بندی ابتدا باید یک Div با کلاس container یا container-fluid داشته باشیم. سپس داخل این div یک سطر تعریف میکنیم که کلاس این div باید row باشد. در داخل هر سطر میتوانیم div های مختلفی داشته باشیم. و برای هر کدام تعیین کنیم چه تعداد ستون از 12 ستون را اشغال کنند. همچنین میتوانید از سیستم ستون بندی به صورت سلسله مراتبی نیز استفاده کنید.
به عبارت دیگر هر ستون را میتوان به 12 ستون تقسیم کرد. در ادامه با چند مثال دیگر کار فرآیند لایه بندی را بیشتر توضیح میدهیم:
1-مثال اول استفاده از بوت استرپ :
در این مثال یک سطر تعریف میکنیم که داخل آن دو ستون با اندازه های برابر هر کدام 6 ستون را اشغال میکنند. کد کامل صفحه به صورت زیر است. این کد را داخل فایل index.html که در قسمت قبل ایجاد کرده اید کپی کنید و ذخیره کنید:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>محتوا
</p>
<p>محتوا
</p>
</div>
<div class="col-md-6" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>محتوا
</p>
<p>
محتوا </p>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
راست به چپ کردن تمام آیتم ها و سازگاری بوت استرپ با فارسی:
برای سازگاری کامل با فارسی و راست به چپ کردن ، نیاز به کار زیادی نیست. در واقع این کار قبلاً صورت گرفته است. برای اینکه پروژه های بوت استرپ شما از فارسی پشتیبانی کند کافی است این فایل را دانلود کنید (http://www.irwebdesign.ir/wp-content/uploads/bootstrap-rtl.min_.css) و بعد از استفاده از فایل css بوت استرپ اصلی این فایل را نیز به پروژه اضافه کنید. به صورت زیر:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-rtl.min_.css" rel="stylesheet">
تصویر دموی این کد پس از استفاده از استایل شیت فارسی به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/demo-Bootstrap-Example1.JPG
در صورتی که میخواهید فاصله های کناری در مرورگر وجود نداشته باشد و صفحه به صورت عرض کامل نمایش داده شود بجای استفاده از کلاس container از کلاس container-fluid استفاده کنید.
2- مثال دوم استفاده از بوت استرپ :
فرض کنید میخواهیم صفحه ایجاد کنیم که در دستگاههای کوچک (sm) به صورت 2 ستونی باشد. همچنین یک ستون 75 درصد از عرض صفحه را اشغال کند و ستون دیگر 25 درصد از عرض صفحه را .
[*=right]نکته : عرض دستگاههای کوچک از 768 پیکسل تا 991 پیکسل است.
[*=right]برای اختصاص کلاسها به دستگاههای کوچک باید از کلاسهای col-sm-colspan استفاده کنیم.
بنابراین برای این مثال باید div هایی که دو ستون را تعریف میکنند به صورت زیر باشند:
<div class="col-sm-3">محتوا</div>
<div class="col-sm-9">محتوا</div>
کد کامل این صفحه به صورت زیر است:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-rtl.min_.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">
<p>
محتوا.</p>
</div>
<div class="col-sm-9" style="background-color:lavenderblush;">
<p>محتوا</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
در این کد به دلیل اینکه ما از کلاس container-fluid استفاده کرده ایم محتویات ما به صورت تمام صفحه نمایش داده میشوند. همچنین مادامی که عرض صفحه نمایش کاربر بیشتر از 768 پیکسل باشد تصویر به صورت زیر نمایش داده میشود:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/demo-Bootstrap-Example2.JPG
اما اگر عرض صفحه نمایش کوچکتر از 768 پیکسل شود تمام ستون ها به صورت پشته نمایش داده میشوند:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/demo-Bootstrap-Example2-1.JPG
مثال 3 استفاده از بوت استرپ : دستگاههای متوسط
در مثال قبل دو div ایجاد کردیم که در دستگاههای کوچک به صورت 25 -75 در کنار یکدیگر قرار داشتند. اما اگه دقت کنید این چینش در دستگاههای متوسط زیاد جالب به نظر نمیرسه. در اینجا قصد داریم همان مثال قبل را به گونه ایی تغییر دهیم که در دستگاههای متوسط اندازه ستونها بایگدیگر برابر باشند. برای این کار میتوانیم از کلاس col-md-6 استفاده کنیم .بنابراین در اینجا فقط کافیست دو div ایجاد شده را به صورت زیر تغییر دهید:
<div class="col-sm-3 col-md-6">محتوا</div>
<div class="col-sm-9 col-md-6">محتوا</div>
بعد از اعمال این تغییرات و ذخیره آنها ، صفحه index.html را در مرورگر باز کنید و اندازه مرورگر را کوچک و بزرگ کنید.
[*=right]نکته: اندازه عرض صفحه نمایش در دستگاههای متوسط در بوت استرپ 992 پیکسل تا 1199 پیکسل مشخص شده است.
[*=right]برای استفاده از کلاسهای بوت استرپ برای استایل دهی در دستگاههای متوسط از کلاسهای col-md-span استفاده میکنیم.
مثال 4 استفاده از بوت استرپ : دستگاههای بزرگ
در مثال قبل اندازه ستونها در دستگاههای متوسط را با هم برابر کردیم. در این مثال میخواهیم اندازه یک ستون را در دستگاههای بزرک به 4 و ستون دیگر را به 8 تغییر دهیم.
[*=right]نکته :اندازه عرض صفحه نمایش در دستگاههای بزرگ در بوت استرپ بیشتر از 1200 پیکسل است.
[*=right]برای استفاده از کلاسهای بوت استرپ برای استایل دهی در دستگاههای بزرگ از کلاسهای col-lg-span استفاده میکنیم.
بنابراین کافی است تغییرات زیر را اعمال کنیم:
<div class="col-sm-3 col-md-6 col-lg-4">محتوا</div>
<div class="col-sm-9 col-md-6 col-lg-8">محتوا</div>
کد کامل این صفحه بعد از اعمال تغییرات به صورت زیر خواهد بود:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-rtl.min_.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:lavender;">
<p>محتوا.</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:lavenderblush;">
<p>محتوا.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
در این مثال صفحه ایی با دو ستون داریم که در دستگاههای بسیار کوچک با عرض کمتر از 768 پیکسل تمام ستون ها روی هم و به صورت پشته نمایش داده میشوند. در دستگاههای با اندازه بزرگتر از 768 پیکسل و کوچکتر از 991 پیکسل ستون ها در کنار یک دیگر و به صورت 25%- 75 % قرار میگیرند. در دستگاههای با اندازه بزرگتر از 992 پیکسل و کوچکتر از 1199 پیکسل به صورت 50 % -50 % در کنار یکدیگر قرار میگیرند. و در دستگاههایی که عرض آنها بیشتر از 1200 پیکسل است به صورت 33%-66% در کنار یکدیگر قرار میگیرند.
در آموزشهای بعدی مثال های بیشتری از سیستم شبکه بندی خواهیم زد .همچنین بقیه کلاسهای css مورد استفاده برای استایل دهی به اشیاء را بررسی خواهیم کرد.
در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع : سیستم شبکه بندی بوت استرپ (http://sypna.ir/AllArticles/ID/3/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%B4%D8%A8%DA%A9%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
- - - به روز رسانی شده - - -
آموزش بوت استرپ و طراحی واکنش گرا مثالهای سیستم شبکه بندی
در این قسمت مثالهای بیشتری از سیستم شبکه بندی میزنیم تا با نحوه کار بیشتر آشنا شوید.در تمام مثالهای زیر باید کد نوشته شده را داخل کلاس container یا container-fluid قرار دهیم:
1- سه ستون برابر :
در کد زیر ما سه ستون با هم برابر در تبلت ها ایجاد میکنیم. در دستگاههای بزرگتر از تبلت اندازه ستون ها با همان ضریب بزرگتر میشود.ودر دستگاهای بسیار کوچک یا موبایل که کمتر از 768 پیکسل عرض دارند ؛ تمام ستون ها به صورت پشته و در روی هم قرار میگیرند.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
2- سه ستون نابرابر
در کد زیر سه ستون ایجاد میشود که عرض های مختلفی دارند. این ستون ها برای تبلت ترازبندی شده اند. همچنین در دستگاههای بزرگتر به همان نسبت بزرگ میشوند. در دستگاهای بسیار کوچک به صورت خودکار تمام ستون ها به صورت پشته روی هم قرار میگیرند.
<div class="row">
<div class="col-sm-3">.col-md-3</div>
<div class="col-sm-6">.col-md-6</div>
<div class="col-sm-3">.col-md-3</div>
</div>
3- دو ستون نابرابر
در کد زیر دو ستون نابرابر ایجاد کرده ایم که برای تبلت ترازبندی شده اند و در دستگاههای بزرگتر به همان نسبت تغییر پیدا میکنند. همچنین در موبایل به صورت خودکار به صورت پشته روی هم قرار میگیرند.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
4- دو ستون نابرابر به صورت سلسله مراتبی (تودرتو)
در کد زیر دو ستون برای دستگاه تبلت با اندازه ها 4 و 8 تعریف شده است. همچنین در داخل ستونی که اندازه 8 دارد دو ستون دیگر تعریف کردیم. هر ستون بعد از تقسیم خود به 12 قسمت مساوی تقسیم میشود. این اندازه ها برای تبلت ترازبندی شده اند و در دستگاههای بزرگتر به همان نسبت تغییر پیدا مکینند. همچنین در موبایل به صورت خودکار به صورت پشته روی هم قرار میگیرند:
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
5- ترکیبی : موبایل و دسکتاپ :
سیستم شبکه بندی در بوت استرپ 4 نوع کلاس دارد : xs برای دستگاههای موبایل ، sm برای تبلت ، md دسکتاپ و lg دسکتاپ های بزرگ. از این کلاسها میتوانید به صورت ترکیبی استفاده کنید. در این صورت قالب شما دارای سازگاری و انعطاف پذیری بالایی خواهد بود.
نکته : هر کلاس به همان نسب در کلاس های بزرگتر خود ایجاد میشود. به عبارت دیگر اگر شما میخواهید ستونی با اندازه 6 در دستگاههای sm داشته باشید و همین ستون در دستگاههای md نیز با اندازه 6 است ؛ کافی است فقط از کلاس col-sm-6 استفاده کنید. در این حالت اگر از کلاس md استفاده نکنید به همان نسبت در دستگاه بزرگتر ایجاد میشود:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
6- ترکیبی : موبایل ، تبلت ، و دسکتاپ :
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
7- کلاس clearfix :
از این کلاس برای پاک کردن و نال کردن مقدار float مربوط به div ها استفاده میشود. در مثال زیر 4 ستون هم اندازه در دستگاههای کوچک داریم. که اندازه هر ستون در دستگاههای sm برابر با 3 است. میخواهیم این 4 ستون را به صورتی قرار دهیم که در دستگاههای موبایل xs هر دو ستون در یک سطر قرار بگیرند. در این حالت از یک div با کلاس clearfix استفاده کرده ایم. همچنین به دلیل اینکه میخواهیم این تگ فقط برای دستگاههای موبایل اجرا شود از کلاس visible-xs برای نمایانی این تگ فقط در دستگاههای xs استفاده کرده ایم:
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
نکته : کلاس visible-device را میتوانید در 4 نوع نمایشگر استفاده کنید. از این کلاس برای نمایانی فقط در کلاس نام برده استفاده میشود. به عنوان مثال اگر میخواهید یک تگ فقط در دستگاههای xs نمایش داده شود این کلاس را به تگ خود اضافه کنید:visible-xs در صورتی که میخواهید علاوه بر دستگاههای xs در دستگاههای md نیز نمایش داده شود این کلاس را نیز میتوانید به صورت ترکیبی استفاده کنید : visible-md
8- جابجاسازی یا Offsetting به ستون ها :
برای جابجا کردن یک ستون از کلاس .col-md-offset-device استفاده میشود. که به جای device میتوانید مقادیر xs,sm,md,lg را قرار دهید. در کد زیر دو ستون با اندازه های 5 در دستگاههای sm ایجاد کرده ایم. در اینجا میخواهیم یکی از ستونها در دستگاههای sm 2 واحد جابجا شود. کد این مثال به صورت زیر است :
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
برای درک بهتر مثال روی این دکمه کلیک کنید (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex8&stacked=h) و صفحه مرورگر خود را تغییر اندازه دهید.
9 - تغییر ترتیب قرار گیری ستونها
برای تغییر ترتیب ستون ها میتوانید از کلاسهای col-device-push-span و col-device-pull-span استفاده کنید. برای درک بهتر کد زیر را بتویسید و اجرا کنید .یا دموی آنلاین آنرا مشاهده کنید. (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex9&stacked=h)
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>
در این قسمت روشهای مختلف استفاده از سیستم شبکه بندی در
بوت استرپ و طراحی واکنش گرای
صفحات را یاد گرفتیم. در قسمت بعد با کلاسهای بیشتری از بوت استرپ آشنا خواهیم شد.
در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع : مثالهای شبکه بندی در بوت استرپ (http://sypna.ir/AllArticles/ID/4/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%D9%85%D8%AB%D8%A7%D9%84%D9%87%D8%A7%DB%8C-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%B4%D8%A8%DA%A9%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
- - - به روز رسانی شده - - -
آموزش بوت استرپ و طراحی واکنش گرا نمایش متن ها و استایل دهی
در این قسمت روش استایل دهی به متن های مختلف دربوت استرپرا بررسی میکنیم.با استفاده از این کلاسها فرآیند
طراحی سایت
آسانتر خواهد شد. همچنین کلاسهایی وجود دارند که با استفاده از آنها میتوانید تعیین کنید اشیاء شما در کدام یک از دستگاهها قابل نمایش باشد و یا در کدامیک نمایش داده نشود. به این ترتیب میتوانید صفحات خود را واکنش گرا
کنید. تنظیمات پیش فرض :
بوت استرپ به صورت پیش فرض از فونتهای Helvetica Neue, Helvetica, Arial, and sans-serif استفاده میکند. همچنین اندازه فونت همه متن ها font-size=14px است که فاصله بین خطوط یا line-height: 1.428 است. این تنظیمات در تمام تگ body و پاراگراف ها اعمال میشود. همچنین تگ های پاراگراف p از پایین به اندازه نصف فاصله خطوط مارجین دارند که بصورت پیشفرض 10px است.
هدینگ ها در بوت استرپ :
کد:
<div class="container">
<h1>هدینگ نو اول (36px)</h1>
<h2>هدینگ نوع دوم (30px)</h2>
<h3>هدینگ نوع سوم (24px)</h3>
<h4>هدینگ نوع چهارم (18px)</h4>
<h5>هدینگ نوع پنجم (14px)</h5>
<h6>هدینگ نوع ششم (12px)</h6>
</div>
تصویر دمو:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/heading-Bootstrap-demo.JPG
تگ small در بوت استرپ :
با استفاده از این تگ میتوانید متن ثانویه ایی با ابعاد کوچکتر از تگ پدر خود ایجاد کنید.
<div class="container">
<h1>هدینگ نو اول (36px) <small>متن ثانویه</small></h1>
<h2>هدینگ نوع دوم (30px) <small>متن ثانویه</small></h2>
<h3>هدینگ نوع سوم (24px) <small>متن ثانویه</small></h3>
<h4>هدینگ نوع چهارم (18px) <small>متن ثانویه</small></h4>
<h5>هدینگ نوع پنجم (14px) <small>متن ثانویه</small></h5>
<h6>هدینگ نوع ششم (12px) <small>متن ثانویه</small></h6>
</div>
تصویر نمونه :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/small-tag-bootstrap-demo.JPG
تگ mark در بوت استرپ :
با استفاده از این تگ میتوانید یک قسمت از متن را پر رنگ تر کنید.مثال:
<div class="container">
<h1>متن هایلایت</h1>
<p>این روزها استفاده از <mark>بوت استرپ و طراحی واکنش گرا </mark> رواج یافته است.</p>
</div>
تصویر نمونه :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/mark-tag-bootstrap-demo.JPG
تگ abbr در بوت استرپ :
از این تگ برای ایجاد کلمات مختصر به صورت tooltip استفاده میشود.
کد :
<div class="container">
<h1>اختصارو کوتاه سازی </h1>
<p>شرکت <abbr title="سیستم پردازان نوین آساک ">سیپنا</abbr> خدمات سئو ارائه میدهد.</p>
</div>
تصویر نمونه این کد :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/abbr-tag-bootstrap-demo.jpg
نقل قول با استفاده از blockquote در بوت استرپ :
کد :
<div class="container">
<h1>نقل قول</h1>
<blockquote>
<p>بوت استرپ در سال 2011 در اختیار همه قرار گرفت</p>
<footer>برگرفته از سایت بوت استرپ </footer>
</blockquote>
</div>
تصویر نمونه:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/blockqoute-tag-bootstrap-demo.JPG
تگ dl در بوت استرپ :
برای ایجاد لیستی از کلمات و تعریف آنها استفاده میشود.مثال :
<div class="container">
<h1>لیست کلمات</h1>
<dl>
<dt>قهوه </dt>
<dd>- نوشیدنی سیاه و داغ</dd>
<dt>شیر</dt>
<dd>- نوشیدنی سفید و سرد</dd>
</dl>
</div>
تصویر نمونه این کد :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/dl-tag-bootstrap-demo.JPG
تگ code در بوت استرپ :
برای جداسازی بعضی از قسمت های متن استفاده میشود .مثال :
<div class="container">
<p>تگ های : <code>span</code>,
<code>section</code>,
و <code>div</code> یک بخش مجزا را در اسناد html تعریف میکنند .</p>
</div>
تصویر نمونه :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/code-tag-bootstrap-demo.JPG
تگ kbd در بوت استرپ :
برای نمایش کلید های کیبورد میتوانید از این تگ استفاده کنید :
<div class="container">
<p>از کلیدهای ترکیبی<kbd>ctrl + p</kbd>
برای باز شدن پنجره چاپ استفاده کنید.</p>
</div>
تصویر نمونه :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/kbd-tag-bootstrap-demo.JPG
کلاسهای رنگ بندی متن در بوت استرپ:
کلاسهای زیر به صورت پیش فرض در بوت استرپ برای رنگ بندی متن ها مورد استفاده قرار میگیرند: .text-muted, .text-important, .text-success, .text-info, .text-warning, , .text-danger
کد :
<div class="container">
<p class="text-muted">این متن ضعیف شده است.</p>
<p class="text-primary">این متن مهم است.</p>
<p class="text-success">این متن پیام موفق است..</p>
<p class="text-info">این متن اطلاعات را نشان میدهد.</p>
<p class="text-warning">این متن اخطار را نشان میدهد.</p>
<p class="text-danger">این متن خطر را نشان میدهد.</p>
</div>
تصویر نمونه این کد :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/text-color-bootstrap-demo.JPG
رنگ های پس زمینه متن در بوت استرپ :
کلاسهای زیر برای رنگ بندی پس زمینه متن ها مورد استفاده قرار میگیرند : .bg-important, .bg-success, bg-info, bg-warning, ,.bg-danger
مثال :
<div class="container">
<p class="bg-primary">این متن مهم است.</p>
<p class="bg-success">این متن پیام موفق است.</p>
<p class="bg-info">این متن اطلاعات را نشان میدهد.</p>
<p class="bg-warning">این متن یک اخطار را نشان میدهد.</p>
<p class="bg-danger">این متن خطر را نشان میدهد.</p>
</div>
تصویر نمونه این کد به صورت زیر است :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/bg-color-bootstrap-demo.JPG
در این قسمت اکثر کلاسهای مهم برای استایل دهی به متن ها را در بوت استرپ یاد گرفتیم. برای دیدن یک مرجع کامل از این کلاسها میتوانید به این آدرس مراجعه کنید: مرجع کامل استایلهای متن در بوت استرپ (http://www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp)
در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع : استایل دهی به متن ها در بوت استرپ (http://sypna.ir/AllArticles/ID/5/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D9%85%D8%AA%D9%86-%D9%87%D8%A7-%D9%88-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%AF%D9%87%DB%8C)
- - - به روز رسانی شده - - -
آموزش بوت استرپ و طراحی واکنش گرا جدول ها
در این قسمت با کلاسهای مختلف CSS برای ایجاد جداول اشنا خواهیم شد.در گذشته استفاده از جدول ها درطراحی سایت بسیار پر کاربرد بود. از جدول ها برای ایجاد لایه بندی صفحات استفاده میشد. اما مشکلی که جدول ها به وجود می آوردند این بود که تا زمان لود کامل جدول مرورگر توانای رندر کردن اون صفحه رو نداشت. با پیشرفته تر شدن طراحی سایت و استفاده از div ها ؛ کاربرد جداول به ایجاد لیست های قیمت و ... محدود شده است.
بوت استرپ
مجموعه ایی از کلاسهای از پیش تعریف شده را برای ما ایجاد کرده است که میتوانیم به وسیله آنها جدولها را استایل دهی کنیم. همچنین بوت استرپ دارای کلاسی است که با استفاده از آن میتوان جداول را واکنش گرا
کرد. جدول ساده در بوت استرپ :
برای ایجاد یک جدول ساده در بوت استرپ کافی است از کلاس .table استفاده کنیم. مثال:
<table class="table">
<caption>جدول ساده</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
</tbody>
</table>
تصویر دموی این کد:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/simple-table-bootstrap-demo.JPG
جدول با سطرهای راه راه در بوت استرپ :
برای ایجاد جدولی که سطرهای آن یک درمیان با رنگ های متفاوت باشند میتوانید از کلاس table-striped استفاده کنید. مثال :
<div class="container">
<table class="table table-striped">
<caption >جدول راه راه</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر این کد به صورت زیر است :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/striped-table-bootstrap-demo.JPG
جدول حاشیه دار در بوت استرپ :
برای ایجاد جدول حاشیه دار در بوت استرپ از کلاس table-bordered استفاده میکنیم. مثال :
<div class="container">
<table class="table table-bordered">
<caption >جدول حاشیه دار</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر نمونه این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/bordered-table-bootstrap-demo.JPG
ایجاد جدول با سطر های hover در بوت استرپ :
برای ایجاد جدولی که هنگام رفتن موس روی یک سطر ، سطر مورد نظر تغییر رنگ پیدا کند از کلاس table-hover استفاده میکنیم.مثال :
<div class="container">
<table class="table table-hover">
<caption style="text-align:right">جدول Hover</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر دموی این کد:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/hover-table-bootstrap-demo.JPG
جدول فشرده در بوت استرپ :
با استفاده از کلاس table-condensed میتوانید جدول خود را به صورت فشرده تر ایجاد کنید. در این حالت حاشیه بین سلول ها حذف میشود. همچنین padding بین سطر نصف میشود. مثال :
<div class="container">
<table class="table ttable-condensed">
<caption>جدول فشرده</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر دموی این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/condensed-table-bootstrap-demo.JPG
کلاسهای رنگ بندی پس زمینه جدول در بوت استرپ :
از کلاسهای active , success, info , warning , danger میتوانید برای رنگ بندی یک سطر یا سلول استفاده کنید.مثال :
<div class="container">
<table class="table ttable-condensed">
<caption>جدول با پس زمینه های متفاوت</caption>
<thead>
<tr class="active">
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr class="info">
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr class="warning">
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr class="danger">
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر دموی این کد به صورت زیر است :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/background-table-bootstrap-demo.JPG
ایجاد جدول واکنش گرا در بوت استرپ :
برای ایجاد یک جدول واکنش گرا در بوت استرپ کافی است جدولی که دارای کلاس table است را داخل یک div با کلاس table-responsive قرار دهیم. در این حالت در صورتی که صفحه نمایش تغییر پیدا کند و کوچک شود جدول نیز متناسب با آن تغییر پیدا میکند. همچنین در دستگاههای بسیار کوچک سلول ها روی هم قرار میگیرند. کافیست تمام جدول خود را داخل تگ زیر قرار دهید :
<div class="table-responsive">
کد ایجاد جدول و محتواها
</div>
در قسمت بعد با کلاسهای استایل دهی فرم ها در بوت استرپ آشنا خواهیم شد.
در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع : طراحی سایت (http://sypna.ir/WebDesign)
به تور آموزشی بوت استرپ خوش آمدید. در این مجموعه آموزشی قصد داریم طراحی سایت
به وسیله بوت استرپ را آموزش بدیم. علاوه بر این طراحی واکنش گرا
یا Responsive Design هم مورد بحث و بررسی قرار میگیره. این مجموعه آموزشی با 1- مقدماتی در باره بوت استرپ شروع میشود ، که خود شامل چند بخشه. بعد از پایان مقدمات بوت استرپ سراغ 2- کار با بوت استرپ با استفاده از کلاسهای CSS میریم. بعد از آشنایی با کلاس های CSS استفاده شده در بوت استرپ و همچنین طراحی واکنش گرا آموزش را با بحث و گفتگو در باره 3- کامپوننت های بوت استرپ برای طراحی سایت واکنش گرا پیش میبریم. سعی میکنیم اکثر کامپوننت های مورد استفاده در بوت استرپ رو با یک مثال به صورت کامل توضیح بدیم. در بخش 4- در مورد پلاگین های بوت استرپ صحبت خواهیم کرد. و در آخر یک مثال کامل از طراحی سایت و طراحی واکنش گرا با استفاده از بوتسترپ را تقدیم میکنیم. امیدوارم مفید باشه و مورد استفاده همه قرار بگیره. قبل از یادگیری بوت استرپ به چه چیزهایی نیاز دارم؟
قبل از اینکه بخواهید کار با فریم وورک بوت استرپ را یاد بگیرید باید مفاهیم پایه موارد زیر را فراگرفته باشید :
HTML
CSS
JavaScript/Jquery
اگر با مقدمات مفاهیم عنوان شده در بالا کار نکرده اید ؛ پیشنهاد میکنیم قبل از یادگیری و بکارگیری بوتسترپ این مفاهیم را فراگیرید.
بوت استرپ چیست؟
بوت استرپ یک مجموعه رایگان از ابزار مورد نیازی برای طراحی و ایجاد وبسایت ها و وب اپلیکیشن ها است.
بوت استرپ شامل قالب های طراحی HTML و مبتنی بر CSS است که میتواند برای متن ها ، فرم ها ، عکس ها ، دکمه ها ، منو ها ، اسلایدرها و کامپوننت های دیگر استفاده شود.
بوت استرپ دارای افزونه های جاوااسکرپیتی است که به راحتی میتوانید آنها را استفاده کنید و با سفارشی سازی آنها به طراحی خود جلوه دهید.
بوت استرپ یک ابزار رایگان است که میتوانید از لینک زیر دانلود کنید. http://getbootstrap.com (http://getbootstrap.com)
تاریخچه بوت استرپ :
بوت استرپ به وسیله دو نفر از کارمندان توئیتر(Mark Otto و Jacob Thornton) برای ایجاد سازگاری بین ابزار مختلف استفاده شده در سایت توئیتر نوشته شده است. توئیتر قبل از بوت استرپ؛ از کتابخانه ها و ابزار زیادی استفاده کرده بود که هر کدام از آنها باعث ایجاد ناسازگاری می شدند و هزینه نگهداری بالا میرفت. به دلیل استقبال زیاد از بوت استرپ این محصول در سال 2011 به صورت کدباز در اختیار همه قرار گرفت.
چرا از بوت استرپ استفاده کنیم؟(مزایای بوت استرپ چیست؟)
رویکرد Mobile First : در طراحی بوت استرپ از رویکرد طراحی Mobile First ( موبایل در اولویت) استفاده میکند. اگر با این واژه آشنا نیستید اجازه دهید یک تعریف کلی از این واژه داشته باشیم : در این رویکرد عنوان میشود قبل از اینکه بخواهید یک وب سایت یا وب اپلیکیشن را برای سیستم های دسکتاپ طراحی کنید باید آنرا برای دستگاههای موبایل طراحی کنید. در باره رویکرد Mobile First گفته های زیادی وجود داره ولی در اینجا چون مورد بحث ما نیست ، اگر دوستان درخواست کردند یک مقاله جدا رو به توضیحات بیشتر در این زمینه اختصاص میدیم. برای درک بهتر تصویر زیر مربوط به طراحی افرادی است که وب سایت خود را با محوریت Desktop طراحی میکنند:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/001/DesktopApprouch.jpg
اما در رویکرد Mobile First ما چون با اولویت موبایل شروع به طراحی سایت خودمون میکنیم تصویر زیر رو داریم:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/001/MobileFirstAppraoch.jpg
پشتیبانی مرورگر ها : بوت استرپ توسط اکثر مرورگرهای محبوب پشتیبانی میشود.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/001/browsers.jpg
راحتی استفاده : با داشتن دانش جزئی در باره CSS و HTMLمیتوانید از بوتسترپ استفاده کنید. همچنین مستندسازی های بسیار جامعی در باره بوت استرپ در سایت رسمی این فریم وورک وجود دارد که میتوانید از آنها به عنوان راهنمایی برای طراحی سایت استفاده کنید.
طراحی واکنش گرا : بوت استرپ دارای ابزاری است که میتواند به طراحی واکنش گرا برای دستگاههای مختلف کمک کند. بوت استرپ به صورت پیش فرض دارای کلاسهایی است که برای چهار نوع صفحه نمایش با ابعاد مختلف راهکارهایی را دارد.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/001/responsiveDesign.jpg
بسته دانلود شده بوت استرپ شامل چه چیزهایی است؟
چهارچوب بندی (Scaffolding) : بوت استرپ یک ساختار اولیه فراهم میکند که شامل سیستم شبکه بندی ، استایل لینک ها ، پس زمینه ها و.... است. تمام این موارد در آینده به صورت مفصل توضیح داده خواهد شد.
CSS : بوت استرپ شامل کلاسهای CSS از پیش تعریف شده است که میتواند به کار شما سرعت ببخشد.
کامپوننت ها : بوت استرپ دارای یک سری کامپوننت های قابل استفاده مجدد است که برای ایجاد فونتهای زیبا ، منو ها ، پیغام های خطا و... استفاده میشود.
پلاگین های جاوا اسکریپت : بوت استرپ شامل پلاگین های Jquery است که میتوانید همه آنها را در وب سایت خود استفاده کنید یا هر یک از انها را به صورت سفارشی مورد استفاده قرار دهید.
قابلیت سفارشی سازی: با استفاده از کدمنبع که بوت استرپ در اختیار شما قرار میدهد میتوانید آنها را ویرایش و به صورت سفارشی شده استفاده کنید.
در قسمت بعدی در مورد ساختار فایلهای بوت استرپ ؛ همچنین سیستم شبکه بندی بوت استرپ صحبت خواهیم کرد.
استفاده از مطالب این سایت فقط با ذکر منبع مجاز است.
در گروه: مقدمات بوت استرپ (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/3/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE)
منبع: مقدمات بوت استرپ و طراحی واکنش گرا (http://sypna.ir/AllArticles/ID/1/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7)
- - - به روز رسانی شده - - -
شروع کار با بوت استرپ و طراحی واکنش گرا
در تاریخ 19 آذر , 1393 20:03
در آموزش قبل مقدمات بوت استرپ و طراحی واکش گرا (http://sypna.ir/AllArticles/ID/1/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7) را مورد بررسی قرار دادیم. در این آموزش میخواهیم روش های مختلف استفاده از بوت استرپ و محیط کلی آن را مورد بررسی قرار دهیم.
دانلود بوت استرپ
برای دانلود بوت استرپ به این آدرس بروید (http://getbootstrap.com/getting-started/#download)زمانی که این صفحه باز شود مطابق شکل زیر سه گزینه برای دانلود داریم:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/002/bootstrap-Download-Page.JPG
در اینجا ما روی دکمه Download Bootstrap کلیک میکنیم. گزینه های دیگر در ابتدای کار نیاز نیست. اگر با کد های Less کار کرده اید میتوانید این کد را دانلود کنید و با کامپایلر دلخواه خود تغییرات را در کد اعمال کنید. همچنین میتوانید کد Sass بوت استرپ را دانلود کنید. ما در این مجموعه آموزشی کار با CSS و جاوااسکریپت کامپایل شده را آموزش میدهیم. همچنین در یک یا چند مقاله کار با کد Sass را نیز آموزش خواهیم داد.
ساختار فایل بوت استرپ
بعد از دانلود بوت استرپ کامپایل شده سه پوشه خواهید دید که شامل فایلهای استایل دهی ، جاوااسکریپت و فونت ها هستند.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/002/Bootstrap-File-Structure.JPG
در پوشه CSS دوفایل Bootstrap.css و bootstrap.min.css با هم یکی هستند و فایل دوم فشرده شده و مینیفای شده ی فایل اول است. به همین صورت فایلهای همنامی دیگر نیز هم به صورت غیر فشرده وجود دارند ، هم به صورت فشرده. در پوشه fonts فونت glyphicons وجود دارد ؛ که این فونت فقط در پروژه های بوت استرپ به صورت رایگان وجود دارد. میتوانید از آیکن های زیبای این فونت به طور رایگان استفاده کنید.
قالب HTML برای استفاده از بوت استرپ
برای شروع ؛ ابتدا فایل فشرده دانلود شده را اکسترکت کنید. سپس پوشه های CSS,JS,Fonts را انتخاب کنید و به پوشه ایی انتقال دهید که میخواهید تمرینهای بوت استرپ خود را در آنجا انجام دهید.
حالا notepad رو باز کنید و کد زیر را داخل آن کپی کنید. از این به بعد در تمام صفحات باید این کدها رو به صورت پایه داشته باشید:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
حالا تگ های که ممکن در آنها ابهام وجود داشته باشه را توضیح میدیم:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
اگه یادتون باشه در قسمت قبل (http://sypna.ir/AllArticles/ID/1/categoryId/3/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7) گفتیم بوت استرپ دارای رویکرد Mobile First است. با استفاده از تگ متای بالا ، سند خودمون برای نمایش در انواع نمایشگرها آماده میکنیم. همچنین برای بعضی از موبایلها که امکان زوم کردن روی تصویر رو دارند هم ما مقدار اولیه Zoom رو با initial-scale=1.0 برابر با اندازه اصلی خودش مشخص کردیم.
در ادامه فایل bootstrap.min.css رو لینک دادیم به فایل خودمون.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
در کد بالا قابلیت های HTML5.0 و واکنش گرایی رو به IE8 اضافه میکنیم. در صورتی که مرورگر کاربر IE8 باشه از این دو فایل استفاده میشه. و در قسمت Body صفحه دو فایل جاوااسکریپت که مورد نیاز استفاده در بوت استرپ هستند رو اضافه کردیم. برای ذخیره این فایل ، از منوی File در notepad گزینه Save as رو بزنید و Save as type را روی All files بزارید. همچنین Encoding را روی UTF-8 بزارید. این فایل را با یک نام دلخواه در پوشه ایی که برای تمرین هاتون آماده کردید ذخیره کنید.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/002/index.JPG
استفاده از CDN ها :
اگر نمیخواهید به صورت دستی بوت استرپ را دانلود کنید و آنها را در داخل هاست خود آپلود و استفاده کنید میتوانید از CDN ها استفاده کنید. با استفاده از CDN ها میتوانید تمام موارد مورد نیاز بوت استرپ را به صفحه خودتون لینک کنید. بنابراین در کدهای بالا برای فایلهای bootstrap.min.css و bootstrap.min.js ، همچنین JQuery میتوانید از CDN زیر استفاده کنید:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script
قرار دادن کدها در کانتینر
برای استفاده از بوت استرپ هنگام اضافه کردن محتوا به بدنه صفحات خود آنها را داخل کانتینر ها قرار دهید. دو نوع کانتینر در بوت استرپ وجود دارد که میتوانید از آنها استفاده کنید:
1- کانتینر با کلاس .container که دارای عرض فیکس است به صورت زیر:
<div class="container">
محتوا
</div>
2- کانتینر با کلاس .container-fluid که دارای عرض کامل یا Full است. اگر از کلاس قبلی استفاده کنید مشاهد خواهید کرد که محتویات صفحه شما در نمایشگرهای رومیزی از کناره ها دارای فاصله است. در صورتی که نمیخواهید این فاصله وجود داشته باشد و محتویات به صورت تمام صفحه نمایش داده شوند از این کلاس استفاه کنید:
<div class="container-fluid">
...
</div>
در این قسمت اصول اولیه استفاده از بوت استرپ را فراگرفتیم. در قسمتهای بعد با کلاسهای بوت استرپ آشنا خواهیم شد.
در گروه: مقدمات بوت استرپ (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/3/%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE)
منبع : شروع کار با بوت استرپ و طراحی واکنش گرا (http://sypna.ir/AllArticles/ID/2/%D8%B4%D8%B1%D9%88%D8%B9-%DA%A9%D8%A7%D8%B1-%D8%A8%D8%A7-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7)
- - - به روز رسانی شده - - -
آموزش بوت استرپ و طراحی واکنش گرا سیستم شبکه بندیدر این آموزش قصد داریم سیستم شبکه بندی بوت استرپ
را بحث کنیم. شبکه (Grid) چیست؟
با مراجعه به ویکی پدیا تعریف زیر را از شبکه داریم:
شبکه در طراحی گرافیکی به یک ساختار (معمولاً دو بعدی) گفته میشود که برای ایجاد محتوای ساخت یافته از خطوط مستقیم عمودی و افقی استفاه میکند. از این سیستم برای ایجاد لایه های متناسب با چاپ استفاده میشود. همچنین در طراحی وب برای ایجاد لایه های متناسب و سازگار با یکدیگر از سیستم شبکه بندی استفاده میشود.
سیستم شبکه بندی در بوت استرپ صفحه وب ما را به قسمت های مساوی تقسیم میکند. همانند یک برگه در نقشه کشی ؛ با این کار میتوانیم سازگاری و تناسب بین اشیاء مختلف در وب سایت خودمون رو حفظ کنیم.
سیستم شبکه بندی در بوت استرپ چیست؟
باتوجه به تعریف رسمی سایت بوت استرپ ؛ سیستم شبکه بندی در بوت استرپ به صورت زیر تعریف میشود:
بوت استرپ شامل سیستم شبکه بندی متحرک و با رویکردی Mobile First است که عرض صفحه را به 12 ستون مساوی تقسیم میکند. اندازه ستون ها باتوجه به عرض دستگاه کم و زیاد میشوند. بوت استرپ شامل کلاسهای از پیش تعریف شده ای است که با استفاده از آنها میتوانید به لایه بندی صفحات سرعت بخشید ، همچنین دارای میکسین هایی است که میتوانید لایه های سفارشی ایجاد کنید.
در مورد استراتژی Mobile First در قسمت های قبل صحبت شده است. در این روش طراحی ، طراح باید تمام تمرکز خود را روی دستگاه ها با عرض و اندازه های کوچک قرار دهد و لایه بندی و استایل را برای این نوع دستگاه ها انجام دهد ، سپس میتواند با استفاده از کوئری های مدیا برای دستگاههای بزرگتر مثل تبلت و کامپیوترهای رومیزی نیز ، طراحی خود را سازگار کند. اولویت اول در این روش طراحی دستگاههای موبایل هستند.
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/bootstrap-Grid-System.JPG
بوت استرپ برای تمام ستونها ، کلاسهای از پیش تعریف شده ایی دارد. همچنین اسامی استفاده شده دارای ساختار هستندبنابراین استفاده از آنها و حفظ کردن آنها راحت است.
کلاسهای CSS برای شبکه بندی در بوت استرپ :
بوت استرپ برای 4 نوع دستگاه با اندازه های مختلف راهکارهایی دارد. کلاسهای ایجاد شده به صورت زیر هستند:
کلاس xs (برای تلفن های همرا ) - نام کامل : EXtra Small
کلاس sm (برای تبلتها )- نام کامل small
کلاس md (برای لپ تاپ ها و صفحه نمایش ها نسبتاً بزرگ) - نام کامل medium
کلاس lg (برای صفحه نمایش ها با اندازه های بزرگ ) - نام کامل large
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/bootstrp-Grid-System-features.JPG
قوانین استفاده از سیستم شبکه بندی :
در شبکه بندی بوت استرپ صفحه به سطرهایی تقسیم میشود که هر سطر به نوبه خود به 12 ستون مساوی تقسیم میشود. برای استفاده از این قابلیتها باید از div ها به شیوه درست استفاده کرد. باید سطرها را داخل کلاس .container قرار داد.
محتواها باید در داخل ستونها قرار بگیرند. و ستونها باید بلافاصله بعد از تعریف یک سطر داخل آن اولین تگ باشند
کلاسهای از پیش تعریف شده ایی مثل .row و .col-*-* برای لایه بندی سریع وجود دارند.
ساختار پایه کدهای Html برای استفاده از شبکه بندی:
<div class="container">
<div class="row">
<div class="col-*-*">
محتوا
</div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
از این ساختار باید داخل تگ Body خود استفاده کنید. در قسمت قبل ساختار کلی صفحه html را مورد بررسی قرار دادیم. در اینجا ساختار کلی داخل تگ body صفحه را مشخص کرده ایم. در اینجا کلاسهایی وجود دارند که با علامت ستاره(*) علامت دار شده اند. در این کلاسها بجای ستاره اول میتوانید اندازه دستگاه را بنویسید و بجای ستاره دوم تعداد ستونهای اشغال شده توسط محتوا.به عنوان مثال در Div زیر ما با قرار دادن md به جای ستاره اول میگوییم این اندازه برای دستگاههای متوسط است ، و اندازه ستون را 8 در نظر میگیریم:
<div class="col-md-8"></div>
در مثال زیر از لایه بندی ترکیبی استفاده شده است. به این صورت که برای دستگاههای خیلی کوچک 12 ستون و برای دستگاههای متوسط 6 ستون برای div در نظر گرفته شده است:
<div class="col-md-6 col-sm-12"></div>
برای لایه بندی ابتدا باید یک Div با کلاس container یا container-fluid داشته باشیم. سپس داخل این div یک سطر تعریف میکنیم که کلاس این div باید row باشد. در داخل هر سطر میتوانیم div های مختلفی داشته باشیم. و برای هر کدام تعیین کنیم چه تعداد ستون از 12 ستون را اشغال کنند. همچنین میتوانید از سیستم ستون بندی به صورت سلسله مراتبی نیز استفاده کنید.
به عبارت دیگر هر ستون را میتوان به 12 ستون تقسیم کرد. در ادامه با چند مثال دیگر کار فرآیند لایه بندی را بیشتر توضیح میدهیم:
1-مثال اول استفاده از بوت استرپ :
در این مثال یک سطر تعریف میکنیم که داخل آن دو ستون با اندازه های برابر هر کدام 6 ستون را اشغال میکنند. کد کامل صفحه به صورت زیر است. این کد را داخل فایل index.html که در قسمت قبل ایجاد کرده اید کپی کنید و ذخیره کنید:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>محتوا
</p>
<p>محتوا
</p>
</div>
<div class="col-md-6" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>محتوا
</p>
<p>
محتوا </p>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
راست به چپ کردن تمام آیتم ها و سازگاری بوت استرپ با فارسی:
برای سازگاری کامل با فارسی و راست به چپ کردن ، نیاز به کار زیادی نیست. در واقع این کار قبلاً صورت گرفته است. برای اینکه پروژه های بوت استرپ شما از فارسی پشتیبانی کند کافی است این فایل را دانلود کنید (http://www.irwebdesign.ir/wp-content/uploads/bootstrap-rtl.min_.css) و بعد از استفاده از فایل css بوت استرپ اصلی این فایل را نیز به پروژه اضافه کنید. به صورت زیر:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-rtl.min_.css" rel="stylesheet">
تصویر دموی این کد پس از استفاده از استایل شیت فارسی به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/demo-Bootstrap-Example1.JPG
در صورتی که میخواهید فاصله های کناری در مرورگر وجود نداشته باشد و صفحه به صورت عرض کامل نمایش داده شود بجای استفاده از کلاس container از کلاس container-fluid استفاده کنید.
2- مثال دوم استفاده از بوت استرپ :
فرض کنید میخواهیم صفحه ایجاد کنیم که در دستگاههای کوچک (sm) به صورت 2 ستونی باشد. همچنین یک ستون 75 درصد از عرض صفحه را اشغال کند و ستون دیگر 25 درصد از عرض صفحه را .
[*=right]نکته : عرض دستگاههای کوچک از 768 پیکسل تا 991 پیکسل است.
[*=right]برای اختصاص کلاسها به دستگاههای کوچک باید از کلاسهای col-sm-colspan استفاده کنیم.
بنابراین برای این مثال باید div هایی که دو ستون را تعریف میکنند به صورت زیر باشند:
<div class="col-sm-3">محتوا</div>
<div class="col-sm-9">محتوا</div>
کد کامل این صفحه به صورت زیر است:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-rtl.min_.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">
<p>
محتوا.</p>
</div>
<div class="col-sm-9" style="background-color:lavenderblush;">
<p>محتوا</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
در این کد به دلیل اینکه ما از کلاس container-fluid استفاده کرده ایم محتویات ما به صورت تمام صفحه نمایش داده میشوند. همچنین مادامی که عرض صفحه نمایش کاربر بیشتر از 768 پیکسل باشد تصویر به صورت زیر نمایش داده میشود:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/demo-Bootstrap-Example2.JPG
اما اگر عرض صفحه نمایش کوچکتر از 768 پیکسل شود تمام ستون ها به صورت پشته نمایش داده میشوند:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/003/demo-Bootstrap-Example2-1.JPG
مثال 3 استفاده از بوت استرپ : دستگاههای متوسط
در مثال قبل دو div ایجاد کردیم که در دستگاههای کوچک به صورت 25 -75 در کنار یکدیگر قرار داشتند. اما اگه دقت کنید این چینش در دستگاههای متوسط زیاد جالب به نظر نمیرسه. در اینجا قصد داریم همان مثال قبل را به گونه ایی تغییر دهیم که در دستگاههای متوسط اندازه ستونها بایگدیگر برابر باشند. برای این کار میتوانیم از کلاس col-md-6 استفاده کنیم .بنابراین در اینجا فقط کافیست دو div ایجاد شده را به صورت زیر تغییر دهید:
<div class="col-sm-3 col-md-6">محتوا</div>
<div class="col-sm-9 col-md-6">محتوا</div>
بعد از اعمال این تغییرات و ذخیره آنها ، صفحه index.html را در مرورگر باز کنید و اندازه مرورگر را کوچک و بزرگ کنید.
[*=right]نکته: اندازه عرض صفحه نمایش در دستگاههای متوسط در بوت استرپ 992 پیکسل تا 1199 پیکسل مشخص شده است.
[*=right]برای استفاده از کلاسهای بوت استرپ برای استایل دهی در دستگاههای متوسط از کلاسهای col-md-span استفاده میکنیم.
مثال 4 استفاده از بوت استرپ : دستگاههای بزرگ
در مثال قبل اندازه ستونها در دستگاههای متوسط را با هم برابر کردیم. در این مثال میخواهیم اندازه یک ستون را در دستگاههای بزرک به 4 و ستون دیگر را به 8 تغییر دهیم.
[*=right]نکته :اندازه عرض صفحه نمایش در دستگاههای بزرگ در بوت استرپ بیشتر از 1200 پیکسل است.
[*=right]برای استفاده از کلاسهای بوت استرپ برای استایل دهی در دستگاههای بزرگ از کلاسهای col-lg-span استفاده میکنیم.
بنابراین کافی است تغییرات زیر را اعمال کنیم:
<div class="col-sm-3 col-md-6 col-lg-4">محتوا</div>
<div class="col-sm-9 col-md-6 col-lg-8">محتوا</div>
کد کامل این صفحه بعد از اعمال تغییرات به صورت زیر خواهد بود:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-rtl.min_.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4" style="background-color:lavender;">
<p>محتوا.</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8" style="background-color:lavenderblush;">
<p>محتوا.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
در این مثال صفحه ایی با دو ستون داریم که در دستگاههای بسیار کوچک با عرض کمتر از 768 پیکسل تمام ستون ها روی هم و به صورت پشته نمایش داده میشوند. در دستگاههای با اندازه بزرگتر از 768 پیکسل و کوچکتر از 991 پیکسل ستون ها در کنار یک دیگر و به صورت 25%- 75 % قرار میگیرند. در دستگاههای با اندازه بزرگتر از 992 پیکسل و کوچکتر از 1199 پیکسل به صورت 50 % -50 % در کنار یکدیگر قرار میگیرند. و در دستگاههایی که عرض آنها بیشتر از 1200 پیکسل است به صورت 33%-66% در کنار یکدیگر قرار میگیرند.
در آموزشهای بعدی مثال های بیشتری از سیستم شبکه بندی خواهیم زد .همچنین بقیه کلاسهای css مورد استفاده برای استایل دهی به اشیاء را بررسی خواهیم کرد.
در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع : سیستم شبکه بندی بوت استرپ (http://sypna.ir/AllArticles/ID/3/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%B4%D8%A8%DA%A9%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
- - - به روز رسانی شده - - -
آموزش بوت استرپ و طراحی واکنش گرا مثالهای سیستم شبکه بندی
در این قسمت مثالهای بیشتری از سیستم شبکه بندی میزنیم تا با نحوه کار بیشتر آشنا شوید.در تمام مثالهای زیر باید کد نوشته شده را داخل کلاس container یا container-fluid قرار دهیم:
1- سه ستون برابر :
در کد زیر ما سه ستون با هم برابر در تبلت ها ایجاد میکنیم. در دستگاههای بزرگتر از تبلت اندازه ستون ها با همان ضریب بزرگتر میشود.ودر دستگاهای بسیار کوچک یا موبایل که کمتر از 768 پیکسل عرض دارند ؛ تمام ستون ها به صورت پشته و در روی هم قرار میگیرند.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
2- سه ستون نابرابر
در کد زیر سه ستون ایجاد میشود که عرض های مختلفی دارند. این ستون ها برای تبلت ترازبندی شده اند. همچنین در دستگاههای بزرگتر به همان نسبت بزرگ میشوند. در دستگاهای بسیار کوچک به صورت خودکار تمام ستون ها به صورت پشته روی هم قرار میگیرند.
<div class="row">
<div class="col-sm-3">.col-md-3</div>
<div class="col-sm-6">.col-md-6</div>
<div class="col-sm-3">.col-md-3</div>
</div>
3- دو ستون نابرابر
در کد زیر دو ستون نابرابر ایجاد کرده ایم که برای تبلت ترازبندی شده اند و در دستگاههای بزرگتر به همان نسبت تغییر پیدا میکنند. همچنین در موبایل به صورت خودکار به صورت پشته روی هم قرار میگیرند.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
4- دو ستون نابرابر به صورت سلسله مراتبی (تودرتو)
در کد زیر دو ستون برای دستگاه تبلت با اندازه ها 4 و 8 تعریف شده است. همچنین در داخل ستونی که اندازه 8 دارد دو ستون دیگر تعریف کردیم. هر ستون بعد از تقسیم خود به 12 قسمت مساوی تقسیم میشود. این اندازه ها برای تبلت ترازبندی شده اند و در دستگاههای بزرگتر به همان نسبت تغییر پیدا مکینند. همچنین در موبایل به صورت خودکار به صورت پشته روی هم قرار میگیرند:
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
5- ترکیبی : موبایل و دسکتاپ :
سیستم شبکه بندی در بوت استرپ 4 نوع کلاس دارد : xs برای دستگاههای موبایل ، sm برای تبلت ، md دسکتاپ و lg دسکتاپ های بزرگ. از این کلاسها میتوانید به صورت ترکیبی استفاده کنید. در این صورت قالب شما دارای سازگاری و انعطاف پذیری بالایی خواهد بود.
نکته : هر کلاس به همان نسب در کلاس های بزرگتر خود ایجاد میشود. به عبارت دیگر اگر شما میخواهید ستونی با اندازه 6 در دستگاههای sm داشته باشید و همین ستون در دستگاههای md نیز با اندازه 6 است ؛ کافی است فقط از کلاس col-sm-6 استفاده کنید. در این حالت اگر از کلاس md استفاده نکنید به همان نسبت در دستگاه بزرگتر ایجاد میشود:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
6- ترکیبی : موبایل ، تبلت ، و دسکتاپ :
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
<div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
7- کلاس clearfix :
از این کلاس برای پاک کردن و نال کردن مقدار float مربوط به div ها استفاده میشود. در مثال زیر 4 ستون هم اندازه در دستگاههای کوچک داریم. که اندازه هر ستون در دستگاههای sm برابر با 3 است. میخواهیم این 4 ستون را به صورتی قرار دهیم که در دستگاههای موبایل xs هر دو ستون در یک سطر قرار بگیرند. در این حالت از یک div با کلاس clearfix استفاده کرده ایم. همچنین به دلیل اینکه میخواهیم این تگ فقط برای دستگاههای موبایل اجرا شود از کلاس visible-xs برای نمایانی این تگ فقط در دستگاههای xs استفاده کرده ایم:
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
نکته : کلاس visible-device را میتوانید در 4 نوع نمایشگر استفاده کنید. از این کلاس برای نمایانی فقط در کلاس نام برده استفاده میشود. به عنوان مثال اگر میخواهید یک تگ فقط در دستگاههای xs نمایش داده شود این کلاس را به تگ خود اضافه کنید:visible-xs در صورتی که میخواهید علاوه بر دستگاههای xs در دستگاههای md نیز نمایش داده شود این کلاس را نیز میتوانید به صورت ترکیبی استفاده کنید : visible-md
8- جابجاسازی یا Offsetting به ستون ها :
برای جابجا کردن یک ستون از کلاس .col-md-offset-device استفاده میشود. که به جای device میتوانید مقادیر xs,sm,md,lg را قرار دهید. در کد زیر دو ستون با اندازه های 5 در دستگاههای sm ایجاد کرده ایم. در اینجا میخواهیم یکی از ستونها در دستگاههای sm 2 واحد جابجا شود. کد این مثال به صورت زیر است :
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
برای درک بهتر مثال روی این دکمه کلیک کنید (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex8&stacked=h) و صفحه مرورگر خود را تغییر اندازه دهید.
9 - تغییر ترتیب قرار گیری ستونها
برای تغییر ترتیب ستون ها میتوانید از کلاسهای col-device-push-span و col-device-pull-span استفاده کنید. برای درک بهتر کد زیر را بتویسید و اجرا کنید .یا دموی آنلاین آنرا مشاهده کنید. (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex9&stacked=h)
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>
در این قسمت روشهای مختلف استفاده از سیستم شبکه بندی در
بوت استرپ و طراحی واکنش گرای
صفحات را یاد گرفتیم. در قسمت بعد با کلاسهای بیشتری از بوت استرپ آشنا خواهیم شد.
در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع : مثالهای شبکه بندی در بوت استرپ (http://sypna.ir/AllArticles/ID/4/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%D9%85%D8%AB%D8%A7%D9%84%D9%87%D8%A7%DB%8C-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%B4%D8%A8%DA%A9%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
- - - به روز رسانی شده - - -
آموزش بوت استرپ و طراحی واکنش گرا نمایش متن ها و استایل دهی
در این قسمت روش استایل دهی به متن های مختلف دربوت استرپرا بررسی میکنیم.با استفاده از این کلاسها فرآیند
طراحی سایت
آسانتر خواهد شد. همچنین کلاسهایی وجود دارند که با استفاده از آنها میتوانید تعیین کنید اشیاء شما در کدام یک از دستگاهها قابل نمایش باشد و یا در کدامیک نمایش داده نشود. به این ترتیب میتوانید صفحات خود را واکنش گرا
کنید. تنظیمات پیش فرض :
بوت استرپ به صورت پیش فرض از فونتهای Helvetica Neue, Helvetica, Arial, and sans-serif استفاده میکند. همچنین اندازه فونت همه متن ها font-size=14px است که فاصله بین خطوط یا line-height: 1.428 است. این تنظیمات در تمام تگ body و پاراگراف ها اعمال میشود. همچنین تگ های پاراگراف p از پایین به اندازه نصف فاصله خطوط مارجین دارند که بصورت پیشفرض 10px است.
هدینگ ها در بوت استرپ :
کد:
<div class="container">
<h1>هدینگ نو اول (36px)</h1>
<h2>هدینگ نوع دوم (30px)</h2>
<h3>هدینگ نوع سوم (24px)</h3>
<h4>هدینگ نوع چهارم (18px)</h4>
<h5>هدینگ نوع پنجم (14px)</h5>
<h6>هدینگ نوع ششم (12px)</h6>
</div>
تصویر دمو:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/heading-Bootstrap-demo.JPG
تگ small در بوت استرپ :
با استفاده از این تگ میتوانید متن ثانویه ایی با ابعاد کوچکتر از تگ پدر خود ایجاد کنید.
<div class="container">
<h1>هدینگ نو اول (36px) <small>متن ثانویه</small></h1>
<h2>هدینگ نوع دوم (30px) <small>متن ثانویه</small></h2>
<h3>هدینگ نوع سوم (24px) <small>متن ثانویه</small></h3>
<h4>هدینگ نوع چهارم (18px) <small>متن ثانویه</small></h4>
<h5>هدینگ نوع پنجم (14px) <small>متن ثانویه</small></h5>
<h6>هدینگ نوع ششم (12px) <small>متن ثانویه</small></h6>
</div>
تصویر نمونه :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/small-tag-bootstrap-demo.JPG
تگ mark در بوت استرپ :
با استفاده از این تگ میتوانید یک قسمت از متن را پر رنگ تر کنید.مثال:
<div class="container">
<h1>متن هایلایت</h1>
<p>این روزها استفاده از <mark>بوت استرپ و طراحی واکنش گرا </mark> رواج یافته است.</p>
</div>
تصویر نمونه :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/mark-tag-bootstrap-demo.JPG
تگ abbr در بوت استرپ :
از این تگ برای ایجاد کلمات مختصر به صورت tooltip استفاده میشود.
کد :
<div class="container">
<h1>اختصارو کوتاه سازی </h1>
<p>شرکت <abbr title="سیستم پردازان نوین آساک ">سیپنا</abbr> خدمات سئو ارائه میدهد.</p>
</div>
تصویر نمونه این کد :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/abbr-tag-bootstrap-demo.jpg
نقل قول با استفاده از blockquote در بوت استرپ :
کد :
<div class="container">
<h1>نقل قول</h1>
<blockquote>
<p>بوت استرپ در سال 2011 در اختیار همه قرار گرفت</p>
<footer>برگرفته از سایت بوت استرپ </footer>
</blockquote>
</div>
تصویر نمونه:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/blockqoute-tag-bootstrap-demo.JPG
تگ dl در بوت استرپ :
برای ایجاد لیستی از کلمات و تعریف آنها استفاده میشود.مثال :
<div class="container">
<h1>لیست کلمات</h1>
<dl>
<dt>قهوه </dt>
<dd>- نوشیدنی سیاه و داغ</dd>
<dt>شیر</dt>
<dd>- نوشیدنی سفید و سرد</dd>
</dl>
</div>
تصویر نمونه این کد :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/dl-tag-bootstrap-demo.JPG
تگ code در بوت استرپ :
برای جداسازی بعضی از قسمت های متن استفاده میشود .مثال :
<div class="container">
<p>تگ های : <code>span</code>,
<code>section</code>,
و <code>div</code> یک بخش مجزا را در اسناد html تعریف میکنند .</p>
</div>
تصویر نمونه :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/code-tag-bootstrap-demo.JPG
تگ kbd در بوت استرپ :
برای نمایش کلید های کیبورد میتوانید از این تگ استفاده کنید :
<div class="container">
<p>از کلیدهای ترکیبی<kbd>ctrl + p</kbd>
برای باز شدن پنجره چاپ استفاده کنید.</p>
</div>
تصویر نمونه :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/kbd-tag-bootstrap-demo.JPG
کلاسهای رنگ بندی متن در بوت استرپ:
کلاسهای زیر به صورت پیش فرض در بوت استرپ برای رنگ بندی متن ها مورد استفاده قرار میگیرند: .text-muted, .text-important, .text-success, .text-info, .text-warning, , .text-danger
کد :
<div class="container">
<p class="text-muted">این متن ضعیف شده است.</p>
<p class="text-primary">این متن مهم است.</p>
<p class="text-success">این متن پیام موفق است..</p>
<p class="text-info">این متن اطلاعات را نشان میدهد.</p>
<p class="text-warning">این متن اخطار را نشان میدهد.</p>
<p class="text-danger">این متن خطر را نشان میدهد.</p>
</div>
تصویر نمونه این کد :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/text-color-bootstrap-demo.JPG
رنگ های پس زمینه متن در بوت استرپ :
کلاسهای زیر برای رنگ بندی پس زمینه متن ها مورد استفاده قرار میگیرند : .bg-important, .bg-success, bg-info, bg-warning, ,.bg-danger
مثال :
<div class="container">
<p class="bg-primary">این متن مهم است.</p>
<p class="bg-success">این متن پیام موفق است.</p>
<p class="bg-info">این متن اطلاعات را نشان میدهد.</p>
<p class="bg-warning">این متن یک اخطار را نشان میدهد.</p>
<p class="bg-danger">این متن خطر را نشان میدهد.</p>
</div>
تصویر نمونه این کد به صورت زیر است :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/005/bg-color-bootstrap-demo.JPG
در این قسمت اکثر کلاسهای مهم برای استایل دهی به متن ها را در بوت استرپ یاد گرفتیم. برای دیدن یک مرجع کامل از این کلاسها میتوانید به این آدرس مراجعه کنید: مرجع کامل استایلهای متن در بوت استرپ (http://www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp)
در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع : استایل دهی به متن ها در بوت استرپ (http://sypna.ir/AllArticles/ID/5/%D8%A7%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%D9%86%D9%85%D8%A7%DB%8C%D8%B4-%D9%85%D8%AA%D9%86-%D9%87%D8%A7-%D9%88-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%AF%D9%87%DB%8C)
- - - به روز رسانی شده - - -
آموزش بوت استرپ و طراحی واکنش گرا جدول ها
در این قسمت با کلاسهای مختلف CSS برای ایجاد جداول اشنا خواهیم شد.در گذشته استفاده از جدول ها درطراحی سایت بسیار پر کاربرد بود. از جدول ها برای ایجاد لایه بندی صفحات استفاده میشد. اما مشکلی که جدول ها به وجود می آوردند این بود که تا زمان لود کامل جدول مرورگر توانای رندر کردن اون صفحه رو نداشت. با پیشرفته تر شدن طراحی سایت و استفاده از div ها ؛ کاربرد جداول به ایجاد لیست های قیمت و ... محدود شده است.
بوت استرپ
مجموعه ایی از کلاسهای از پیش تعریف شده را برای ما ایجاد کرده است که میتوانیم به وسیله آنها جدولها را استایل دهی کنیم. همچنین بوت استرپ دارای کلاسی است که با استفاده از آن میتوان جداول را واکنش گرا
کرد. جدول ساده در بوت استرپ :
برای ایجاد یک جدول ساده در بوت استرپ کافی است از کلاس .table استفاده کنیم. مثال:
<table class="table">
<caption>جدول ساده</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
</tbody>
</table>
تصویر دموی این کد:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/simple-table-bootstrap-demo.JPG
جدول با سطرهای راه راه در بوت استرپ :
برای ایجاد جدولی که سطرهای آن یک درمیان با رنگ های متفاوت باشند میتوانید از کلاس table-striped استفاده کنید. مثال :
<div class="container">
<table class="table table-striped">
<caption >جدول راه راه</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر این کد به صورت زیر است :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/striped-table-bootstrap-demo.JPG
جدول حاشیه دار در بوت استرپ :
برای ایجاد جدول حاشیه دار در بوت استرپ از کلاس table-bordered استفاده میکنیم. مثال :
<div class="container">
<table class="table table-bordered">
<caption >جدول حاشیه دار</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر نمونه این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/bordered-table-bootstrap-demo.JPG
ایجاد جدول با سطر های hover در بوت استرپ :
برای ایجاد جدولی که هنگام رفتن موس روی یک سطر ، سطر مورد نظر تغییر رنگ پیدا کند از کلاس table-hover استفاده میکنیم.مثال :
<div class="container">
<table class="table table-hover">
<caption style="text-align:right">جدول Hover</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر دموی این کد:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/hover-table-bootstrap-demo.JPG
جدول فشرده در بوت استرپ :
با استفاده از کلاس table-condensed میتوانید جدول خود را به صورت فشرده تر ایجاد کنید. در این حالت حاشیه بین سلول ها حذف میشود. همچنین padding بین سطر نصف میشود. مثال :
<div class="container">
<table class="table ttable-condensed">
<caption>جدول فشرده</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر دموی این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/condensed-table-bootstrap-demo.JPG
کلاسهای رنگ بندی پس زمینه جدول در بوت استرپ :
از کلاسهای active , success, info , warning , danger میتوانید برای رنگ بندی یک سطر یا سلول استفاده کنید.مثال :
<div class="container">
<table class="table ttable-condensed">
<caption>جدول با پس زمینه های متفاوت</caption>
<thead>
<tr class="active">
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr class="info">
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr class="warning">
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr class="danger">
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>
تصویر دموی این کد به صورت زیر است :
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/006/background-table-bootstrap-demo.JPG
ایجاد جدول واکنش گرا در بوت استرپ :
برای ایجاد یک جدول واکنش گرا در بوت استرپ کافی است جدولی که دارای کلاس table است را داخل یک div با کلاس table-responsive قرار دهیم. در این حالت در صورتی که صفحه نمایش تغییر پیدا کند و کوچک شود جدول نیز متناسب با آن تغییر پیدا میکند. همچنین در دستگاههای بسیار کوچک سلول ها روی هم قرار میگیرند. کافیست تمام جدول خود را داخل تگ زیر قرار دهید :
<div class="table-responsive">
کد ایجاد جدول و محتواها
</div>
در قسمت بعد با کلاسهای استایل دهی فرم ها در بوت استرپ آشنا خواهیم شد.
در گروه: بوت استرپ و CSS (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/4/%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE-%D9%88-CSS)
منبع : طراحی سایت (http://sypna.ir/WebDesign)