آموزش bootstrap — چگونه از بوت استرپ استفاده کنیم؟

مقدمه مقاله آموزش bootstrap

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

HTML یک زبان نشانه گذاری است که صفحات وب با این زبان نوشته می‌شوند. در واقع ساختار کلی و ترتیب و جایگاه عناصر یک صفحه وب با استفاده از HTML تعیین می‌شود. HTML مخفف Hyper Text Markup Language است. اما تنها HTML کافی نیست! برای اینکه صفحه وب شما زیبا دیده شود یک زبان نشانه‌گذاری دیگر به نام CSS وجود دارد که مخفف Cascading Style Sheets به معنای صفحات استایل آبشاری است. از CSS به منظور استایل‌دهی صفحات وب استفاده می‌شود.

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

• مجموعه آموزش طراحی سایت با HTML و CSS — کلیک کنید

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

بوت استرپ یک فریم ورک است که در سال ۲۰۱۲ به صورت رایگان برای استفاده طراحان وب و توسعه‌دهندگان فرانت اند منتشر شده است. این فریم ورک رایگان مجموعه‌ای از دستورات CSS و JavaScript را شامل می‌شود که استفاده از آن موجب سریعتر شدن فرآیند طراحی صفحات وب می‌شود. همچنین اگر قصد دارید صفحات وب ریسپانسیو (واکنشگرا) را به آسانی طراحی کنید می‌توانید از بوت استرپ استفاده کنید.

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

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

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

نحوه کار با بوت استرپ

برای اضافه کردن فریم ورک بوت استرپ به صفحه وب خود تنها کافیست به فایل HTML خود مراجعه کنید. فایل را با استفاده از یک ویرایشگر مانند VS CODE باز کنید و در بخش head قالب تکه کد زیر مربوط به ورژن دلخواه بوت استرپ را اضافه کنید. برای مثال با استفاده از تکه کد زیر می‌توانید bootstrap 5 را به فایل HTML خود اضافه کنید:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

تبریک میگم! شما به راحتی موفق شدید فریم ورک بوت استرپ را به فایل خود اضافه کنید. حالا می‌توانید با توجه به کلاس‌های آماده‌ای که در بوت استرپ وجود دارد صفحات وب خود را طراحی کنید. برای اینکه بتوانید صفحات وب خود را واکنشگرا کنید باید تکه کد زیر را قبل از کتابخانه بوت استرپ به فایل HTML خود اضافه کنید. به بخش فایل خود بروید و کدهای زیر را در بخش head اضافه کنید.

<meta name="viewport" content="width=device-width, initial-scale=1">

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

قطعاً یکی از دلایل استفاده از بوت استرپ می‌تواند صرفه‌جویی در زمان و هزینه باشد. طراح وب به جای نوشتن کدهای CSS می‌تواند از کدهای اماده بوت استرپ استفاده نماید که البته برای این کار لازمه یادگیری و دانستن کلاس‌های بوت استرپ هستید. در ادامه به چند مورد دیگر از مزایای بوت استرپ اشاره می‌کنیم:

• استفاده از بوت استرپ بسیار آسان است: همانطور که در بالا گفتیم، چنانچه زبان‌های CSS ،HTML و JavaScrip را به خوبی یاد گرفته باشید به راحتی می‌توانید بوت استرپ را یاد بگیرید.
• بوت استرپ کاملاً واکنشگرا است: تمامی دستورات CSS به نحوی نوشته شده‌اند که با دستگاه‌های مختلف سازگار باشد. بنابراین صفحات وبی که با بوت استرپ طراحی می‌شوند در دسکتاپ، تبلت و تلفن همراه به درستی نمایش داده می‌شوند.
• کتابخانه بوت استرپ با مرورگرهای بروز سازگار است: بوت استرپ ۵ به غیر از مرورگر internet explorer 11 و نسخه‌های پایین‌تر آن با تمامی مرورگرهای جدید مثل کروم، فایرفاکس، ادج، اوپرا و سافاری سازگاری کامل دارد. چنانچه بخواهید در IE11 و پایین‌تر نیز از بوت استرپ پشتیبانی شود، باید از نسخه bootstrap 3 یا bootstrap 4 استفاده کنید.

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

ایجاد یک صفحه وب با بوت استرپ ۵

یک فایل HTML ایجاد کنید و ساختار کلی زیر را در آن وارد کنید.

<html>
<head>
  <title>Bootstrap 5</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

</body>
</html>

حال می‌خواهیم چند عنصر به صفحه وب اضافه کنیم. یک تگ div ایجاد می‌کنیم و داخل آن از یک تگ h1 و یک تگ p استفاده می‌کنیم. بنابراین کدهای زیر را به بخش body پروژه اضافه کنید.

<div>
  <h1>اولین صفحه وب با بوت استرپ ۵</h1>
  <p>برای مشاهده واکنشگرا بودن صفحه وب، سایز پنجره را تغییر دهید</p> 
</div>

