وبلاگ با برنامه
» یک نمونه از ستون بندی CSS با فریمورک Bootstrap
یک نمونه از ستون بندی CSS با فریمورک Bootstrap
همانطور که مستحضر هستید کدنویسی CSS همواره با فریمورک هایی مثل Bootstrap و preprocessor هایی مانند ساس انجام میشود. در این مقاله قطعه کدهایی از سایت getbootstrap.com می آیند که در نتیجه با هم یک layout از یک قسمت از صفحه نخست یک وبسایت را تشکیل میدهند. این آموزش برای افراد علاقه مند به آشنایی با کدنویسی بخش فرانت اند است.
معرفی بوتسترپ
بوتسترپ یک لایبرری برای کدهای css است که سرعت و دقت کدنویسی را افزایش میدهد. برای استفاده از آن کافیست مراحل زیر را طی کنید! شایان ذکر است اینجا فقط مراحل نوشته میشود. برای درک بهتر این گام ها بقیه مقاله را بخوانید! همراه با کد توضیح داده شده است.
اولین روش استفاده از Bootstrap : با دانلود zip
در این روش نیازی نیست که هنگام کدنویسی پروژه, سیستم به اینترنت وصل باشد. زیرا ملزومات دانلود شده اند.
گام ۱: به سایت اصلی بوتسترپ بروید. در پاراگراف اول این مقاله به لینک سایت اشاره شد!
گام ۲: از بخش Downloadمیتوانید کدهایش را در قالب zip دانلود بفرمایید.
مطلب مرتبط
آموزش Communication در هوانوردیگام ۳: فایل ها را از حالت زیپ بیرون بیاورید.
گام ۴: فایل ها را کپی کنید و به داخل پوشه css پروژه خود پیست کنید!
دومین روش استفاده از Bootstrap با جاگذاری لینک CDN
در این روش اتصال به اینترنت مورد نیاز است.
گام ۱: به سایت اصلی بوتسترپ بروید. در پاراگراف اول این مقاله به لینک سایت اشاره شد!
گام ۲: یک خط کد کپی کنید و داخل index.html قرار دهید.
شروع ستون بندی با بوتسترپ
در بوتسترپ بصورت پیشفرض, ستون بندی grid column بر اساس ۱۲ ستون است. تمام صفحه به دوازده ستون برابر تقسیم شده است. به این ترتیب برای مثال اگر یک div بخواهد تمام صفحه را بگیرد (بصورت عرضی) باید از یکی از کلاس های زیر استفاده کند
col-lg-12 col-md-12 col-sm-12 col-xs-12
این در حالی است که اگر تصمیم بر ایجاد دو ستون برابر باشد بطوریکه تمام صفحه در دسکتاپ را بگیرند از دو div استفاده میشود. یکی کلاس col-lg-6 و دیگری نیز کلاس col-lg-6 دارد.
<div class="col-lg-6"> ... <div> <div class="col-lg-6"> ... <div>
تفسیرش این میشود: یک دیو با شش ستون و یک دیو با شش ستون در کنار هم قرار گیرند. شش ستون به همراه شش ستون, دوازده ستون را پر میکند.
کدهای نمونه از ستون بندی در بوتسترپ
یک فایل index.html با کلاس های بوتسترپ برای اموزش اولیه ایجاد کردم. آن را از اینجا دانلود بفرمایید! پس از دانلود کردن و خارج کردن فایل از حالت zip کافیست روی index.html دوبار کلیک کنید تا بروزر باز شود و حاصل این بوتسترپ را مشاهده نمایید. اسکرین شاتی که از بروزر خود گرفتم تصویر زیر را نشان داد، قاعدتا برای شما نیز باید این چنین باشد.
تجزیه تحلیل کلاس های بوتسترپ در داخل index.html
بیایید به فایل های دانلود شده برگردیم و آنها را بررسی کنیم. کدهای فایل index.html را با یک نرم افزار ویرایشگر کد مانند notepad یا Atom باز کنید.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com /bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/ Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
نکته 1: قطعه کد بالا برای بوتسترپ CDN است. بجای اینکه دانلود کنیم ترجیح داده شد از روش دوم برای فراخوانی بوتسترپ استفاده شود.
<div class="container">
نکته 2: در قطعه کد بالا به کلاس container توجه شود. این کلاس باعث میشود محتوا وسط چین بشود. منظور از محتوا تمام کدهایی است که داخل div با کلاس کانتینر است.
<div class="row">
نکته 3: دیو کلاس row در خط بالا برای 12 ستونه کردن است. داخل این دیو میتوان دیو های دیگری با کلاس هایی به فرمت col-md-8 قرار داد تا هشت ستونه شود. در غیر اینصورت هشت ستونه نمیشود.
<div class="col-md-8"> <h1>Red box</h1> </div> <!-- col-md-8 --> <div class="col-md-4"> <h1>Blue box</h1> </div> <!-- col-md-4 -->
نکته 4: کدهای بالا برای div های بعدی هستند که کلاس های col-md-4 col-md-8 دارد. منظور این کلاس هشت ستونه بودن برای ابعاد تبلت است. اینجا ابعاد تبلت با md اشاره شده است. همچنین کلاسی که عدد چهار دارد در بروزر کنار دیو هشت ستونه مینشیند و هر دو با هم شبیه اولین تصویر این مقاله بنظر میرسند.
توضیحات بیشتر: در بوتسترپ ابعاد دسکتاپ با lg , ابعاد تبلت با md , ابعاد موبایل با sm و ابعاد کوچکتر با xs نمایش داده میشود. در جریان هستید این کلمات در هنگام نامگذاری کلاس ها وسط کلاس بکار میروند. مثال: col-xs-4 , col-xs-8
<style media="screen">
.col-md-8{background-color: red; height: 200px}
.col-md-4{background-color: blue; height: 200px}
</style>
نکته 5: در پایان اشاره میشود به کد های استایلی که بصورت دستی در html وارد کردیم. اینجا برای بهتر نشان دادن باکس ها و دیو ها از رنگ قرمز و ابی استفاده شده و همچنین ارتفاعی داده شده تا در بروزر نمایش داده شوند. میتوانید height را از داخل استایل حذف کنید و یک تست انجام دهید. در بروزر خواهید دید که دیو های رنگی مشاهده نمیشوند.
بیایید همین طرح را Responsive کنیم!
کدهای رسپانسیو همین طرح در قالب index.html را از همینجا دانلود بفرمایید! این فایل را از حالت زیپ خارج کنید و روی ان دبل کلیک کنید تا در بروزر تصویر زیر را مشاهده نمایید! از انجا که گفته شد این طرح رسپانسیو می باشد باید در ابعاد موبایل و تبلت و دسکتاپ به خوبی نمایش داده شود تا کاربر بتواند به راحتی با فرم تماس کار کند و اطلاعات خود را وارد کند.
چرا طرح باید Responsive شود؟
باید فیلد های فرم ما به قدر کافی بزرگ باشد تا متنی که کاربر وارد میکند از کادر بیرون نزند. این مشکل معمولا در ابعاد کوچک رخ میدهد. لطفا بروزر خود را با موس به ابعاد کوچک ببرید! فرم تماس را میبینید که بسیار کوچک شد و کار با ان دشوار است. حالا میخواهیم با بوتسترپ یک کلاس گرید اضافه کنیم تا به بروزر بگوییم که در ابعاد کوچک فرم ما را نصف صفحه نشان دهد. به جای اینکه 4 ستون اختصاص دهد شش ستون اختصاص دهد تا کار با فرم راحت تر شود.
<div class="col-md-4 col-sm-6"> <h1>Blue box</h1>
در قطعه کد بالا یک کلاس جدید اضافه شده است. کلاس col-sm-6 را ببینید! باعث میشود در ابعاد کوچکتر شش ستون را پر کند. این کلاس را علاوه بر اینجا در دیو قبلی هم استفاده کردیم. منظور از دیو قبلی کد های زیر است.
<div class="col-md-8 col-sm-6"> <h1>Gray box</h1>
به این ترتیب در ابعاد کوچک هر دو به یک اندازه دیده میشوند. به تصاویر زیر دقت کنید! این تصاویر در ابعاد کوچک هستند.
حالت 1: در دو ستون برابر قرار دارند.
حالت 2: یکی 4 ستونه و یک هشت ستونه است.
حالت 3: هر دو دیو بخاطر فضای کوچک عرضی در یک ستون زیر هم قرار گرفته اند.
دو سوال از کدهایی که داخل ستون ها قرار داده شد!
سوال1: کدهای form چگونه کدنویسی شدند؟
پاسخ: انها کدنویسی نشدند بلکه از این لینک کپی پیست شدند. بوتسترپ کمپوننت هایی برای فرم اماده تدارک دیده است. لازم نیست همه کدها را خودمان بنویسیم. کارمان بسیار ساده شد! کافیست به سایت ان برویم و کمپوننت مورد نظر را انتخاب کنیم. سپس دکمه copy را که در کنار کد های ان قرار گرفته است بزنیم و به برگه خود در دسکتاپ پیست کنیم!
سوال2: متن داخل پاراگراف از کجا امده است؟
پاسخ: متن lorem ipsum یک متن ساختگی است. به زبان های مختلف وجود دارد و از سایت loremipsum.io قابل کپی پیست کردن است. فرض کنید بخواهیم یک پاراگراف بنویسیم تا بعنوان یک محتوای امتحانی در سایت قرار گیرد. در این جور مواقع بجای وقت گذاشتن و تولید محتوا انجام دادن میتوان از متن های اماده ای مثل لورم ایپسوم استفاده کرد.
رنگ های دیگر برای دکمه submit در فرم
رنگ دکمه ها در بوتسترپ اینگونه تعریف میشود. کافیست یکی از این کد ها را بجای کد دکمه در فرم جایگزین کنید!
<button type="button" class="btn btn-primary"> submit </button>
طبق کد بالا رنگ ابی با کلاس btn-primary تعریف میشود.
<button type="button" class="btn btn-secondary"> submit </button>
طبق کد بالا رنگ خاکستری با کلاس btn-secondary تعریف میشود.
<button type="button" class="btn btn-success"> submit </button>
طبق کد بالا رنگ سبز با کلاس btn-success تعریف میشود.
<button type="button" class="btn btn-warning"> submit </button>
طبق کد بالا رنگ زرد با کلاس btn-warning تعریف میشود.
<button type="button" class="btn btn-info"> submit </button>
طبق کد بالا رنگ فیروزه ای با کلاس btn-info تعریف میشود.
<button type="button" class="btn btn-dark"> submit </button>
طبق کد بالا رنگ کدر با کلاس btn-dark تعریف میشود.
<button type="button" class="btn btn-light"> submit </button>
طبق کد بالا رنگ روشن با کلاس btn-light تعریف میشود.
<button type="button" class="btn btn-link">submit</button>
طبق کد بالا بی رنگ بودن با کلاس btn-link تعریف میشود.
مدل های لبه رنگی button
شاید مدل های لبه رنگی را از مدل های توپر بیشتر دوست داشته باشید! طراحی وب به علاقه شما بستگی دارد. هم علاقه شما به عنوان طراح هم علاقه کاربر و البته گاهی علاقه کارفرمایی که از شما انتظار دارد مدل های مختلف ممکن را به او نشان دهید تا طبق سلیقه خود انتخاب کند. در هرصورت میتوانید از این قطعه کدهای جذاب و فانتزی بهره ببرید!
<button type="button" class="btn btn-outline-primary"> submit </button> <button type="button" class="btn btn-outline-secondary"> submit </button> <button type="button" class="btn btn-outline-success"> submit </button> <button type="button" class="btn btn-outline-danger"> submit </button> <button type="button" class="btn btn-outline-warning"> submit </button> <button type="button" class="btn btn-outline-info"> submit </button> <button type="button" class="btn btn-outline-light"> submit </button> <button type="button" class="btn btn-outline-dark"> submit </button>
نکته: همانطور که در ساختار کلاس ها ملاحظه میفرمایید تغییری در وسط انها ایجاد شده است. outline به معنای خط لبه است. همانطور که واضح بنظر میرسد حفظ کردن ان هم ساده است. این هم یکی از ویژگی های بوتسترپ می باشد که به سادگی کار با ان به ما کمک میکند. خیلی راحت به حافظه سپرده میشود و هنگام کدنویسی بخش های مختلف بدون نیاز به سر زدن به سایت بوتسترپ و کپی کردن از انجا، خودمان از حفظ کدنویسی میکنیم و کارمان سریعتر پیش میرود.
نکته: رنگ بندی انها نیز کاملا واضح است. primary نشانه ابی رنگ ، secondary به معنای خاکستری بودن، success به معنای سبز رنگ بودن ، danger به معنای قرمز بودن، warning با رنگ زرد همراه است وinfo همان رنگ ابی فیروزه ای است. light و dark هم رنگ روشن و رنگ کد هستند.
از اینکه این مقاله را خواندید سپاسگذارم!
