ویژگی هایی مانند منوها و ناوبری ها از اجزای ضروری هر وب سایتی می باشند . bootstrap با کامپوننت های زیادی در این زمینه برای کمک به ما آماده می باشد . در ادامه اولین منوی ناوبری خود را طراحی خواهیم کرد .
بخش 24 – طراحی وب واکنش گرا ، Navigation در bootstrap
ویژگی هایی مانند منوها و ناوبری ها از اجزای ضروری هر وب سایتی می باشند . bootstrap با کامپوننت های زیادی در این زمینه برای کمک به ما آماده می باشد . در ادامه اولین منوی ناوبری خود را طراحی خواهیم کرد .
Navs
Navs گروهی از لینک ها می باشد که در یک خط پشت سرهم یا در زیر هم قرار گرفته اند تا یک منوی ناوبری را برای ما ایجاد نمایند . ما این گروه از لینک ها را می توانیم بصورت دکمه هایی کوچک و یا تب ها بسازیم که به حالت اول یا همان دکمه های کوچک به اصطلاح pills می گویند . ما در ابتدا یاد می گیریم که چگونه یک tab-like فیلد را بسازیم و در ادامه حالت pill-like را می آموزیم .
یک منوی tab-like را بصورت زیر خواهیم نوشت :
که بعد از اجرای این کد ، صفحه ی ما به شکل زیر خواهد بود :
کلاس nav برای هر دو مدل tab و pills استفاده می گردد . همچنین باید برای نشان دادن منوی خود به شکل تب کلاس nav-tab را به آن اضافه نماییم .
همچنین برای ساخت یک منوی pills از همین شیوه استفاده کرده و کلاس nav-pills را به آن اضافه می نماییم . برای اینکار کد زیر را می نویسیم .
که اجرای این کد به شکل زیر خواهد بود :
همچنین ما می توانیم منوی خود را بصورت عمودی روی هم بچینیم که برای اینکار کلاس nav-stacked را به آن اضافه می نماییم .
که کدهای ما بعد از اجرا در مرورگر بصورت زیر خواهد بود :
دانلود سورس تمرین این قسمت
شاد و سلامت باشید
محمد جعفری فوتمی