بوت استرپ چیست و چگونه استفاده می شود؟

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

بوت استرپ جعبه ابزاری قدرتمند است که مجموعه ای از ابزارهای HTML، CSS و جاوا اسکریپت را برای ساخت صفحات وب و اپلیکیشن های تحت وب، در خود جای داده است. بوت استرپ پروژه ای رایگان و اوپن سورس است و بر روی GitHub میزبانی می شود و خالق اصلی آن توییتر است.

در صورتیکه هنوز نمی دانید بوت استرپ چیست یا آن که می خواهید ایده بهتری از آن و کاربردهای آن داشته باشید، در این صورت به جای درستی آمده اید. با ما همراه باشید.

چرا باید بوت استرپ را یاد بگیرید؟

زمانی که بوت استرپ در سال 2011 بیرون داده شد به سرعت به شهرت رسید. البته این شهرت بی دلیل هم نبود. طراحان سایت ها و توسعه دهندگان وب، از بوت استرپ استقبال زیادی کردند چرا که کار کردن با آن راحت و انعطاف پذیر بود.

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

بوت استرپ به طراحان و برنامه نویسان وب اجازه می داد تا از کامپوننت های قابل استفاده برای طراحی یکپارچه، استفاده کنند ضمن آنکه یادگیری آن نیز راحت بود. بوت استرپ کتابخانه هایی را فراهم می کرد که توسط جاوا اسکریپت نوشته شده بودند و از پلاگین های jQuery و دیگر API های برنامه نویسی شده با جاوا اسکریپت پشتیبانی می کرد.

بوت استرپ همچنین این قابلیت را فراهم می کرد تا از آن در کلیه محیط های برنامه نویسی (IDE) سمت سرور و تقریبا در هر زبانی برنامه نویسی نظیر ASP.NET، PHP یا Ruby on Rails به راحتی استفاده شود.

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

آشنایی با مبانی بوت استرپ

بوت استرپ در دو فرم متفاوت وجود دارد. نسخه از پیش کامپایل شده و نسخه همراه با سورس کد. نسخه ای که همراه با سورس کد است از CSS های پردازش شده استفاده می کند اما اگر بیشتر کار شما با Sass و ساخت اپلیکیشن های تحت وب است، در این صورت یک نسخه مخصوصی برای Sass نیز وجود دارد.

برای جلوگیری از تداخل کلاس های CSS با کتابخانه های دیگر، در بوت استرپ از پیشوند گذاری خودکار استفاده می شود.

نسخه سورس کد بوت استرپ با استایل هایی می آید که با Less (یا Sass) نوشته شده اند همراه با کلیه فایل های جاوا اسکریپت و داکیومنت ها. اصطلاح Less یا Sass به CSS های گفته می شود که از متغیرها برای مقادیر استایل ها استفاده می کنند. Sass پس از کامپایل شدن، به CSS های نهایی تبدیل می شود که برای مرورگرها قابل درک و اجرا است.

این قابلیت، هم به طراحان و هم به توسعه دهندگانی که از LESS یا Sass استفاده می کنند این اجازه را خواهد داد تا استایل های مورد نیاز خود را در هر زمان و به صورت دلخواه تغییر دهند تا نسخه بوت استرپ نهایی خود را بسازند.

اما در صورتیکه با Less (یا Sass) آشنا نیستید، و یا آنکه تمایلی به تغییر سورس کد بوت استرپ ندارید، اصلا نگران نباشید. شما می توانید از نسخه CSS های کامپایل شده آن استفاده کنید. همه این استایل ها بعدا می توانند با نوشتن استایل های سفارشی برای خودتان، به استایل مورد نظر شما تغییر یابند.

ساختار فایل های بوت استرپ

ما در اینجا بر روی نسخه کامپایل شده تمرکز می کنیم که از اینجا می توانید دانلود کنید. وقتی فایل آرشیو بوت استرپ را دانلود کردید و آن را باز کردید، ساختار اساسی آن، شبیه به زیر است:

bootstrap/
 ├── css/
 │
 ├── bootstrap.css
 │
 ├── bootstrap.css.map
 │
 ├── bootstrap.min.css
 │ ├── bootstrap-theme.css
 │ ├── bootstrap-theme.css.map
 │ └── bootstrap-theme.min.css
 ├── js/
 │ ├── bootstrap.js
 │ └── bootstrap.min.js
 └── fonts/
 ├── glyphicons-halflings-regular.eot
 ├── glyphicons-halflings-regular.svg
 ├── glyphicons-halflings-regular.ttf
 ├── glyphicons-halflings-regular.woff
 └── glyphicons-halflings-regular.woff2

ساختار پوشه بوت استرپ خیلی ساده و گویا است. این ساختار، شامل فایل های کامپایل شده ای است که از آن ها می توان برای ساخت سریع پروژه های وب استفاده کرد. در کنار فایل ها و پوشه های کامپایل شده و همچنین CSS ها و JS های فشرده شده، این پوشه همچنین شامل فونت های Glyphicons و یک قالب بوت استرپ برای شروع است.

این ساختار می تواند به سادگی در پروژه شما قرار گیرد به این صورت که پس از اینکه فایل فشرده بوت استرپ را از حالت فشرده خارج کردید، فایل ها و پوشه ها را به همان صورت به پروژه خود منتقل کنید و یا اگر نیاز بود می توانید آن ها را در هر پوشه ای که دوست دارید منتقل کنید.

فقط اطمینان حاصل کنید که پوشه های glyphicon ها در همان مسیری هستند که پوشه CSS قرار دارد.

قالب HTML پایه برای بوت استرپ

یک قالب HTML پایه برای بوت استرپ چیزی شبیه به کد HTML زیر است:

<!DOCTYPE html>
 <html lang="en">
 <head> <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Bootstrap Template</title>
 <link href="css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 <h1>Hello, world!</h1>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 </body>
 </html>

چیزی که باید توجه کرد این است که این قالب باید با اعلان HTML5 Doctype شروع شود تا مرورگرها بدانند با چه الگویی سرکار دارند.

بخش head شامل سه تگ مهم <meta> است که باید آنها را ابتدا اعلان کنید و کلیه تگ های دیگر در بخش head، باید پس از آن ها بیایند.

چنانچه بخواهید از مرورگرهای قدیمی نیز نظیر IE8 پشتیبانی کنید باید در بخش head، هم تگ HTML5 مربوط به آن را قرار دهید که به مرورگرهای قدیمی اجازه استفاده از HTML5 را خواهد داد و هم از Respond.js استفاده کنید تا امکان پیاده سازی و شبیه سازی CSS3 بر روی نسخه های قدیمی اینترنت اکسپلورر فراهم شود.

<head>
 ...
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 </head>

در هر صورت اگر از مرورگرهای جدید و امروزی می خواهید استفاده کنید، نیازی به استفاده از این ها نیست.

فایل های جاوا اسکریپت بوت استرپ نیز در انتهای body قرار داده می شوند تا اجازه بارگذاری سریع صفحه به مرورگرها داده شود پیش از آن که کدهای جاوا اسکریپت اجرا شوند. jQuery نیز برای پلاگین های بوت استرپ مورد نیاز است و نیاز است تا پیش از اجرای bootstrap.js، کتابخانه jQuery بارگذاری شود.

چنانچه از هیچ یک از ویژگی های تعاملی و اینتر اکتیو بوت استرپ استفاده نمی کنید حتی می توانید این فایل های جاوا اسکریپت را نیز حذف کنید.

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

همانطور که در ادامه خواهیم دید، CSS هر بخش بوت استرپ می تواند به صورت سفارشی توسط شما تغییر داده شود. اما اگر شما طراح نیستید و می خواهید از یک قالب های بوت استرپ متفاوت برای خود استفاده کنید پوسته های رایگان و اوپن سورس زیادی وجود دارند که می توانید از آن ها استفاده کنید نظیر Bootswatch و WrapBootstrap.

ساخت قالب با بوت استرپ توسط کامپوننت های UI

بوت استرپ همراه با اجزای گرافیکی پایه که با HTML و CSS نوشته شده اند، برای دانلود عرضه می شود که شامل کامپوننت های عمومی برای طراحی UI است.

این کامپوننت ها شامل تایپوگرافی ها، شماره بندی صفحات، جداول، فرم ها، دکمه ها، آیکون های تصویری کوچک glyphicon، انتخابگرهای کرکره ای، دکمه های رادیویی گروهی، منوها، برچسب ها، هشدارها، نوار گزارش پیشرفت، پاپ آپ های مودال، تب ها، آکاردئون ها، کاروسل ها، و بسیاری دیگر از موارد است.

بسیاری از اجزای UI ذکر شده در بالا، نیازمند استفاده از پلاگین های jQuery و یا دیگر کتابخانه های جاوا اسکریپت است.

این اجزای و کامپوننت های بوت استرپ به سادگی می توانند به کدهای HTML شما با استفاده از کلاس های مربوطه، اعمال شوند. این باعث می شود استفاده از بوت استرپ، ساده و راحت باشد.

با استفاده از نام های معنادار در کلاس ها نظیر success. و warning. و info. این کامپوننت ها به سادگی قابل خواندن و استفاده مجدد می شوند.

اما با اینکه کلاس های بوت استرپ اسامی معناداری دارند، شما می توانید استایل های آن ها را تغییر دهید یا ویرایش کنید به طوری که کارآیی آن ها متفاوت از چیزی باشند که قبلا بوده ولی برای پروژه شما مفید باشند.

سیستم Grid در بوت استرپ

پیش از آنکه ما به کامپوننت های بوت استرپ ها بیشتر بپردازیم، ضروری است تا با یکی از ویژگی های مهم بوت استرپ ها که از نسخه 3 به بعد به وجود آمد، آشنا شویم: فلسفه اول طراحی موبایل (mobile-first design) که سبب شد از بوت استرپ بتوان برای طراحی قالب های ریسپانسیو استفاده کرد.

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

این ریسپانسیو از طریق یک سیستم شبکه ای شناور به نام گرید (Grid) به دست می آید که می تواند به صورت مناسب بسته به سایز صفحه نمایش دستگاه، تا 12 ستون بزرگ یا کوچک شود. گریدها، ساختار الگو را می سازند، و خطوط عمودی و افقی را تعریف می کنند تا محتوا، درون آن ها قرار داده شوند و فواصل میان محتوا با گریدها یا گریدها با گرید ها را نیز مشخص می کنند.

گریدها همچنین ساختار اولیه نمایش مطالب را برای کاربران مشخص می کنند چرا که مطالب از چپ به راست و یا از راست به چپ و سپس از بالا به پایین خوانده می شوند.

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

با قدرتمند شدن CSS و پیدایش ویژگی های جدید در آن، سر و کله تعدادی از فریم ورک ها نیز برای نمایش سایت با الگوهای شبکه ای پیدا شد. فریم ورک هایی نظیر YUI، 960 GS و blueprint چند نمونه از آن ها هستند.

برای استفاده از سیستم شبکه ای بوت استرپ، از چند قانون ساده نیاز است تا پیروی شود: ستون های شبکه، باید درون سطرها قرار داده شوند.

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

در یک سطر کامل، پهنای ستون ها هر عددی می تواند باشد اما این پهنا باید مضرب صحیحی از یک دوازدهم پهنای کل باشد. در نتیجه مجموع شماره کلاس هر ستون در هر سطر باید عدد 12 باشد.

درک این موضوع خیلی ساده تر از توضیح آن است و در ادامه آن را توضیح خواهیم داد و سپس با یک مثال آن را روشن تر خواهیم کرد.

سیستم شبکه ای بوت استرپ شامل چهار لایه از کلاس ها است:

• xs برای گوشی ها (با سایز کمتر از 768 پیکسل)
  
  
• sm برای تبلت ها (با سایز بیشتر از 768 پیکسل)
  
  
• md برای دسکتاپ ها با صفحه نمایش کوچک یا متوسط (با سایز بیشتر از 992 پیکسل)
  
  
• lg برای دسکتاپ هایی با صفحه نمایش (با سایز بیشتر از 1200 پیکسل)

این ها البته سایزهای پایه ای هستند که تعداد ستون ها را در سطرها کم و زیاد خواهند کرد. لایه کلاس ها می توانند به هر ترکیب و شکلی استفاده شوند تا پوسته انعطاف پذیر مورد نظر را به صورت داینامیک تشکیل دهند.

سطرها نیاز است تا در یک مخزن نگهداری (Container)  با پهنای ثابت و یا تمام صفحه قرار داده شوند. پهنای ثابت با کلاس container.

و پهنای 1170 پیکسل تعریف شده است و تمام صفحه با کلاس container-fluid. تعریف می شود که در هر دو حالت امکان نمایش ریسپانسیو وجود خواهد داشت.

برای مثال، در صورتیکه بخواهیم صفحه ای با دو سطر داشته باشیم که سطر اول دو ستون و سطر دوم چهار ستون داشته باشید، این کار را به صورت زیر انجام خواهیم داد:

<div class="row">
 <div class="col-md-6">First column</div>
 <div class="col-md-6">Second column</div>
 </div>
 <div class="row">
 <div class="col-md-3">First column</div>
 <div class="col-md-3">Second column</div>
 <div class="col-md-3">Third column</div>
 <div class="col-md-3">Fourth column</div>
 </div>

دقت کنید که چطور جمع کل اعداد انتهای نام هر کلاس در هر ستون برای هر سطر، عدد 12 می شود. یک مثال دیگر از سطری با ستون های نامتقارن:

<div class="row">
 <div class="col-md-9">Wider column</div>
 <div class="col-md-3">Smaller column</div>
 </div>

می توانیم از یک آفست برای شیفت دادن ستون ها استفاده کرد. به عنوان مثال، برای تولید محتوای باریک تر و وسط چین، از کد زیر استفاده می کنیم:

<div class="row">
 <div class="col-md-6 col-md-offset-3">Centered column</div>
 </div>

• ستون ها می توانند درون یکدیگر قرار داده شوند.
  
  
• ستون ها می توانند کمتر از 12 عدد در هر سطر باشند.
  
  
• ستون ها درون سطرها قرار می گیرند
  
  
• سطرها درون یک مخزن یا container قرار می گیرند.
  
  
• مخزن یا نگهدارنده می تواند پهنای ثابت یا تمام صفحه داشته باشد.

این ها قوانین پایه ای بوت استرپ برای استفاده از گریدها هستند. از گریدها یا شبکه ها برای نمایش ریسپانسیو پوسته استفاده می شود.

<div class="container"> <div class="row">
 <div class="col-md-8"> Parent fixed-width column
 <div class="row">
 <div class="col-md-6">Nested column</div>
 <div class="col-md-6">Nested column</div>
 </div>
 </div>
 </div>
 </div>
 <div class="container-fluid">
 <div class="row">
 <div class="col-md-4">Fluid ..</div>
 <div class="col-md-4">.. and full-width ..</div>
 <div class="col-md-4">.. example</div>
 </div>
 </div>

چنانچه لایه های مختلف از کلاس ها را با یکدیگر ترکیب کنیم، به ظاهر متفاوت در موبایل و دسکتاپ خواهیم رسید. در مثال زیر روی دسکتاپ، در هر ردیف، 4 ستون وجود دارد و در موبایل، این 4 ستون، به یک ستون ادغام می شود و پهنای مخزن نگهدارنده، تمام صفحه خواهد شد.

<div class="row">
 <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
 <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
 <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
 <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
 </div>

این امکان وجود دارد تا به طور کامل ریسپانسیو صفحات را بتوانید غیر فعال کنید. این کار اساسا منجر به غیر فعال کردن نسخه موبایل سایت در بوت استرپ خواهد شد.

به خاطر داشته باشید که اگر ریسپانسیو را غیر فعال کنید، با کوچک کردن عرض صفحه نمایش، هرگونه اجزای سایت که عرض ثابتی دارد و پهنای آن از عرض صفحه نمایش بیشتر است، نمایش داده نخواهد شد، به عنوان مثال می توان به منوهایی با پهنای ثابت، برای این منظور اشاره کرد.

در این شرایط منوهای موبایل نیز هیچگاه فعال نخواهند شد.

تایپوگرافی با استفاده از بوت استرپ

توسعه دهندگان کم تجربه گمان می کنند که کدهای HTML آن ها در تمام مرورگرها به همان صورتی که روی دسکتاپ خود می بینند، نمایش داده خواهد شد.

متاسفانه هر مرورگر کدهای شما را به روش خاص خود تفسیر و آن را نمایش خواهد داد. حتی مقادیر پیش فرض های استایل ها نیز از یک مرورگر به مرورگر دیگر متفاوت است. برای مثال، سایز فونت های تگ های H1 تا H6 بر روی تمام مرورگرها یکسان نمی باشد.

برخی از مرورگرها برای UL ها margin چپ چین در نظر می گیرند و برخی دیگر برای Padding ها. مرورگرها از مقادیر متفاوتی برای پیش فرض هایی نظیر border ها و padding ها برای تگ body استفاده می کنند و حتی دکمه های button نیز به صورت کاملا متفاوت رندر و نمایش داده می شود.

برای حل تمام این ناهمسازگاری ها، استایل ها ریست به وجود آمده اند تا استایل های پیش فرض مرورگرها را در CSS تعریف کنند.

بوت استرپ با خود در کنار ریست کردن استایل ها، ابزارهای مفید دیگری را آورد. یکی از این ابزارها، normalize.css است که وظیفه اش ریست کردن یکپارچه استایل مرورگرها است.

علاوه بر آن، این فایل حاوی استایل های پیش فرض دیگری نیز می باشد که همگی درون این فایل قرار گرفته اند. برای مثال، بوت استرپ فونت سایز پیش فرض را 14 پیکسل قرار می دهد با line-height معادل 1.428. فونت پیش فرض نیز به Helvetica/Arial تغییر داده شده است با فونت Sans Serif به عنوان فونت پشتیبان.

همه این استایل ها به تگ body و همه تگ های p و کلیه تگ های متنی اعمال می شود و به تگ های متنی margin-bottom:10px به صورت پیش فرض اعمال شده است.

علاوه بر این ها، استایل هایی به تگ های خاص داده شده اند که کار نوشتن و ویرایش متن را راحت می کند، مثلا تگ هایی نظیر mark, del, s, u, small, strong و غیره. کلاس های تراز کننده کمک خواهند کرد تا متن ها با راحتی بیشتری منظم سازی شوند، به عنوان مثال کلاس هایی نظیر text-left, text-center, text-right, text-justify و text-nowrap.

سوای این ها استایل های دیگری نیز برای نقل قول ها، لیست های ul و ol وجود دارد و تمام این ها می توانند تغییر نیز داده شوند. برای مشاهده لیست کامل، به صفحه تایپوگرافی سایت بوت استرپ مراجعه نمایید.

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

فرم ها

فرم ها تاریخچه و سرگذشت طولانی مدتی را دارند که به سال ها قبل بر می گردد و امروزه استفاده از فرم ها در صفحات وب، یکی از مرسوم ترین عملیاتی است که توسط آن می توان از کاربران درخواست کرد تا با سایت در ارتباط و تعامل باشند.