نتیجه تصویر زیر خواهد بود.

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

container ها در بوت استرپ

هر صفحه وب دارای چندین لایه است. لایه‌بندی‌های بوت استرپ برای تراز بندی عنصرها مورد استفاده قرار می‌گیرد. ۷ نوع container در بوت استرپ وجود دارد که بسته به نیاز خود می‌توانید از هرکدام از آن‌ها استفاده کنید. container در نسخه جدید بوت استرپ واکنشگرا هستند. container های بوت استرپ دونوع هستند:

• container
• container-fluid

۱.container

بلوک پیش‌فرض و دارای عرض ثابت متناسب با هر صفحه نمایش است. البته در صفحه نمایش‌های کوچکتر از ۵۷۶ پیکسل دارای عرض ۱۰۰% است. این نوع container دارای ۵ دسته دیگر نیز است که در ادامه مشاهده می‌کنید:

• container-sm
• container-md
• container-lg
• container-xl
• container-xxl

جدول زیر سایزبندی هرکدام از container ها را بر اساس پیکسل (px) نمایش می‌‌دهد:

۲. container-fluid

زمانی که بخواهید محتوای شما از از ۱۰۰ درصد عرض صفحه وب استفاده کند و به علاوه، درصورتی که محتوای شما از عرض صفحه وب تجاوز کرد، مرورگر وب به صورت خودکار عرض صفحه را تنظیم کند، از کلاس container-fluid استفاده می‌شود. استفاده از این کلاس باعث می‌شود تا محتوای شما به صورت درست نمایش داده شود. این نوع از container در تمامی دستگاه‌ها با صفحه نمایش‌های مختلف دارای عرض ۱۰۰ درصدی است.

اضافه کردن container به صفحه وب

یک کلاس برای تگ div ایجاد کنید و کلاس container-fluid را به آن اضافه کنید. سایز بلوک به صورت ۱۰۰ درصد تنظیم خواهد شد. تگ div را به صورت زیر ویرایش کنید.

<div class="container-fluid">

پیشنمایش به صورت زیر خواهد بود.

نکته: دقت کنید که چون پس‌زمینه صفحه وب سفید است ممکن است به صورت واقعی نتیجه را مشاهده نکنید.

• آموزش طراحی قالب واکنشگرا Responsive با بوت استرپ Bootstrap — کلیک کنید

Spacing در بوت استرپ

بوت استرپ مجموعه‌ای از دستورات padding و margin دارد که از شماره ۰ تا ۵ شماره گذاری شده است. از حرف m برای margin و از حرف p برای padding استفاده می‌شود. هرچه رقم افزایش یابد میزان اسپیس (Space) نیز افزایش می‌یابد. ممکن است در کنار این حروفاتی نظیر t ،b ،l ،r نیز ببینید که درواقع خلاصه شده top ،bottom ،left ،right هستند. در زیر به توضیح هرکدام از حروفات اختصاری می‌پردازیم:

• حرف m: برای کلاس‌هایی که دارای margin هستند به کار گرفته می‌شود.
• حرف p: برای کلاس‌هایی که بخواهید دارای padding باشند استفاده می‌شود.
• حرف t: اختصار top است و برای کلاس‌هایی که بخواهید دارای margin-top یا padding-top باشد استفاده می‌شود.
• حرف b: اختصار bottom است و برای کلاس‌هایی که بخواهید دارای margin-bottom یا padding-bottom باشد استفاده می‌شود.
• حرف l: اختصار left است و اگر بخواهید به یک کلاس استایل margin-left یا padding-left بدهید استفاده می‌شود.
• حرف r: اختصار right است و اگر بخواهید به یک کلاس استایل margin-right یا padding-right بدهید استفاده می‌شود.
• حرف x: همانطور که می‌دانید x در مختصات نشانگر افقی می‌باشد و در بوت استرپ برای هردو سمت راست و چپ مود استفاده قرار می‌گیرد. بنابراین چنانچه بخواهید برای یک عنصر، کلاسِ دارایِ استایلِ margin-left و margin-right یا padding-left و padding-right بدهید از حرف x استفاده کنید.
• حرف y: حرف y در مختصات نشانگر عمودی است و دقیقاً برعکس حرف x عمل می‌کند. پس چنانچه بخواهید در بوت استرپ یک کلاس با استایل margin-top و margin-bottom یا padding-top و padding-bottom ایجاد کنید می‌توانید از حرف x استفاده کنید.

اضافه کردن Spacing به صفحه وب

حال مانند دستور زیر به تگ div یک کلاس p-5 اضافه کنید و نتیجه را مشاهده کنید.

<div class="container-fluid p-5">

Colors در بوت استرپ

بوت استرپ سری کدهای آماده برای رنگ‌ها نیز دارد که به دو بخش رنگ متن و رنگ پس زمینه تقسیم می‌شود. این کدها از ۹ رنگ تشکیل شده‌اند و هرکدام از رنگ‌ها نام مخصوص خود را دارند. رنگ‌ها عبارتند از:

• primary
• secondary
• success
• danger
• warning
• info
• light
• dark
• white

برای استفاده از این رنگ‌ها در متن از کلمه کلیدی text و برای استفاده در پس زمینه از کلمه کلیدی bg و برای استفاده در لینک‌ها از کلمه کلیدی link استفاده می‌شود.

اضافه کردن Colors به صفحه وب

مانند زیر به تگ div کلاس bg-primary و text-white را اضافه کنید و نتیجه را مشاهده کنید.

<div class="container-fluid p-5 bg-primary text-white">

Text alignment در بوت استرپ

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

چهار نوع چیدمان متن وجود دارد که در ادامه آموزش bootstrap به توضیح هرکدام می‌پردازیم:

• text-justify: برای مرتب سازی متن به صورت جاستیفای می‌توانید به عنصر خود، کلاس text-justify را اضافه کنید.
• text-center: برای مرتب سازی متن در وسط عنصر کافیست از کلاس text-center استفاده کنید.
• text-right: برای اینکه متن خود را در داخل یک عنصر راست چین کنید، می‌توانید از کلاس text-right استفاده کنید.
• text-left: برای اینکه متن خود را در داخل یک عنصر چپ چین کنید، می‌توانید از کلاس text-left استفاده کنید.

در ادامه به چندمورد تایپوگرافی اشاره کرده و توضیح می‌دهیم:

• text-nowrap: برای اینکه بخواهید از شکسته شدن متن در داخل یک عنصر جلوگیری کنید، می‌توانید از کلاس text-nowrap استفاده کنید.
• text-break: چنانچه متن طولانی باشد، استفاده از این کلاس موجب شکسته شدن متن خواهد شد.
• text-truncate: چنانچه متن داخل یک عنصر طولانی باشد، متن را محدود کرده و متن خارج از محدوده را نمایش نخواهد داد.
• text-capitalize: با اضافه کردن این کلاس به عنصر متنی، حروف اول هر کلمه را به حروف بزرگ تبدیل خواهد کرد در صورتی که متن شما انگلیسی باشد.
• text-lowercase: با اضافه کردن این کلاس به عنصر متنی، حروف متن را به حروف کوچک تبدیل خواهد کرد در صورتی که متن شما انگلیسی باشد.
• text-uppercase: با اضافه کردن این کلاس به عنصر متنی، حروف متن را به حروف بزرگ تبدیل خواهد کرد در صورتی که متن شما انگلیسی باشد.

اضافه کردن Text alignment به صفحه وب

حال مانند کد زیر یک کلاس text-center به تگ div اضافه کنید و نتیجه را مشاهده کنید.

<div class="container-fluid p-5 bg-primary text-white text-center">

اضافه کردن ستون به صفحه وب در مقاله آموزش bootstrap

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

<div class="container">
  <div class="row">
    <div>
      <h3>ستون ۱</h3>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
      <p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
    <div>
      <h3>ستون ۲</h3>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
      <p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
    <div>
      <h3>ستون ۳</h3>        
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
      <p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>
</div>

همانطور که ممکن است متوجه شده باشید، ستون ها به پایین عنصر چسبیده‌اند. بنابراین بهتر است یک margin-top با مقدار ۵ به تگ اصلی خود اضافه کنیم. مانند زیر کلاس container را ویرایش کنید.

<div class="container mt-5">

نتیجه تا به اینجا بدین صورت خواهد بود.

حال برای اینکه ستون‌ها در یک ردیف قرار گیرند از یک کلاس به نام col استفاده می‌کنیم. این کلاس را به هر یک از ستون‌ها اضافه کنید. نتیجه به صورت زیر خواهد بود.

در نهایت تمامی کدهای لازم برای طراحی ستون این صفحه به صورت زیر خواهد بود.

<div class="container mt-5">
  <div class="row">
    <div class="col">
      <h3>ستون ۱</h3>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
      <p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
    <div class="col">
      <h3>ستون ۲</h3>
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
      <p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
    <div class="col">
      <h3>ستون ۳</h3>        
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
      <p>... چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>
</div>

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

• آموزش بوت استرپ Bootstrap برای طراحی صفحات وب — کلیک کنید

سخن آخر درمورد آموزش bootstrap

به پایان آموزش bootstrap رسیدیم. همانطور که مشاهده کردید طراحی صفحات وب با بوت استرپ بسیار آسان است و علاوه بر آن، موجب صرفه جویی در وقت و هزینه می‌شود. دیگر نیازی نیست برای بخش‌های مختلف سایت خود صدتا کد CSS بنویسید. تنها کافیست کلاس‌های بوت استرپ را فرا بگیرید و از آن‌ها در طراحی استفاده کنید. اگر موضوعی برای طراحی صفحات وب ندارید می‌توانید از مقاله زیر نیز ایده بگیرید:

• موضوع برای طراحی وب سایت – ۱۰ ایده جذاب برای طراحی وب سایت — کلیک کنید