Bootstrap در طراحی سایت
ساختار فایل بوت استرپ
بعد از دانلود بوت استرپ کامپایل شده سه پوشه خواهید دید که شامل فایلهای استایل دهی ، جاوااسکریپت و فونت ها هستند.
در پوشه 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">بوت استرپ دارای رویکرد Mobile First است. با استفاده از تگ متای بالا ، سند خودمون برای نمایش در انواع نمایشگرها آماده میکنیم. همچنین برای بعضی از موبایلها که امکان زوم کردن روی تصویر رو دارند هم ما مقدار اولیه Zoom رو با initial-scale=1.0 برابر با اندازه اصلی خودش مشخص کردیم.
در ادامه فایل bootstrap.min.css رو لینک دادیم به فایل خودمون.
<!--[if lt IE 9]>در کد بالا قابلیت های HTML5.0 و واکنش گرایی رو به IE8 اضافه میکنیم. در صورتی که مرورگر کاربر IE8 باشه از این دو فایل استفاده میشه. و در قسمت Body صفحه دو فایل جاوااسکریپت که مورد نیاز استفاده در بوت استرپ هستند رو اضافه کردیم. برای ذخیره این فایل ، از منوی File در notepad گزینه Save as رو بزنید و Save as type را روی All files بزارید. همچنین Encoding را روی UTF-8 بزارید. این فایل را با یک نام دلخواه در پوشه ایی که برای تمرین هاتون آماده کردید ذخیره کنید.
<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]-->
استفاده از 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">2- کانتینر با کلاس .container-fluid که دارای عرض کامل یا Full است. اگر از کلاس قبلی استفاده کنید مشاهد خواهید کرد که محتویات صفحه شما در نمایشگرهای رومیزی از کناره ها دارای فاصله است. در صورتی که نمیخواهید این فاصله وجود داشته باشد و محتویات به صورت تمام صفحه نمایش داده شوند از این کلاس استفاه کنید:
محتوا
</div>
<div class="container-fluid">در این قسمت اصول اولیه استفاده از بوت استرپ را فراگرفتیم.
...
</div>
دوست عزیز، به سایت علمی نخبگان جوان خوش آمدید
مشاهده این پیام به این معنی است که شما در سایت عضو نیستید، لطفا در صورت تمایل جهت عضویت در سایت علمی نخبگان جوان اینجا کلیک کنید.
توجه داشته باشید، در صورتی که عضو سایت نباشید نمی توانید از تمامی امکانات و خدمات سایت استفاده کنید.
پاسخ با نقل قول
علاقه مندی ها (Bookmarks)