در حالی که HTML5 تعداد زیادی از خصیصه های جدید را برای فرم ها با خود به همراه آورد اما با این وجود، چهره گرافیکی فرم ها در خلال این همه سال و آپدیت های فراوان، تغییر خاصی نکرده است.

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

اول از همه اینکه، بوت استرپ کلیه ورودی فرم ها را نظیر input ها، textarea ها، , select ها را به اشغال 100 درصد پهنای داده شده از طریق والد، اجبار می کند. این موضوع به ما این امکان را خواهد داد تا از بین فرم های درون خطی (با استفاده از کلاس form-inline. که لیبل و تگ input را در یک خط رندر می کند) یا فرم های افقی (با استفاده از کلاس form-horizontal. که از گریدها برای هر ورودی در سطر مربوط به خود استفاده می کند تا فیلدها را هم تراز کند) یکی را انتخاب کنیم.

و در صورتیکه نیاز دارید تا متنی را داخل یک لیبل قرار دهید و آن را شبیه یک input کنید، می توانید از کلاس form-control-static. استفاده نمایید.

شاید یکی از بزرگترین ویژگی بوت استرپ ها که برای فرم ها قابل استفاده است، استایل های صحت سنجی برای فرم ها باشد نظیر ارورها، هشدارها، و وضعیت های موفق و غیر موفق فرم ها. این موارد می توانند با کلاس های .has-error، .has-warning، .has-success به ترتیب به تگ های مورد نظر خود اعمال شوند.

با ترکیب این ها با آیکون هایی که داخل تگ های input قرار داده می شوند، می توانیم به سرعت و به طرز موثری افکت های نمایش صحت یا عدم صحت داده های ورودی را به کاربر نمایش دهیم بدون آنکه از هیچ متنی استفاده کنیم.

کد زیر یک ورودی ایمیل به همراه یک علامت @ را نمایش می دهد و در صورتیکه ورودی کاربر فرمت صحیح ایمیل نباشد، یک آیکون زرد رنگ را به او نمایش می دهد.

<div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning">Email address input field with warning</label>
 <div class="input-group">
 <span class="input-group-addon">@</span>
 <input type="text" class="form-control" id="inputWarning" aria-describedby="inputGroupWarningStatus">
 </div>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
 <span id="inputGroupWarningStatus" class="sr-only">(warning)</span>
 </div>

تصاویر و آیکون ها

تصاویر در بوت استرپ می توانند به سادگی با اعمال کلاس img-responsive. به آن ها، ریسپانسیو شوند. این به معنای آن است که استایل {max-width:100%; height:auto;display:block} به تصویر اعمال خواهد شد.

در کنار ریسپانسیو کردن تصاویر، می توانیم به سادگی افکت های مختلفی را به تصاویر اضافه کنیم. برای مثال، تصاویری با گوشه های گرد توسط کلاس img-rounded. و نمایش تصاویری به صورت دایره ای با کلاس img-circle. و نمایش تصاویری به صورت بند انگشتی با کلاس img-thumbnail. میسر می شود.

بوت استرپ با بیش از 260 حروف که می توانند به جای آیکون ها استفاده شوند عرضه می شود. استفاده از حروف به جای فونت ها مزایای زیادی را نسبت به تصاویر دارد.

مهمترین آن ها این است فونت ها، وکتور هستند و در هر سایزی قابل نمایش هستند. آن ها همچنین می توانند به راحتی با CSS استایل بندی شوند. در نتیجه می توان رنگ و سایز آن ها را تغییر داد و یا حتی از افکت های drop shadow برای آن ها استفاده کرد.

دکمه ها، دکمه های رادیویی، و انتخابگرهای کرکره ای

دکمه ها یکی از آن چیزهایی است که هر مرورگر به صورت متفاوتی آن ها نمایش خواهد داد. این موضوع در صورتیکه بخواهید طراحی خود را بر روی تمام مرورگرها به صورت یکسان، نمایش دهید، به یک مشکل جدی برای شما تبدیل خواهد شد.

خوشبختانه بوت استرپ روش هوشمندانه ای برای دکمه ها دارد. در کنار نمایش یکسان دکمه ها بر روی تمام مرورگرها، بوت استرپ این امکان را فراهم خواهد کرد تا بتوان آن ها را با انواع مختلفی از استایل ها نمایش داد. شما می توانید از کلاس btn. برای یک لینک یا یک ورودی input استفاده کنید تا شبیه یک دکمه، نمایش داده شود.

شما می توانید گروهی از دکمه ها را داخل یک div قرار دهید و به div والد، کلاس btn-group. را اعمال کنید. با کمی کمک از جاوا اسکریپت، شما می توانید روی دکمه ها استایل هایی شبیه به چک باکس ها یا دکمه های رادیویی را اعمال کنید. یا آنکه می توانید دکمه هایتان را تبدیل به یک منوی کرکره ای کنید و این کار را با اعمال کلاس btn-group. در یک تگ والد انجام دهید.

منوها

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

در مانیتورها و صفحات نمایش بزرگ، آن ها به صورت افقی نمایش داده می شوند و روی دستگاه های موبایل و صفحات نمایش کوچک (زیر 768 پیکسل)، آن ها به صورت یک منوی همبرگری (یک دکمه با سه خط) کرکره ای نمایش داده می شوند.

نوار ابزارها، لیستی از منوها هستند که درون یک بلاک از کد HTML قرار دارند. آن ها می توانند یک لوگو و یا یک لوگو به همراه یک متن را شامل شوند، یک فرم جستجو را دارا باشند و یا یک منوی کرکره ای را درون خود داشته باشند.

منوها و نوار ابزارها می توانند با اعمال کلاس های نظیر  navbar-left. یا navbar-right. چپ چین و یا راست چین شوند.

خلاصه و نتیجه گیری

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

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

پرسش و پاسخ

بوت استرپ چیست؟

بوت استرپ یک فریم ورک برای فرانت اند شماست که برای ساخت سایت های مدرن و وب اپلیکیشن ها استفاده می شود. بوت استرپ اوپن سورس است و برای استفاده رایگان است و در عین حال، ویژگی های بیشماری را برای اجزای UI پوسته وب سایت شما فراهم می کند.

ویژگی هایی که برای دکمه ها، فرم ها و دیگر موارد استفاده می شود. بوت استرپ همچنین شامل یک کتابخانه غنی است که به زبان جاوا اسکریپت نوشته شده است.

چرا نیاز به استفاده از بوت استرپ داریم؟

مهندسان نرم افزار از بوت استرپ برای مقاصد گوناگونی استفاده می کنند. استفاده از بوت استرپ آسان است و به سادگی قابل پیاده سازی روی وب سایت است. یادگیری بوت استرپ آسان است.

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

بوت استرپ امکان استفاده از فونت ها به جای استفاده از آیکون ها را فراهم می کند. از بوت استرپ می توان برای آرایش دکمه ها، فرم ها، ورودی ها، ساخت راحت منوها و نوار ابزارها استفاده کرد.

بوت استرپ از پلاگین های زیادی به زبان جاوا اسکریپت پشتیبانی می کند که بسط و توسعه آن را امکان پذیر و منعطف می کند.

بوت استرپ در چه مواردی استفاده می شود؟

بوت استرپ ابزاری بسیار مفید برای ساخت UI و پوسته سایت و اپلیکیشن است. از بوت استرپ برای ساخت پوسته های ریسپانسیو و پشتیبانی از کلیه مرورگرها و بر طرف سازی مشکلات عدم سازگاری مرورگرها با یکدیگر استفاده می شود.

پوسته بوت استرپ چیست؟

یک پوسته بوت استرپ شامل فایل های HTML، CSS و کدهای جاوا اسکریپت است که برای استایل بندی استفاده می شوند.

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