رابط کاربری مبتنی بر بوت استرپ توییتر برای مبتدیان. نصب بوت استرپ انتخاب اجزای لازم
قبل از دانلود، مطمئن شوید که یک ویرایشگر کد (ما Sublime Text 3 را توصیه می کنیم) و مقداری دانش از HTML و CSS دارید. در اینجا ما به فایل های منبع نمی پردازیم، اما همیشه می توانید خودتان آنها را دانلود و مطالعه کنید. ما توجه خود را بر روی شروع کار با فایل های کامپایل شده بوت استرپ متمرکز خواهیم کرد.
در حال بارگذاری فایل های کامپایل شدهسریع ترین راه برای شروع: نسخه های کامپایل شده و کوچک شده CSS، JS و تصاویر ما را دریافت کنید. بدون سند یا فایل منبع.
2. ساختار فایلدر فایل های دانلود شده ساختار و محتوای زیر را می بینید که به طور منطقی بر اساس ویژگی های رایج گروه بندی شده اند و شامل هر دو نسخه کوچک شده و کامپایل شده است.
پس از دانلود، پوشه فشرده را از حالت فشرده خارج کنید تا ساختار Bootstrap (کامپایل شده) را ببینید. باید چیزی شبیه این باشد:
bootstrap / +-- css / ¦ +-- bootstrap. css ¦ +-- bootstrap . دقیقه css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap. دقیقه js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README. mdاین شکل اصلی Bootstrap است: فایل های کامپایل شده برای استفاده سریع و آسان تقریباً در هر پروژه وب. ما CSS و JS کامپایل شده (bootstrap.*) و همچنین CSS و JS کامپایل شده و کوچک شده (bootstrap.min.*) را در اختیار شما قرار می دهیم. فایل های تصویری با استفاده از ImageOptim، یک برنامه مک برای فشرده سازی تصاویر به PNG فشرده می شوند.
لطفا توجه داشته باشید که همه افزونه های جاوا اسکریپت به جی کوئری نیاز دارند.
3. آنچه شامل می شودبوت استرپ برای انواع کارها به HTML، CSS و JS مجهز است، همه آنها در دسته بندی هایی که می توانید در بالای صفحه پیدا کنید فهرست شده اند.
بخش های سند عناصر پشتیبانی شدهسبکهای بدنه رایج برای بازنشانی نوع و پس‌زمینه، سبک‌های پیوند، شبکه الگو و دو عنصر نشانه‌گذاری ساده.
سبک های CSSسبک‌های عناصر رایج HTML: طراحی، کد، جداول، فرم‌ها و دکمه‌ها. همچنین شامل Glyphicons، یک مجموعه آیکون عالی است.
اجزاءسبک های پایه برای اجزای رابط ساده: زبانه ها و دکمه ها، نوارهای پیمایش، پیام ها، سرصفحه های صفحه و غیره.
پلاگین های جاوا اسکریپتمانند مؤلفه ها، این افزونه های جاوا اسکریپت مؤلفه های تعاملی برای راهنمایی ابزار، بلوک های اطلاعاتی، مؤلفه های مدال و غیره هستند.
لیست اجزاءاجزای جاوا اسکریپت و افزونه ها با هم شامل عناصر رابط زیر هستند:
- گروه های دکمه
- لیست دکمه های کشویی
- برگه ها، دکمه ها و لیست های ناوبری
- نوار ناوبری
- میانبرها
- نشان ها
- هدرهای صفحه و عنصر قهرمان
- مینیاتور
- پیام ها
- شاخص های فرآیند
- عناصر مدال
- لیست های کشویی
- نکات ابزار
- بلوک های اطلاعاتی
- عنصر "آکاردئون"
- عنصر چرخ فلک
- ورودی صفحه کلید در پیش است
پس از یک مقدمه کوتاه، ما بر روی استفاده از Bootstrap تمرکز خواهیم کرد. برای انجام این کار، از یک الگوی HTML اصلی استفاده خواهیم کرد که شامل تمام عناصر فهرست شده در .
این چیزی است که یک فایل HTML معمولی به نظر می رسد:
برای ساختن یک قالب بوت استرپ مانند این، کافی است فایل های CSS و JS مناسب را ضمیمه کنید:
و همه چیز آماده است! با افزودن این دو فایل می توانید با استفاده از بوت استرپ یک وب سایت یا اپلیکیشن توسعه دهید.
سلام! در این مقاله به شما خواهم گفت که چگونه فریم ورک بوت استرپ را نصب و وصل کنید. می توانید در مورد اینکه Bootstrap چیست بخوانید.
قبلاً در مقالات قبلی در مورد نصب استاندارد بسیار گفته ام. اینجا همه چیز ساده است. ما به وب سایت رسمی getbootstrap.com می رویم، روی مورد Getting Started کلیک می کنیم و اولین گزینه را انتخاب می کنیم. بنابراین، ما نسخه کامل بوت استرپ را با تمام اجزای js و css دانلود می کنیم.
Bootstrap CDN فرصتی برای اتصال فریمورک از یک حافظه CDN بدون دانلود فایل های آن به رایانه شما است. طبیعتاً در این مورد نمی توان صحبت از سفارشی سازی کرد.
سفارشی سازی چارچوباما واقعیت این است که بوت استرپ به طور پیش فرض شامل اجزای زیادی است و برخی از آنها ممکن است هنگام توسعه یک سایت خاص برای شما مفید نباشند. به عنوان مثال، شما در حال طراحی یک فروشگاه اینترنتی هستید. ممکن است نیازی به مدال و راهنمای ابزار نداشته باشید و ممکن است به بسیاری از اجزای css نیاز نداشته باشید. در این صورت عاقلانه است که این مولفه ها را در چارچوب قرار ندهیم.
یا در حال ایجاد یک وبلاگ ساده هستید. بیایید بگوییم که شما واقعاً به هیچ چیز نیاز ندارید، بنابراین می توانید فقط مش و یکی از مهم ترین اجزا را رها کنید.
انتخاب تنها چیزی که نیاز دارید یک رویکرد حرفه ای برای ایجاد وب سایت و استفاده از بوت استرپ است. به طور پیش فرض، نسخه فشرده نشده سبک های CSS این فریم ورک در آخرین نسخه 143 کیلوبایت وزن دارد. و اسکریپت ها بیش از 60 کیلوبایت هستند. بله، اگر کد را فشرده کنید، می توانید وزن را 20-40٪ کاهش دهید، اما باز هم فایل ها سبک ترین نخواهند بود.
به عنوان مثال، اگر همه مؤلفه ها را غیرفعال کنید و فقط شبکه را رها کنید (این اغلب انجام می شود)، وزن css فقط 15-20 کیلوبایت خواهد بود و به صورت فشرده چند کیلوبایت دیگر کمتر خواهد بود. به این ترتیب به حداکثر سرعت و بهینه سازی پروژه خود دست خواهید یافت.
خوب، این فقط یک نظریه بود. برای سفارشی سازی فریم ورک به همان وب سایت رسمی مراجعه کرده و به Customize بروید.
انتخاب اجزای لازماولین قدم در اینجا این است که پیکربندی کنید کدام مؤلفه ها را می خواهید در نسخه بوت استرپ خود بگنجانید. بیایید با CSS شروع کنیم:
سبک های رسانه چاپی - پرسش های رسانه ای برای چاپ. اگر قصد چاپ صفحات سایت را ندارید، می توانید آن را غیرفعال کنید.
تایپوگرافی، کد، جداول، فرم‌ها و دکمه‌ها همه چیزهایی هستند که اگر واقعاً بخواهید می‌توانید در CSS به آنها استایل بدهید. البته این کار زمان بر است، اما اگر طراحی عناصر شما با آنچه فریم ورک به طور پیش فرض ارائه می دهد بسیار متفاوت است، می توانید تمام این سبک های CSS را غیرفعال کرده و خودتان بنویسید.
Grid System در واقع یک شبکه است. من هیچ فایده ای در غیرفعال کردن آن نمی بینم، زیرا این قدرت اصلی چارچوب است. به لطف شبکه است که می توانید به راحتی قالب ها را با هر دستگاهی تطبیق دهید و امروزه در عصر ترافیک تلفن همراه این امر بسیار مهم است. ما تحت هیچ شرایطی آن را خاموش نمی کنیم.
ابزارهای پاسخگو - ابزارهای تطبیقی، همچنین توصیه می کنم هرگز آنها را غیرفعال نکنید. در مقاله بعدی در مورد ابزارهای تطبیقی صحبت خواهیم کرد، جایی که به طور مفصل به سیستم شبکه نگاه خواهیم کرد. اینها کلاس هایی هستند که به شما امکان می دهند یک عنصر را مخفی کنید یا در عرض صفحه نمایش مشخصی قابل مشاهده کنید. بسیار راحت و مفید.
به عنوان مثال، مواردی مانند گروه های فهرست، نوار دکمه ها، نمادها، پانل ها، هشدارها، صفحه بندی، خرده نان و غیره هستند. همچنین می توانید فونت آیکون را غیرفعال کنید. این کار در شرایطی ارزش دارد که به هیچ وجه نیازی به آیکون در سایت ندارید یا مجموعه دیگری را وصل می کنید. در واقع، شما باید بنشینید و به این فکر کنید که از همه اجزای ارائه شده چه چیزی نیاز دارید و چه چیزی ندارید. هر سایت جداگانه مجموعه خاص خود را خواهد داشت، زیرا هر سایت دارای طراحی و عملکرد متفاوتی است.
اجزای جاوا اسکریپت
اینها منوهای کشویی، نکات ابزار، پنجره های مدال و لغزنده هستند. اگر به هیچکدام از اینها نیاز ندارید، آن را خاموش کنید. در برخی موارد، زمانی که سایت شما دارای یک منوی کشویی، یک نوار لغزنده در صفحه اصلی و پنجره های مدال باشد، همه اجزا واقعاً می توانند مفید باشند. در برخی موارد، حداکثر 1-2 مؤلفه ممکن است مفید باشد، سپس نیازی به طولانی کردن کد نیست، اجزای غیر ضروری را غیرفعال کنید.
پلاگین های جی کوئریدر اینجا می‌توانید پلاگین‌های کتابخانه جی کوئری را غیرفعال کنید که به مؤلفه‌های جاوا اسکریپت به درستی کار می‌کنند. بر این اساس، اگر از اسلایدر در سایت خود استفاده نمی کنید، پس نیازی به پلاگین برای ایجاد چرخ فلک ندارید، اگر به tooltips نیاز ندارید، tooltips.js و غیره را غیرفعال کنید.
پلاگین scrollspy موقعیت متن را نظارت می کند و بسته به این، یک یا یکی دیگر از موارد منو را برجسته می کند. معمولاً چنین ویژگی در صفحات فرود مورد نیاز است؛ من عملاً هرگز آن را در سایت های معمولی ندیده ام. و غیره. به خوبی به آنچه نیاز دارید و آنچه ندارید نگاه کنید.
متغیرهای کمتردر مرحله بعد، یک آیتم بزرگ در مقابل شما باز می شود که در آن آیتم های فرعی زیادی با تنظیمات برای متغیرهای کمتر وجود دارد. در اینجا تقریباً همه چیز را می توانید تغییر دهید: رنگ ها، اندازه فونت ها، نقاط شکست، تعداد ستون ها در شبکه، تورفتگی ها و غیره.
البته، برای انجام این کار، باید حداقل اصول Less را بدانید یا حداقل به طور مستقیم در این فرم ها پیمایش کنید.
به عنوان مثال، اگر متغیر @font-family-base را می بینید، باید حداقل به طور مستقیم بفهمید که این متغییر مسئول نام فونت است که فونت پایه سایت است. خوب، متغیر @font-size-base اندازه فونت پایه را تعیین می کند. به طور پیش فرض در بوت استرپ 14 پیکسل است.
شما می توانید تمام این فیلدها را ویرایش کنید. فقط 14 را به 20 تغییر دهید و اکنون می توانید چارچوبی را دانلود کنید که اندازه فونت پیش فرض آن 20 پیکسل است. بر این اساس، می توانید بلافاصله اندازه سرفصل ها و غیره را تنظیم کنید.
راه اندازی شبکهتنظیمات سیستم گرید نیز برای ما بسیار جالب است، در اینجا آنها هستند:
همانطور که می بینید، می توانید تعداد ستون ها و عرض تورفتگی بین آنها را در چند ثانیه تغییر دهید. متغیر grid-float-breakpoint نقطه ای را تعیین می کند که در آن منوی تلفن همراه در یک نماد جمع می شود.
اگر مقدار را، به عنوان مثال، به @screen-md-min تغییر دهید، در عرض 991 پیکسل یا کمتر، جمع شدن رخ می دهد. همچنین می توانید این متغیر را حذف کرده و مقدار آن را به پیکسل بنویسید. مثلا 520 پیکسل. سپس کوچک کردن منو فقط در تلفن های هوشمند و تلفن های همراه رخ می دهد.
در واقع، صفحه سفارشی سازی بوت استرپ تنظیمات زیادی دارد، اما به طور کلی این روش سفارشی سازی (استفاده از صفحه سفارشی سازی در وب سایت رسمی) سریع ترین و راحت ترین نیست. در ادامه سریع ترین راه را به شما نشان خواهم داد.
هنگامی که نیاز به ایجاد 2 تا 10 تغییر در چارچوب دارید یا به سادگی اجزای لازم را غیرفعال کنید، از صفحه سفارشی سازی استفاده کنید. اگر می خواهید مقادیر بیشتری را تغییر دهید، باید از روش دیگری استفاده کنید.
در واقع، هنگامی که نسخه چارچوب خود را پیکربندی می کنید، روی دکمه بزرگ در پایین صفحه کلیک کنید. نسخه ای از Bootstrap را برای شما کامپایل کرده و آن را در رایانه شما دانلود می کند. سپس تنها کاری که باید انجام دهید اتصال و استفاده است. قبلاً در مقالات قبلی در مورد اتصال صحبت کرده ام (از جمله نحوه انجام آن در وردپرس).
دانلود منابع کمتر و ویرایش آنهاهمانطور که قبلاً گفتم، اگر نیاز به ویرایش های زیادی در کد منبع فریمورک دارید و می خواهید تغییرات را فوراً مشاهده کنید، به منابع کمتری نیاز خواهید داشت. می توانید آنها را در همان مکان نسخه کامل فریمورک دانلود کنید - در بخش شروع به کار.
برای کار با منابع کمتر و ویرایش آنها به موارد زیر نیاز دارید:
حداقل مقداری دانش از css و کمتر یا یک پیش پردازنده دیگر
کامپایلر کمتر (رایگان قابل دانلود است)
در واقع، من در مورد سفارشی‌سازی از طریق منابع کمتری صحبت نمی‌کنم، اما این بهترین روش است، زیرا نیازی نیست 100 بار به صفحه Customize بروید و نسخه‌های جدیدتر و بیشتری از فریم ورک را کامپایل کنید.
تم بوت استرپ یا تغییر ظاهر عناصربه طور پیش فرض، در نسخه کامل فریم ورک، می توانید فایل bootstrap-theme.css را نیز در پوشه css پیدا کنید. اتصال آن به سایت ضروری نیست. چه عملکردهایی را انجام می دهد؟ این فایل فقط برای تغییر سبک عناصر مورد نیاز در صورت لزوم مورد نیاز است.
همین نقش را می‌توان با style.css خودتان انجام داد، که در آن می‌توانید سبک‌ها را نیز لغو کنید. Bootstrap-theme یک فایل ضروری نیست، بلکه برای سفارش استفاده می شود. به عنوان مثال، شما 3 فایل دارید:
bootstrap.css – البته این کد خود فریمورک است.
bootstrap-theme.css – در اینجا شما سبک های عناصر بوت استرپ را نادیده می گیرید.
style.css – برای عناصر خود در این فایل استایل بنویسید.
سپس در کد و ساختار پروژه نظم خواهید داشت. اما هیچ کس شما را منع نمی کند که همه عملیات را در یک فایل - style.css انجام دهید و اصلاً از فایل تم استفاده نکنید.
مهمترین چیز این است که فایل تم و css خود را دیرتر از فایل با کد فریمورک در نشانه گذاری html قرار دهید تا استایل ها با موفقیت لغو شوند.
نمونه ای از نحوه کار قالب بندیهمانطور که قبلاً گفتم، بوت استرپ به طور پیش فرض شامل یک فایل تم بوت استرپ است. سعی کنید آن را وصل کنید. توجه می کنم، بعد از فایل اصلی وصل شوید.
به طور پیش فرض، دکمه های بوت استرپ به شکل زیر هستند:
و به این ترتیب ظاهر آنها پس از اتصال فایل با موضوع تغییر می کند:
همانطور که می بینید، یک گرادیان جزئی ظاهر می شود. بر این اساس، می توانید کد را در فایل بوت استرپ-موضوع بازنویسی کنید و استایل های خود را برای دکمه ها دریافت کنید. اما ممکن است بپرسید چرا این تغییرات را مستقیماً در bootstrap.css انجام نمی دهید؟ خب، واقعیت این است که نسخه های جدید فریم ورک به طور مداوم در حال انتشار هستند و اگر تصمیم به ارتقا داشته باشید، اجرای تغییرات خود در نسخه جدید دشوار خواهد بود. زمانی که می‌توانید یک فایل جداگانه ایجاد کنید و تغییرات را در آنجا توضیح دهید، برای یک توسعه‌دهنده به‌عنوان شکل خوبی در نظر گرفته می‌شود که کد منبع را لمس نکند. بسیار هوشمندتر و راحت تر است.
چگونه تم های جدید بوت استرپ دانلود شده از اینترنت را نصب کنیم؟سایت های بسیار زیادی وجود دارند، اکثرا خارجی، که می توانید تعدادی تم و قالب را به صورت رایگان دانلود کنید. برای جلوگیری از سردرگمی، بیایید وب سایتی را در نظر بگیریم که با استفاده از بوت استرپ به عنوان یک الگو، و یک تم به عنوان مجموعه ای از قوانین CSS طراحی شده است که ظاهر استاندارد عناصر را نادیده می گیرد.
چنین تم هایی را می توان برای مثال از bootswatch.com/ بارگیری کرد و با استفاده از یک موتور جستجو می توانید ده ها مورد دیگر را پیدا کنید.
اصل کلی نصب چنین تم هایی بستگی به سایتی دارد که آنها را از آنجا دانلود می کنید. اگر می توانید آن را با فرمت بوت استرپ-تم دانلود کنید، عالی است، آن را دانلود کنید و وصل کنید. به عنوان مثال، در bootswatch، باید bootstrap.css را دانلود کرده و فایل سبک چارچوب استاندارد خود را با آن جایگزین کنید. همچنین گزینه ای با منابع کمتر وجود دارد.
با شروع این مقاله، ما شروع به مطالعه چارچوب Twetter Bootstrap 3 می کنیم که اغلب برای ایجاد وب سایت ها، پنل های مدیریت، صفحات فرود و برنامه های وب استفاده می شود، زیرا سهولت توسعه، ساختار شفاف و سازگاری صفحات را تضمین می کند.
نصب یک قالب پایه بوت استرپ 3برای استفاده از ابزارها و روش‌های Bootstrap 3، باید به http://getbootstrap.com بروید و آرشیو را با پوشه‌های css، فونت‌ها، js و فایل‌های مربوطه داخل آنها دانلود کنید.
اگر نمی‌دانید چگونه استایل‌های CSS و اسکریپت‌های js را به هم متصل کنید، توصیه می‌کنم این و این مقاله را ببینید و در مورد ما، سبک‌های CSS در بخش‌هایی به هم متصل می‌شوند.
و اسکریپت ها قبل از تگ بسته شدن
در پایین صفحه.همچنین می‌خواهم توجه داشته باشم که استفاده از فایل‌های bootstrap.min.css و bootstrap.min.js به نفع سایت شما خواهد بود، زیرا این فایل‌ها حجم کمتری دارند و تأثیر مثبتی بر سرعت بارگذاری خواهند داشت.
اتصال فونت ها به دو روش انجام می شود:
گزینه دوم ارجح است، اما مهم نیست که کدام روش را انتخاب کنید، اتصال به این صورت انجام می شود
@font-face( font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- regular.ttf)؛ ) h2( font-family: glyphicons-halflings-regular,sans-serif;)
یا بهتر است بگوییم در تگ style برای روش اول و تمام متن های داخل آن را برای روش دوم در فایل css قرار دهید.
نصب جی کوئریبرای اینکه Bootstrap 3 به درستی کار کند، علاوه بر این باید فایل کتابخانه jquery را از وب سایت رسمی jquery.com از طریق لینک دانلود کنید و آن را در پوشه js سایت خود قرار دهید.
اتصال jquery قبل از تگ بسته شدن اتفاق می افتد
کوکی ها ارائه خدمات خود را برای شما آسان تر می کنند. با استفاده از خدمات ما به ما اجازه استفاده از کوکی ها را می دهید.
، اما قبل از فایل bootstrap.js
از آنجایی که jquery باید قبل از بوت استرپ بارگیری شود.
سایز شبکه و صفحه نمایش بوت استرپ 3اساس Bootstrap مجموعه ای از کلاس ها است که بر روی آنها یک شبکه 12 ستونی (col-) ساخته شده است. در داخل شبکه، 5 نوع صفحه نمایش -xs- -sm- -md- -lg- -xl- پشتیبانی می شود.
- -xs- اندازه صفحه نمایش کمتر از 575 پیکسل؛
- -sm- اندازه صفحه نمایش بیش از 576 پیکسل و حداکثر 767 پیکسل.
- -md- اندازه صفحه نمایش بیش از 768 پیکسل و حداکثر 991 پیکسل.
- -lg- اندازه صفحه نمایش بیش از 992 پیکسل و حداکثر 1199 پیکسل.
- -xl- اندازه صفحه نمایش بیش از 1200 پیکسل؛
بنابراین، یک div با کلاس col-lg-12 به این معنی است که در یک صفحه بزرگ، ستون div 12 ستون یا 100٪ عرض را اشغال می کند، به طور مشابه یک div col-sm-6 در صفحه نمایش تلفن هوشمند، 6 ستون یا 6 ستون را اشغال می کند. 50 درصد عرض.
انواع ظروف توری. طرح بندی لاستیکیانواع اصلی ظروف برای یک شبکه، کلاس کانتینر و کانتینر-سیال هستند.
هنگامی که در داخل یک ظرف استفاده می شود، شبکه شما به صورت بصری یک سوم از صفحه نمایش در مرکز را اشغال می کند و تمام 12 ستون در این قسمت قرار دارند.
با قرار دادن گرید در کلاس container-fluid، تمام عناصر چیدمان مانند یک صفحه لاستیکی در سراسر صفحه قرار می گیرند و با کاهش عرض، به سمت یکدیگر حرکت می کنند.
توصیه خاصی برای استفاده از کانتینر و سیال کانتینر وجود ندارد، زیرا همه چیز به چیدمان طراحی و هدف چیدمان بستگی دارد، با این حال، استفاده از سیال کانتینر برای پنل مدیریت سایت و کانتینر مناسب است.
علاوه بر این، کلاس -fluid را می توان نه تنها برای کلاس کانتینر، بلکه در رشته ردیف نیز اعمال کرد تا عناصر را در یک ردیف مرتب کند. با این حال، اگر مایع ردیفی را در یک ظرف معمولی قرار دهید، تفاوت را متوجه نخواهید شد. این ترکیب بهتر است در خارج از div.container استفاده شود، مانند این:
سلام من یک قالب بوت استرپ 3 هستم
ظرف من سیال نیست!
و من سیال ردیفی هستم!خطوط برای قرار دادن عناصرکلاس row برای قرار دادن عناصر شبکه در یک ردیف استفاده می شود، این به شما امکان می دهد آنها را به صورت افقی مرتب کنید، اما باید در نظر داشته باشید که مجموع شاخص های موجود در ردیف نباید بیشتر از 12 باشد، در غیر این صورت آخرین عنصر خواهد بود. به ردیف دوم منتقل شد.
عنوان 1 سرفصل 2 سرفصل 3
اگر اندازه صفحه مرورگر را کاهش دهید، عنوان ها در یک لیست عمودی از یک ردیف افقی قرار می گیرند.
کلاس های دید عنصرسیستم چیدمان Bootstrap 3 کلاس های اضافی را برای نمایش یا پنهان کردن عناصر در دستگاه ها و صفحه های مختلف ارائه می دهد. آنها به عنوان قابل مشاهده-*-* و پنهان-* تعیین می شوند.
کلاس نمایش قابل مشاهده-*-* بعد از خط تیره اول معمولاً یک شناسه نوع صفحه نمایش (xs, sm, md, lg, xl) و بعد از خط تیره دوم اندازه ستون (1-12) وجود دارد. به عنوان مثال، visual-lg-6 - عنصر در یک صفحه نمایش بزرگ، 6 ستون عرض قابل مشاهده است.
پنهان کردن کلاس hidden-* بعد از خط تیره یک شناسه نوع صفحه نمایش (xs,sm,md,lg,xl) وجود دارد، به عنوان مثال، یک عنصر نشانه گذاری با کلاس hidden-xs در دستگاه های کوچک قابل مشاهده نخواهد بود (اندازه صفحه نمایش کمتر از 575 پیکسل).
ترکیب این عناصر به شما امکان می دهد کانتینرهای div را نشان یا پنهان کنید:
عنوان 1 سرفصل 2
عنوان اول در دستگاه های بزرگ قابل مشاهده است، در حالی که عنوان دوم در صفحه نمایش های کوچک ناپدید می شود. برای انجام این کار، اندازه پنجره مرورگر را کاهش دهید تا اندازه آن از نظر عرض شبیه به صفحه نمایش یک دستگاه تلفن همراه باشد.
همچنین در محفظه div در کلاس، show یا hidden را مشخص کنید، اما در این حالت وقتی صفحه تغییر می کند، ویژگی های نمایش تغییر نمی کند: اگر قابل مشاهده باشد، قابل مشاهده است، اگر مخفی شود، فقط کلمه hidden را از کلاس حذف کنید. به شما امکان می دهد عنصر مورد نظر را ببینید.
پرسش های رسانه ای در بوت استرپ 3برای استفاده از پرسش‌های رسانه‌ای CSS، باید نماد ویژه @media را در فایل css و حداقل و/یا حداکثر عرض صفحه را در براکت مشخص کنید. اگر در نشانه گذاری css معمولی باید اندازه صفحه نمایش را به پیکسل بنویسید، در بوت استرپ 3 می توانید ساختار زیر را بنویسید:
@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- دقیقه) (...)
تغییر ترتیب عناصرکلاس جالب دیگری که به شما امکان می دهد بلوک ها را در داخل یک ظرف جابجا کنید، کلاس push عنصر را به سمت راست و کلاس pull را به سمت چپ منتقل می کند.
هنگام ترکیب از ظروف مجاور، می توانید ترتیب دومی را هنگام تغییر اندازه صفحه تغییر دهید. در این مثال، در یک صفحه نمایش بزرگ (-lg-) عنوان 2 در سمت چپ و عنوان 1 در سمت راست قرار دارد، هنگامی که عرض صفحه به اندازه متوسط (-md-) کاهش می یابد، عناصر تغییر می کنند و ترتیب خواهد شد. متوالی شدن
عنوان 1 سرفصل 2
اجازه دهید این اولین آشنایی را با سیستم چیدمان Bootstrap 3 به پایان برسانم؛ شما یاد گرفته اید که چگونه استایل ها و اسکریپت های قالب، عناصر اصلی شبکه، پرس و جوهای رسانه، انواع کانتینر و غیره را نصب کنید. در مقالات بعدی به عناصر کمکی و اضافی نگاه خواهیم کرد: منوها، دکمه ها، لغزنده ها، نمادها و موارد دیگر.
24 فوریه 2012 در 09:25 بعد از ظهر رابط کاربری مبتنی بر بوت استرپ توییتر برای مبتدیان- طراحی وب سایت
مقدمه در اوقات فراغت، به عنوان یک سرگرمی، یک جمع‌آوری یک صفحه‌ای از عناوین خوراک خبری جالب ایجاد می‌کنم. در مرحله‌ای، عملکرد اولیه نمونه اولیه آماده شد، تنها چیزی که از دست می‌رفت، چک باکس کنار کار «طراحی» بود. بیان مشکل برای به دست آوردن یک رابط کاربری زیبا بدون تسلط بر جادوی یک طراح (شما فقط ابتدایی دارید دانش رنگ) و یک برنامه نویس (شما فقط دانش اولیه html و css دارید).
صفحه از عناصر زیر تشکیل شده است
- نام
- فرم ارسال لینک خبر
- فرم ارسال کد خواننده منحصر به فرد از طریق ایمیل
- فرم ورود کد خواننده منحصر به فرد
- فهرست اخبار گروه بندی شده بر اساس تاریخ (تاریخ، زمان، عنوان پیوند، تعداد کلیک، اخبار قابل خواندن یا جدید)
- لینک به rss
- پیوند به افزونه کروم
- شناسه انتشار
- ایمیل بازخورد
... ...
خط دوم برای تطبیق خودکار رابط با دستگاه های پشتیبانی شده توسط Bootstrap مورد نیاز است. منظور من از "گوشت" لیست اخبار است. ساده ترین راه برای انجام این کار استفاده از جدولی با فریم های غیرفعال است. ستون اول تاریخ (فقط یک بار برای هر گروه)، ستون دوم زمان، سوم عنوان و تعداد انتقال است. همه اینها، طبق قوانین بوت استرپ، باید در یک ظرف بسته بندی شوند:
| (تاریخ) | (زمان) | (عنوان) ((تعداد انتقال)) |
برای خواندن اخبار یک کلاس ویژه را نشان می دهیم:
(تیتر) مرحله 3. فرم ارسال لینک خبر. در اینجا دوباره همه چیز ساده است، بوت استرپ چندین سبک فرم آماده را ارائه می دهد: یک فرم معمولی، یک فرم یک خطی، یک فرم جستجو... ما به فرم دوم نیاز داریم، آن را به ظرف خود در جلوی جدول اضافه کنید:
اضافه کردن ...
class="span10" - Bootstrap ساخت یک رابط را بر اساس شبکه ای از 12 ستون فرض می کند؛ عناصر ما می توانند در امتداد آن تراز شوند. از طریق روش علمی آزمون و خطا، به عرض فیلد ورودی برابر با 10 رسیدم. مرحله 4،5،6. یک کلاه. ایده‌های من در مورد اینکه چگونه یک وب‌سایت کاربرپسند باید به نظر برسد، سبک مینیمالیستی را نشان می‌دهد: همه چیز غیر ضروری پنهان است، هر چیزی که نمی‌توان پنهان کرد کم رنگ است. ما فرم ها را در یک منوی کشویی پنهان می کنیم، پیوندها را به rss و پسوند کروم کم رنگ می کنیم. همه اینها را در یک هدر قرار می دهیم که آن را به بالای سایت می چسبانیم (کلاس = "navbar navbar-fixed-top"):
*** ...
خود فرم ها:
... ×یک کد منحصر به فرد از طریق ایمیل ارسال کنید لغو ارسال ×یک کد خواننده منحصر به فرد وارد کنید
به شما امکان می دهد اخبار خوانده شده در رایانه های مختلف را همگام سازی کنید.
لغو ارسالنکته مهم. برای انجام این کار، باید چند اسکریپت را به هم وصل کنید:
...
...
انتشار 2012/02/19 23:49 *****
ResultEpilogue توییتر بوت استرپ این امکان را فراهم کرد که بدون تلاش و دانش زیاد، بدون نوشتن حتی یک خط CSS و بدون شکستن زیاد کد html، یک رابط نمونه اولیه بسیار زیبا داشته باشید که از نشان دادن آن به مردم خجالت نمی‌کشید. اگر علاقه مند هستید، در مقاله بعدی به شما خواهم گفت که چگونه، بدون دانش عمیق PHP + MySQL (فقط با مهارت های اولیه برنامه نویسی)، می توانید عملکردی را پیاده سازی کنید که به شما امکان می دهد ایده میلیون دلاری خود را نه فقط روی کاغذ، بلکه در قالب یک نمونه اولیه کار.با تشکر از توجه شما!
UPD: من نمی خواهم موضوع "من روابط عمومی هستم" را حذف کنم، همه پیوندهای غیر ضروری را حذف کردم
بچه ها، من فکر می کنم بوت استرپ چیز بسیار جالبی است. من سعی خواهم کرد در این مقاله توضیح دهم که چرا چنین است. خب بریم من فورا عذرخواهی می کنم که تقریبا تمام نیمه اول مقاله بدون عکس نوشته شده است، فقط یک نظریه وجود دارد، توضیحی در مورد نحوه کار شبکه. اما این خیلی مهم است! هر یک از شما که به آن نیاز داشته باشد، آن را در دستان خود می گیرد، می خواند، و امیدوارم متوجه شود. نیمه دوم مقاله در حال حاضر ساده تر درک شده است، نمونه های بیشتری با اسکرین شات وجود دارد.
بوت استرپ - چیست؟پس بیایید با یک سوال مهم شروع کنیم. بوت استرپ یک فریمورک CSS و JS است که در اصل مجموعه ای از فایل ها با کد نوشته شده آماده است. هدف توسعه دهندگان تقریباً هر چارچوبی، ساده سازی توسعه وب سایت برای خود و دیگرانی است که به ابزار دسترسی خواهند داشت. در مورد بوت استرپ، کاملا رایگان است، بنابراین می توانید از آن به هر شکلی استفاده کنید، کد منبع را ویرایش کنید و چارچوب را به هر شکلی که دوست دارید سفارشی کنید. کاملا است.
نصب بوت استرپاگر فقط نیاز دارید که فایل های فریم ورک را به یک سند HTML متصل کنید (مثلاً برای تمرین)، فقط چارچوب را از وب سایت رسمی getbootstrap.com دانلود کنید، فایل های آن را در پروژه کپی کنید و موارد مورد نیاز خود را متصل کنید. اجازه دهید مروری کوتاه بر این فایل ها داشته باشم:
این مجموعه استاندارد چارچوب است. در واقع، شما به راحتی می توانید آن را سفارشی کنید و آن را مطابق با خودتان تغییر دهید. به عنوان مثال، به هیچ وجه از اسکریپت استفاده نکنید یا فقط یک شبکه را وصل کنید. به طور کلی در این مورد نیز صحبت خواهیم کرد.
مستندات بوت استرپ روسیوقتی از getbootstrap بازدید می کنید، احتمالاً متوجه شده اید که همه چیز در اینجا به زبان انگلیسی است. ما می توانیم از کمک روسیه در چارچوب استفاده کنیم. پیدا کردن آن آسان است. برای این کار از صفحه اصلی به قسمت Getting Started بروید. به پایین بروید، پیوندی به ترجمه ها وجود خواهد داشت. در آنجا به دنبال زبان روسی بگردید و روی آن کلیک کنید. تمام، اکنون در نسخه روسی سایت هستید. درست است، همه چیز در اینجا ترجمه نشده است، اما حدود 70-80٪ دقیق است، بنابراین شما همه چیز را خواهید فهمید.
شبکه بوت استرپهر چه می توان گفت، عنصر اصلی بوت استرپ شبکه پاسخگو است. به طور کلی، بدون آن، چارچوب تقریباً تمام ارزش خود را از دست می دهد، زیرا به لطف شبکه می توانید به سرعت قالب های تطبیقی ایجاد کنید. در عین حال، ممکن است اصلاً با پرسش‌های رسانه‌ای آشنا نباشید؛ به آنها نیازی ندارید، زیرا فریم ورک وظیفه اجرای سازگاری را بر عهده دارد؛ فقط باید کلاس‌های صحیح را به بلوک‌ها اختصاص دهید.
این کلاس ها چیست؟ برویم سراغ مستندات، خیلی به ما کمک می کند. به بخش CSS - Grid System بروید. قوانین کلی برای کار با شبکه ساده است؛ اکنون آنها را فهرست می کنم.
چگونه با شبکه کار کنیم؟آن را به عنوان یک جدول html در نظر بگیرید. اگر تا به حال کد HTML برای جداول نوشته اید، می دانید که تمام محتوا در تگ جدول، یک ردیف در تگ tr قرار می گیرد و سپس سلول ها در آن قرار می گیرند - td .
بنابراین، همه چیز در شبکه مشابه است. کلاس کانتینر به عنوان یک محفظه عمومی برای شبکه عمل می کند. 2 گزینه برای شبکه راه انداز وجود دارد - کاملاً لاستیکی و همچنان دارای حداکثر عرض محدود است. بنابراین، وقتی به بلوک عمومی کلاس کانتینر داده می شود، سایت حداکثر عرض 1170 پیکسل خواهد داشت. بیش از این گسترش نخواهد یافت. طبیعتاً محتوا محور خواهد بود.
اگر کلاس ظرف-مایع را تنظیم کنید، مش کاملاً لاستیکی خواهد بود، یعنی هیچ محدودیتی در اندازه وجود نخواهد داشت. به عنوان مثال، اگر شخصی وب سایتی را روی یک مانیتور 1920 پیکسلی باز کند، آن را در عرض کامل می بیند.
بر این اساس، اولین چیز در هنگام توسعه یک وب سایت این است که تصمیم بگیرید که قالب چگونه باشد - کاملاً لاستیکی، یا عرض آن هنوز باید محدود باشد.
عالی است، بلوک ظرف باید دارای یک ردیف شبکه باشد. شما باید تمام بلوک هایی را که در یک خط هستند در آن قرار دهید. یعنی اگر معمولی ترین قالب را بگیریم: سربرگ، قسمت اصلی، ستون سمت راست و پاورقی، آنگاه 3 ستون وجود دارد. اولی فقط هدر، دومی محتوا و نوار کناری و آخری فوتر خواهد داشت. نشانه گذاری برای چنین سایتی چیزی شبیه به این خواهد بود:
محتوای هدر... و نوار کناری پاورقی
اما در حال حاضر این نشانه گذاری اشتباه است، زیرا گم شده است... چی؟ درست است، سلول ها! در مورد بوت استرپ به آنها ستون نیز می گویند. شبکه بوت استرپ از 12 ستون تشکیل شده است. می توان آن را در هر بلوکی با هر عرض، حداقل 1200 پیکسل، حداقل 100 قرار داد. همه اینها به این دلیل است که عرض ستون ها نه به پیکسل، بلکه بر حسب درصد مشخص می شود.
این سیستم 12 ستونی چگونه کار می کند؟بنابراین، به مهمترین موضوع مربوط به چارچوب می رسیم. باور کنید، اگر این را فهمیدید، بقیه چیزها مزخرف است. نکته اصلی این است که درک کنید که شبکه چگونه کار می کند و مسیر طرح بندی تطبیقی سریع برای شما باز خواهد بود.
برای انجام این کار، در اسناد زیر اسکرول کنید، در آنجا جدولی را خواهید دید که حاوی ویژگی های مهم شبکه است.
به هر حال، خود ستون ها در بوت استرپ با کلاس col- مشخص شده اند، اما این یک کلاس ترکیبی است، بنابراین آنها هرگز به سادگی col- نمی نویسند. بوت استرپ دارای 4 کلاس ویژه است که برای کنترل اندازه بلوک ها در عرض های مختلف طراحی شده اند که در اینجا آمده است:
اینها 4 کلاس هستند، اما برای کنترل اندازه عناصر از اعداد 1 تا 12 استفاده می شود، زیرا همانطور که به یاد دارید دقیقاً 12 ستون در شبکه وجود دارد.
پاورقی نوار کناری محتوای سرصفحه
درک آن کاملاً آسان است. اول از همه، ما یک هدر ایجاد می کنیم؛ اصلا لازم نیست آن را در شبکه قرار دهیم، زیرا در هر صورت 100٪ عرض (معمولا) را اشغال می کند. اما به هر حال آن را وارد می کنیم. این کلاس col-md-12 چیست؟ همانطور که قبلاً به شما گفتم، هیچ کس به سادگی col- نمی نویسد، با این کلاس اساساً به مرورگر می گوییم:
این یک سلول است | ستون
در دستگاه های متوسط (کلاس md)، عرض آن باید 12 ستون از 12 باشد، یعنی 100٪ عرض ردیف.
اما عرض در دستگاه های دیگر چطور؟ در صفحه نمایش های بزرگ (lg) نیز 100٪ خواهد بود، زیرا مقادیر برای صفحه نمایش های بزرگ به ارث می رسد، اما برای نمایشگرهای کوچکتر اینطور نیست. ساده است: اگر col-xs-4 را نوشتید، عرض ستون در همه دستگاه‌ها 33% و اگر col-lg-4 فقط در دستگاه‌های بزرگ باشد. این ویژگی است، آن را به خاطر بسپارید.
خوب، اگر مقدار عرض در صفحه های کوچکتر ذخیره نشود، چه اتفاقی می افتد؟ ریست می شود. در اینجا این است که چگونه اتفاق می افتد:
col-sm-4 - در صفحه های کوچک بلوک 33٪ از عرض را اشغال می کند ، در صفحه های md و lg یکسان خواهد بود ، اما در xs ، یعنی کوچکترین آنها ، عرض به 100٪ بازنشانی می شود. بنابراین، یک قانون ساده دیگر را به خاطر بسپارید: اگر هیچ چیزی برای صفحه نمایش های کوچکتر مشخص نشده باشد، بلوک با عرض 100٪ روی آنها نمایش داده می شود.
نوار کناری محتوا
در اصل ما به مرورگر می گوییم:
اجازه دهید بلوک محتوا 8 ستون از 12 ستون باشد و این وضعیت در صفحه های کوچک، متوسط و بزرگ خواهد بود (کافی است برای صفحه نمایش های کوچک مشخص کنید، همانطور که به یاد دارید مقدار به ارث می رسد). اما در کوچکترین صفحه نمایش بلوک 100٪ اشغال خواهد شد. این درست است؛ معمولاً در دستگاه های تلفن همراه، سایت ها در 1 ستون ظاهر می شوند.
بگذارید ستون کناری یک سوم عرض ردیف در همان صفحه های کوچک، متوسط و بزرگ باشد، خوب، در کوچکترین ها، همانطور که قبلاً فهمیدید، عرض آن نیز به 100٪ تنظیم می شود. ساده است.
خوب، چیزی برای پرداختن به پاورقی وجود ندارد. خوب، ما اصول اولیه نحوه کار شبکه را پوشش داده ایم، اما هنوز باید ببینیم که چگونه کار می کند...
Bootstrap Nested Gridواقعیت این است که اکنون ما قالب را فقط به بلوک های اصلی تقسیم کرده ایم، اما در داخل آنها نیز می توانند به ستون ها تقسیم شوند. به عنوان مثال، محتوا ممکن است محصولات را در چندین ستون نمایش دهد. باید چکار کنم؟ بسیار ساده است - ما دقیقاً همان شبکه را در داخل ایجاد می کنیم. این تودرتو خواهد بود، اما همچنین شامل 12 ستون است. اگر همه اینها را خلاصه کنیم، به این نتیجه می رسیم:
می تواند تعداد نامحدودی شبکه در داخل هر بلوک وجود داشته باشد. به عنوان مثال، در یک بلوک با محصولات، یک شبکه برای جدا کردن محصولات وجود دارد؛ در بلوک با یک محصول، می توانید شبکه دیگری ایجاد کنید، به عنوان مثال، قیمت ها، اطلاعات در دسترس بودن و اطلاعات اضافی را جدا کنید. اطلاعات
اکنون سعی می کنیم شبکه دیگری را در داخل بلوک محتوا ایجاد کنیم تا محصولات را در 3 ستون مرتب کنیم. بنابراین، بیایید بلوکی که در آن محتوا داریم را در نظر بگیریم:
محتوا
و در آن می نویسیم:
کاتالوگ محصول: نام محصول 
توضیحات محصول
همانطور که می بینید، ما یک شبکه جدید در داخل محتوا ایجاد کردیم - یک ردیف داخل آن قرار دادیم و در این ردیف قبلاً 3 بلوک با محصولات وجود دارد. فقط بلوک col-sm-4 را با کارت محصول کپی کنید و 2 بار دیگر آن را بچسبانید، این چیزی است که دریافت می کنید (شما می توانید از هر محصولی عکس بگیرید، من یک عکس بزرگ گرفتم):
نکته مهم دیگری را از دست دادم: برای اینکه تصاویر با بلوک هایی که در آن قرار دارند سازگار شوند، باید به هر یک از آنها کلاس img-responsive داده شود. اگر شما نیز مانند من فکر می کنید که انجام این کار ناخوشایند است، پس فقط به سبک خود بنویسید.css اینگونه:
Img (حداکثر عرض: 100%؛ ارتفاع: خودکار؛ نمایشگر: بلوک؛ )
تمام، این کد را ذخیره کنید و فایل css خود را به پروژه متصل کنید. اکنون تصاویر به طور پیش فرض تطبیقی خواهند بود.
خوب، آیا آن را کاملا صاف تبدیل شد؟ بله، اما بدون بوت استرپ باید مدت بیشتری رنج بکشید. تنها نکته این است که هنگام ایجاد یک شبکه در داخل هر بلوکی، دیگر نیازی به ایجاد یک بلوک با کلاس کانتینر در آن ندارید. چرا این لازم نیست؟ بله، زیرا بلوکی که در آن شبکه ایجاد شده است به عنوان یک ظرف عمل می کند.
بنابراین، می توانید هر تعداد ستون را که دوست دارید در هر بلوکی ایجاد کنید و یک الگو با هر پیچیدگی بسازید. و همه اینها بسیار سریعتر از بدون بوت استرپ است، زیرا شما باید تمام css را از ابتدا بنویسید.
ابزارهای پاسخگواین یکی دیگر از ویژگی های عالی بوت استرپ است. این شامل این واقعیت است که شما می توانید هر بلوک را در عرضی که نیاز دارید پنهان یا قابل مشاهده کنید. به عنوان مثال، ستون کناری را به طور کامل در صفحه های باریک پنهان کنید، برخی از عناصر جدید را در دستگاه های تلفن همراه اضافه کنید، یک ستون را در صفحه های گسترده و غیره اضافه کنید.
گزینه های برنامه های زیادی وجود دارد، اما من در مورد مهمترین چیز به شما نگفتم: چگونه از این ابزارها استفاده کنیم؟ برای این کار کافیست کلاس هایی را به بلوک مورد نظر اضافه کنید. اگر می خواهید آن را مخفی کنید، فقط کلاس زیر را مشخص کنید:
پاورقی
کلاس hidden-xs در این مورد چه خواهد کرد؟ پاورقی را در دستگاه‌های بسیار کوچک مخفی می‌کند. در سایر موارد بلوک قابل مشاهده خواهد بود.
اگر برعکس، باید آن را فقط در کوچکترین صفحه نمایش نشان دهید، باید از کلاس visual-xs-block استفاده کنید. در این حالت، بلوک در تمام صفحه‌ها به جز باریک‌ترین صفحه‌ها پنهان می‌شود. بنابراین، کلاس های ابزار تطبیقی به این صورت نوشته می شوند:
خوب، چند مثال برای روشن شدن موضوع:
همه چیز اینگونه است. دقیقاً همین است و راه دیگری نیست. امیدوارم این را درک کرده باشید. بیایید آن را عملی کنیم. ما یک الگوی آزمایشی داریم، البته بسیار ابتدایی.
وظیفه: ناپدید کردن ستون کناری در صفحه های کوچک و همچنین یک محصول در کوچکترین صفحه نمایش. و به طوری که در دستگاه های xs محصولات قبلاً در 2 ستون هستند نه 3.
سعی کنید خودتان این کار را انجام دهید و فقط کد html را ویرایش کنید. چه باید انجام شود؟ ابتدا، اجازه دهید به ستون نگاه کنیم، برای پنهان کردن آن در صفحه نمایش sm، فقط باید کلاس hidden-sm را به آن اضافه کنید.
عالی است، اکنون محصول سوم باید کلاس hidden-xs را اضافه کند و در کوچکترین صفحه نمایش ناپدید می شود. خوب، کلاس های دو کالای باقی مانده به صورت زیر خواهد بود:
یعنی در دستگاه های متوسط بلوک 4 ستون از 12 را اشغال می کند که می تواند به 33.33٪ عرض ترجمه شود و در دستگاه های بسیار کوچک - 50٪. و از آنجایی که یک بلوک با یک محصول در این عرض ناپدید می شود، هر دو بلوک دارای محصولات به طور مرتب در یک ردیف قرار می گیرند، مانند این:
عالی! با درک این موضوع، می‌توانید بلوک‌های صفحه وب را تقریباً به هر شکلی که دوست دارید دستکاری کنید. سعی کنید وظایفی را برای خود در نظر بگیرید و آنها را اجرا کنید.
مرا تا آخر حرکت بدهدر ادامه یک ترفند بسیار خوب دیگر را به شما نشان خواهم داد - توانایی حرکت یک بلوک به راست یا چپ. فرض کنید 3 محصول پشت سر هم نداریم، بلکه 1 محصول داریم و کل عرض را اشغال نمی کند. و وظیفه شما این است که آن را در مرکز تراز کنید. اگر به خاطر داشته باشید که با یک سیستم 12 ستونی کار می کنید، انجام این کار آسان است.
بیایید یک بلوک را با محصول باقی بگذاریم:
کافی است محاسبات ساده ای انجام دهید تا بفهمید که برای مرکزیت کردن بلوک چقدر باید حرکت دهید. در صفحه های متوسط و بزرگ باید 4 ستون به چپ و در صفحه های کوچک 3 ستون به سمت چپ منتقل شود. این چیزی است که به نظر می رسد:
کلاس col-md-offset-4 می گوید: در صفحه نمایش های متوسط و بزرگ، بلوک را به سمت چپ 33٪ از عرض ظرف اصلی افست کنید (1/3 افست سمت چپ، 1/3 عرض بلوک، ⅓ آفست سمت راست، که منجر به مرکزیت می شود).
کلاس col-xs-offset-6: در صفحه‌های بسیار کوچک و کوچک، 25% به چپ تغییر مکان دهید (¼ بالشتک به چپ، ½ عرض بلوک، ¼ لایه به راست).
امیدوارم اصل مطلب را متوجه شده باشید و در صورت لزوم از این کلاس ها استفاده کنید.
اجزای بوت استرپ و نمونه هایی از کاربرد آنهابه شما تبریک میگویم. ما به تازگی به مهمترین موضوع مربوط به فریمورک پرداخته ایم. این شبکه و کار با آن است که مهم است. کار با کامپوننت ها از قبل به این معنی است که شما به سادگی به مستندات بروید، کد کامپوننت مورد نظر را در آنجا کپی کنید و در صورت لزوم آن را مطابق با نیاز خود تغییر دهید. اما من همچنان در زیر چند نمونه از نحوه استفاده از کامپوننت ها را بیان می کنم.
شناورهای سریع و لغو بسته بندیکلاسهای pull-left و pull-right به شما این امکان را می‌دهند که هر بلوکی را با ارسال به چپ یا راست، سریعاً شناور کنید. لغو جریان را فراموش نکنید. برای این کار می توانید از کلاس clearfix استفاده کنید.
بوت استرپ: منوی پاسخگوی افقی (موبایل).ما کامپوننت های زیر را مستقیماً به قالب اضافه می کنیم، بنابراین اگر می خواهید با کد کار کنید و فقط بخوانید، تمام مراحل را بعد از من دنبال کنید.
در واقع، با بوت استرپ می توانید به راحتی نه تنها یک منوی تطبیقی، بلکه یک منوی به اصطلاح موبایل ایجاد کنید که به طور کامل روی صفحه نمایش های کوچک جمع شده و زیر یک دکمه پنهان می شود. این تکنیک در بسیاری از قالب های ریسپانسیو دیده می شود و در واقع پیاده سازی آن بسیار آسان است. نمونه کد منوی موبایل در مستندات موجود است، آن را از آنجا می گیرم و کمی آن را دوباره انجام می دهم.
بنابراین، اولین کاری که انجام می دهم این است که بلوک را با هدر حذف کنم، زیرا منوی ما در واقع هدر در مورد قالب من خواهد بود. کد منو باید قبل از تمام محتوای سایت، حتی قبل از بلوک کانتینر قرار گیرد. چرا؟ بله، اکنون خودتان خواهید دید که شبکه از قبل در نوار ناوبری تعبیه شده است. بنابراین این کد است:
لوگو/نام دکمه سوئیچ
جستجو کردن
از این واقعیت که کدهای زیادی وجود دارد نگران نباشید. اکنون سایت به این صورت است:
اما اگر منوی شما کل عرض صفحه را نمی گیرد، منطقی است که آن را در مرکز قرار دهید. برای انجام این کار، باید یک بلوک wrapper اضافی برای منو ایجاد کنید که باید بعد از بلوک با کلاس container-fluid قرار گیرد. فراموش نکنید که این بلوک را ببندید. کلاس navbar-wrap را به آن دادم. در اینجا سبک هایی برای آن وجود دارد:
یعنی می توانید به سادگی عرض را محدود کرده و آن را در مرکز قرار دهید. یا در ابتدا مایع ظرف را با ظرف جایگزین کنید.
همانطور که می بینید، ما یک لوگو، دو آیتم ساده، یک آیتم کشویی و یک فرم جستجو را به منو اضافه کردیم. یعنی عناصر زیادی وجود داشت. شما به راحتی می توانید منو را با اضافه کردن کلاس های خود به آن سفارشی کنید. اما در حال حاضر هدف من این است که این مؤلفه را به شما نشان دهم.
این منو در دستگاه هایی با عرض صفحه کمتر از 768 پیکسل به این صورت است:
همانطور که می بینید، منو به هم ریخته است. با کلیک بر روی دکمه در گوشه سمت راست بالا باز می شود. فقط آرم روی صفحه باقی ماند.
فهرست کشوییدر عین حال، از مثال بالا می‌توانید بفهمید که چگونه یک آیتم منوی کشویی در Bootstrap ایجاد می‌شود؛ بیایید این کد را برای مشاهده دقیق‌تر استخراج کنیم:
بنابراین، محفظه یک آیتم کشویی یک آیتم لیست معمولی با کلاس کشویی است. داخل آن لینک اصلی است که با کلیک بر روی آن یک منوی کشویی باز می شود. بسیار مهم است که یک ویژگی داده به آن اختصاص دهید، که در کد مشاهده می کنید، بدون آن، هیچ چیز کار نخواهد کرد. همچنین باید مطمئن شوید که فایل bootstrap.js به صفحات وب متصل است.
یک span با کلاس caret چیزی بیش از یک فلش نیست که به لطف آن می توانید بفهمید که آیتم یک آیتم کشویی است و در زیر خود منو با استفاده از یک لیست گلوله ای استاندارد تشکیل می شود. تمام، همه چیز بسیار ساده است، می توانید از این کد برای پیاده سازی موارد کشویی استفاده کنید.
اضافه کردن Breadcrumbs (Breadcrumbs) با استفاده از Bootstrapدر بسیاری از فروشگاه ها می توانید یک بلوک به اصطلاح خرده نان را پیدا کنید که حاوی مسیر کامل به صفحه فعلی است. انجام این کار با استفاده از چارچوب نیز آسان است، کد را ببینید:
در واقع کافی است برای یک لیست شماره دار کلاس breadcrumb را مشخص کنید و موارد معمول لیست را در آن وارد کنید. به هر حال، من سرفصل های سطح دوم را در قالب در مرکز قرار می دهم (این باید در css نوشته شود):
H2 (تراز متن: مرکز؛ )
اگر می خواهید به نحوی ظاهر پودرهای سوخاری را تغییر دهید، فقط از انتخابگر .breadcrumb در CSS استفاده کنید. برای مثال، به این صورت می توانید رنگ پس زمینه را حذف کنید:
خرده نان (پس زمینه: شفاف؛ )
در حال حاضر سایت به این صورت است:
به‌طور پیش‌فرض، جدول در کل پنجره کشیده می‌شود، بنابراین برای محدود کردن ابعاد، آن را در جعبه‌ای با عرض محدود بپیچید. به طور پیش فرض وحشتناک به نظر می رسد، اما اگر کلاس جدول را به تگ جدول اضافه کنید، همه چیز بسیار زیباتر خواهد شد:
