در این بخش برخی از کامپوننت های مفید در بوت استرپ Bootstrap را بررسی خواهیم کرد . کامپوننت هایی مانند دکمه button ، هدرها headers ، منوها navigation menus و سیستم های comment که در یک وب سایت بطور معمول یافت می شوند . با این کامپوننت های ، بوت استرپ bootstrap به ما کمک می کند که این ویژگی ها را به وب سایت خود به سرعت و سادگی اضافه نماییم .
بخش 19 – طراحی وب واکنش گرا ، بررسی اجزای بوت استرپ bootstrap
در این بخش برخی از کامپوننت های مفید در بوت استرپ Bootstrap را بررسی خواهیم کرد . کامپوننت هایی مانند دکمه button ، هدرها headers ، منوها navigation menus و سیستم های comment که در یک وب سایت بطور معمول یافت می شوند . با این کامپوننت های ، بوت استرپ bootstrap به ما کمک می کند که این ویژگی ها را به وب سایت خود به سرعت و سادگی اضافه نماییم .
کامپوننت های صفحه
کامپوننت های صفحه از ابتدایی ترین کامپوننت ها می باشند . بطور مثال کامپوننت هایی مانند هدر header ، پنل ها برای نمایش اطلاعات مهم ، نظرات تو در تو یا nested comment ، تصاویر بند انگشتی ، لینک های پشته ای .
در این بخش تلاش می کنیم تا کامپوننت های قابل استفاده مجددی در HTML با استفاده از کلاس های گفته شده در bootstrap بسازیم . اجازه بدهید تا با هدر صفحه header شروع کنیم .
هدر صفحه Page Header
داشتن یک header در یک صفحه ، اتفاق عجیب و بزرگی نیست و هر کسی می تواند با استفاده از یک تگ <h1> آن را در یک صفحه ی وب نشان دهد . اما برای نمایش یک header منظم و تمیز نیاز به آن است تا اطراف آن را با فاصله ها نظم داده و در زیر آن متنی کوچک بنویسیم که تمامی این موارد در حالت عادی امری وقت گیر است.
خوشبختانه ، بوت استرپ bootstrap کامپوننتی را برای اینکار در نظر گرفته و تمامی اینکارها در آن کامپوننت به شکلی زیبا صورت پذیرفته و براحتی می توان از آن در صفحه بهره برد . قبل از آنکه از کامپوننت page header در این بخش استفاده کنید ، اجازه دهید تا پروژه ای که از آن می خواهیم استفاده کنیم را تنظیم کنیم .
ابتدا فولدر پروژه ی اولی که در آموزش های قبلی برای شما شرح دادیم و با نام bootstrap_demo موجود است ، کپی کرده و آن را در جای جدیدی کپی کنید و اسم آن را bootstrap_19 بگذارید . فایل index.html را باز کرده و سپس تگ <h1> موجود در آن را که در بخش <body> وجود دارد پاک کنید .
حال اجازه دهید تا نشانه هدر page header را به فایل خود به شکل زیر اضافه کنیم :
هر زمان که شما نمی خواهید تا از یک تگ <h1> برای ایجاد یک page header استفاده کنید ، می توانید از یک تگ <div> که دارای کلاس page-header می باشد بهره ببرید تا یک کامپوننت هدر بسازید .
حال بگذارید تا صفحه ای که ساختیم را در مرورگر مشاهده نماییم ، آن بصورت زیر خواهد بود :
همانطوری که مشاهده می کنید ، کامپوننت page header هیچ استایل اضافه ای برای h1 نداشته ، به جز یک خط نازک خاکستری رنگ در زیر آن که برای نوشتن یک زیرنویس استفاده می شود که بزودی بررسی خواهیم کرد .
یک مشکل کوچک که ملاحظه می فرمایید این است که page header در گوشه ی سمت چپ مرورگر گیر کرده است . که این بخاطر آن است که ما یک کانتینر برای محتوای صفحه ی خود تعریف نکرده ایم . بنابراین یک کانتینر سراسری به شکل زیر تعریف می کنیم :
حالا page header قبلی را که ساختیم درون این کانتینر قرار می دهیم . که کد نهایی ما باید بصورت زیر شده باشد :
و نتیجه ی کار در مرورگر به شکل زیر است
اگر می خواهید یک زیرنویس در کنار هدر اصلی قرار دهید می توانید آن را در کنار تگ h1 خود قرار داده اما مطمئن شوید که آن را درون یک تگ <small></small> قرار داده اید ، بنابراین کد شما بشکل زیر خواهد بود :
نتیجه ی کار را در شکل زیر می بینید :
در بخش بعد کامپوننت پنل panel را بررسی خواهیم کرد .
دانلود سورس تمرین این قسمت
شاد و سلامت باشید
محمد جعفری فوتمی