اخرین بروزرسانی: 31.10.2015
در با استفاده از بوت استرپقرار دادن رابط در یک نمای جدول یا شبکه با استفاده از سطرها و ستون ها بسیار راحت است. بنابراین، اگر در مرورگر به نمای استاندارد Index.cshtml که پیش‌فرض است نگاه کنیم، موقعیت‌یابی مشابهی خواهیم دید: عناصر زیر عنوان در سه ستون مرتب شده‌اند و یک خط را تشکیل می‌دهند:
اگر کد view را باز کنیم، می‌توانیم استفاده از کلاس‌های bootstrap را ببینیم:
شروع شدن
.............
کتابخانه های بیشتری دریافت کنید
.............
میزبانی وب
.............
کلاس row چینش تک تک بلوک ها را در یک ردیف مشخص می کند. یک ردیف در بوت استرپ می تواند تا 12 ستون داشته باشد. می تواند به تعداد خطوطی که دوست دارید وجود داشته باشد، اما در در این موردما یک خط داریم
کلاس col-md-4 برای ایجاد یک ستون تک ردیفی استفاده می شود. col همانطور که از نام آن پیداست نشان دهنده یک ستون است.
بعد md می آید - شناسه دستگاه. همانطور که در مبحث گذشته دیدیم، بوت استرپ همه دستگاه ها را به طور معمول به چهار گروه بسته به عرض صفحه تقسیم می کند. md به طور خاص به دستگاه های متوسط اشاره دارد (یعنی آنهایی که 992 پیکسل عرض و بیشتر دارند). و عدد 4 نشان می دهد که بلوک داده شده چند واحد معمولی را در یک خط اشغال خواهد کرد. بنابراین، معلوم می شود که کلاس col-md-4 به این معنی است که این بلوک 4 واحد معمولی از 12 واحد در هر خط را اشغال می کند، یعنی یک سوم عرض صفحه نمایش دستگاهی با صفحه نمایش 992 پیکسل یا بیشتر.
و از آنجایی که ما چهار گروه داریم، هر گروه کلاس های خود را دارد. به عنوان مثال، برای دستگاه های بسیار کوچک با صفحه نمایش کمتر از 768 پیکسل (یعنی تلفن های همراه)، یک کلاس مشابه ممکن است col-xs-4 باشد.
انواع کلاس ها:
col-xs- *: برای دستگاه هایی با عرض صفحه نمایش کمتر از 768 پیکسل
col-sm- *: برای دستگاه هایی با عرض صفحه نمایش 768 پیکسل و بالاتر
col-md- *: برای دستگاه هایی با عرض صفحه نمایش 992 پیکسل یا بیشتر
col-lg- *: برای دستگاه هایی با عرض صفحه نمایش 1200 پیکسل یا بیشتر
اگرچه حتی در دستگاه های تلفن همراهبلوک ah با کلاس col-md-4 بسیار خوب به نظر می رسد، اما می توانیم همزمان دو کلاس را برای جزئیات بیشتر نمایشگر در دستگاه های مختلف تنظیم کنیم، به عنوان مثال:
و اگرچه در نمای Index.cshtml به طور پیش‌فرض، هر سه بلوک دارای عرض نسبی 4 واحد هستند که در مجموع 12 واحد می‌شود، می‌توانیم هر عرض دیگری را تنظیم کنیم و آنها را همانطور که دوست داریم قرار دهیم. مثلا:
تورفتگی
کلاس های ویژه col-md (sm | lg) -offset- * به شما امکان می دهد یک افست نسبت به بلوک سمت چپ یا ابتدای یک خط را در واحدهای دلخواه مشخص کنید. به عنوان مثال، ما یک خط مانند این داریم:
بلوک سمت چپ
................
بلوک سمت راست
................
کلاس col-md-offset-4 بلوک سمت راست 4 واحد دلخواه را به راست منتقل می کند:
چند مثال در مورد استفاده از افست:
ترتیب ستون
با کلاس های col-md (sm | lg) -push- * و col-md (sm | lg) -pull- *، می توانیم ترتیب بلوک ها را در یک خط لغو کنیم. به عنوان مثال، کلاس col-md-push-4 بلوک را چهار واحد به سمت راست موقعیت فعلی خود فشار می دهد. برعکس، کلاس col-md-pull-4 بلوک را به سمت چپ موقعیت فعلی منتقل می کند. بنابراین، می‌توانیم مثال قبلی را با افست به صورت زیر بازنویسی کنیم:
بلوک سمت چپ
................
بلوک سمت راست
................
و ما هم همین اثر را خواهیم داشت. اما می‌توانیم ترتیب بلوک را کاملاً مجدداً مرتب کنیم:
بلوک سمت چپ
................
بلوک سمت راست
................
اکنون بلوک سمت راست با چهار واحد به سمت چپ و بلوک چپ با 8 واحد به سمت راست حرکت می کند:
بنابراین، با استفاده از کلاس‌های ردیف و کلاس‌های ستون، می‌توانیم آرایش کلی عناصر را تعریف کنیم، و پاسخ‌دهی بوت استرپ تضمین می‌کند که چنین شبکه‌ای از عناصر در هر دستگاهی کاملاً عادی به نظر می‌رسد. حال بیایید به برخی از مؤلفه هایی که بوت استرپ به ما ارائه می دهد نگاهی بیندازیم.
متغیر COL1 iMacros انتخاب اولین ستون در این ردیف را نشان می دهد که هنگام خواندن داده ها استفاده می شود. 1 را به هر عدد دیگری تغییر دهید، بسته به اینکه کدام ستون را باید از فایل بیرون بکشید. حتی اگر نمی دانید چند ستون ستون در فایل دارید، یعنی داده های جداگانه در خطوط مختلف قرار دارند، پس حتما باید حداقل از COL1 استفاده کنید.
کار می کند در:
هر عدد صحیحی را می توان به جای n استفاده کرد، عدد مثبتبیشتر از 0 و کمتر! DATASOURCE_COLUMNS (تعداد ستون های فایل).
تنظیم شده توسط:
× متغیر داخلی
✓ با دستور SET
"متغیر داخلی" به این معنی است که خودش مقدار این متغیر را در حین اجرای ماکرو تعیین می کند. به این معنی که کاربر می تواند این مقدار را با یک دستور در حین ویرایش تنظیم کند.
مثال:
در مثال، فایل example.csv شامل First Name در اول (بازیابی شده با استفاده از متغیر iMacros! COL1) و نام خانوادگی در ستون دوم (! COL2) است. در سایت می خواهیم این مقادیر را در فیلدهای مناسب وارد کنیم.
تنظیم! مثال DATASOURCE. csv تنظیم! DATASOURCE_LINE ((! LOOP)) GOTO URL = http: //www.some_input.com/enter_name.html TAG POS = 1 TYPE = INPUT: TEXT FORM = form1 ATTR = NAME: first_name CONTENT = ((! COL1)) |
9 پاسخ
به روز رسانی 2018 ...
خالص بوت استرپ 3دارای 4 سطح (یا "نقاط شکست") ...
- بسیار کوچک (برای گوشی های هوشمند.col-xs- *)
- کوچک (برای تبلت ها.col-sm- *)
- متوسط (برای لپ تاپ ها.col-md- *)
- بزرگ (برای لپ تاپ / دسکتاپ.col-lg- *).
این اندازه های مش به شما امکان می دهد رفتار مش را در عرض های مختلف کنترل کنید. سطوح مختلف توسط پرس و جوهای CSS هدایت می شوند.
بنابراین در یک شبکه بوت استرپ 12 ستونی ...
col-sm-3 3 ستون از 12 عرض (25٪) در یک ستون معمولی است کم اهمیتعرض دستگاه (> 768 پیکسل)
col-md-3 3 ستون از 12 عرض (25%) در عرض معمولی است حامل(> 992 پیکسل)
سطح کوچکتر (xs، sm یا md) همچنین اندازه را برای عرض صفحه نمایش بزرگتر تعیین می کند... بنابراین، برای ستونی با اندازه یکسان در همه سطوح، فقط عرض را روی کوچکترین نمای نمایش قرار دهید ...
ضمنیسطوح بزرگتر . همانطور که col-sm-3 به معنای 3 واحد در sm-and-up است، مگر اینکه توسط یک ردیف بزرگتر که از اندازه متفاوتی استفاده می کند، لغو شود.
xs (پیش‌فرض)> لغو توسط sm> لغو توسط md> لغو توسط lg
برای استفاده از تغییر اندازه عرض ستون ها برای اندازه های مختلف شبکه، کلاس ها را ترکیب کنید... این یک طرح پاسخگو ایجاد می کند.
شبکه‌های sm، md و lg به صورت عمودی روی صفحه‌نمایش‌ها/نمایش‌های کمتر از ۷۶۸ پیکسل قرار می‌گیرند. این جایی است که شبکه xs قرار می گیرد. ستون‌هایی که از col-xs-* استفاده می‌کنند به صورت عمودی روی هم قرار نمی‌گیرند و در کوچکترین صفحه‌ها کوچک می‌شوند.
با استفاده از این نسخه نمایشی، اندازه مرورگر خود را تغییر دهید و افکت های مقیاس بندی شبکه را مشاهده خواهید کرد.
V بوت استرپ 4یک اندازه -xl- جدید وجود دارد، این نسخه ی نمایشی را ببینید. همچنین -xs- infix حذف شده استبنابراین کوچکترین ستون ها فقط col-1، col-2 .. col-12، و غیره هستند.
col- * - 0 (xs)
col-sm- * - 576px
col-md- * - 768 پیکسل
col-lg- * - 992 پیکسل
col-xl- * - 1200px
همچنین، این مقاله بیشتر در مورد Bootstrap Grid توضیح می دهد
من فکر می کنم جنبه گیج کننده این است که BootStrap 3 است سیستم موبایلبا حساسیت بالا و نمی تواند توضیح دهد که چگونه بر سلسله مراتب col-xx-n در آن بخش از مستندات بوت استرپ تأثیر می گذارد. این باعث می‌شود اگر مقداری را برای دستگاه‌های بزرگتر انتخاب کنید، در دستگاه‌های کوچکتر چه اتفاقی می‌افتد و تعجب کنید که آیا باید چندین مقدار مشخص شود. (تو نمی کنی)
من سعی می کنم این را با بیان اینکه ... انواع دانه های پایین تر (xs, sm) سعی می کنند ظاهر طرح بندی را در صفحه نمایش های کوچکتر حفظ کنند، در حالی که انواع بزرگتر (md, lg) فقط به درستی نمایش داده می شوند. صفحه نمایش های بزرگاما ستون ها را روی دستگاه های کوچکتر می پیچد. مقادیر داده شده در مثال های قبلی به آستانه ای اشاره دارد که در آن دیسک بوت ظاهر خود را کاهش می دهد تا با وضعیت صفحه موجود مطابقت داشته باشد.
در عمل، این بدان معناست که اگر ستون‌های col-xs-n ایجاد کنید، حتی در صفحه‌های بسیار کوچک ظاهر درست خود را حفظ می‌کنند، تا زمانی که اندازه پنجره به اندازه‌ای محدود شود که صفحه به درستی نمایش داده نشود. به این معناست که دستگاه‌هایی با عرض 768 پیکسل یا کمتر باید جدول شما را همانطور که طراحی کرده‌اید نشان دهند، نه به صورت تخریب‌شده (تک ستونی یا بسته‌بندی شده). بدیهی است که این هنوز به محتوای ستون ها و اینکه کل موضوع چیست بستگی دارد. اگر صفحه سعی می کند چندین ستون از داده های بزرگ را نمایش دهد، در کنار هم صفحه نمایش کوچکاگر این را در نظر نگیرید، به طور طبیعی ستون ها افتضاح می شوند. بنابراین، بسته به داده‌های موجود در ستون‌ها، می‌توانید نقطه‌ای را تعیین کنید که در آن چیدمان برای نمایش مناسب محتوا استفاده می‌شود.
مثلا. اگر صفحه شما دارای سه ستون از ستون‌های col-sm-n باشد، زمانی که عرض صفحه به زیر 992 پیکسل می‌رسد، ستون‌ها را به ردیف فشار می‌دهند. این بدان معناست که داده ها هنوز قابل مشاهده هستند اما نیاز دارند پیمایش عمودی... اگر نمی‌خواهید طرح‌بندی شما کاهش یابد، xs را انتخاب کنید (تا زمانی که داده‌های شما به اندازه کافی در دستگاهی با موارد بیشتر نمایش داده شود. وضوح کمدر سه ستون)
اگر موقعیت افقیداده مهم است، شما باید سعی کنید بیشتر انتخاب کنید مقادیر پاییندانه بندی برای حفظ شخصیت بصری. اگر موقعیت اهمیت کمتری دارد، اما صفحه باید در همه دستگاه‌ها قابل مشاهده باشد، باید از مقدار بالاتری استفاده شود.
اگر col-lg-n را انتخاب کنید، ستون ها به درستی نمایش داده می شوند تا زمانی که عرض صفحه به زیر آستانه xs 1200px برسد.
Col-XY به معنای اندازه صفحه نمایش X و بالاتر است، این عنصر را بکشید تا ستون های Y را پر کند.
بوت استرپ یک شبکه 12 ستونی در هر ردیف فراهم می کند، بنابراین Y = 3 به معنای عرض = 25٪ است.
xs، sm، md، lg - اندازه های به ترتیب برای گوشی های هوشمند، تبلت، لپ تاپ، دسکتاپ.
نقطه مشخص کردن عرض های مختلف در اندازه های مختلف صفحه به شما امکان می دهد اشیا را در صفحه های کوچکتر بزرگتر نشان دهید.
مثال
مقدار: 50٪ عرض در رایانه های رومیزی، 100٪ عرض در دستگاه های تلفن همراه، تبلت ها و لپ تاپ ها.
با سلام خدمت خوانندگان عزیز سایت وبلاگ. در قسمت اول مقاله در موردما با قابلیت های این فریم ورک آشنا شدیم، با آنچه هست آشنا شدیم طراحی تعاملیو چرا در دوران رشد گسترده ما در محبوبیت ابزارهای مختلف تلفن همراه بسیار مهم است. در آنجا، مسائل مربوط به اتصال Bootstrap به صفحه Html (اتصال فایل های سبک، اسکریپت ها و کتابخانه jQuery) را نیز با تمام جزئیات بررسی کردیم.
مقاله امروز بر روی سیستم شبکه ای استفاده شده در Bootstrap 3 تمرکز دارد. شما خواهید آموخت که چه اندازه های شبکه ای را می توانید اعمال کنید، چگونه آنها در دستگاه هایی با اندازه های مختلف صفحه نمایش رفتار می کنند، و چگونه خودتان ردیف ها و سلول ها را بر اساس یک یا چند شبکه ایجاد کنید. همه اینها با مثال هایی توضیح داده می شود که امیدواریم درک بهتر شود.
نحوه عملکرد سیستم شبکه در بوت استرپ 3
بوت استرپ 3 همراه با سیستم توری دوازده ستونی، که عمدتا برای دستگاه های تلفن همراه طراحی شده است. آن ها اول از همه با توجه به نمایشگرهای کوچک و در مرحله دوم به صفحه نمایش های عریض طراحی شده است. V نسخه جدیداین چارچوب دارای چهار اندازه شبکه است. تمام این اطلاعات را می توان به طور مفصل در وب سایت رسمی GetBootstrap.com با رفتن به برگه "CSS" از منوی بالاو در سمت راست مورد «سیستم شبکه» را انتخاب کنید.
آنجا خواهید گرفت توضیح کاملاصول عملکرد سیستم، پرسش های رسانه ای مرتبط با آن و غیره. آن ردیف از عناصر Html (به عنوان مثال، اعلامیه های مقاله در صفحه نخست) که می خواهید در شبکه قرار دهید باید توسط یک ظرف احاطه شود (به عنوان مثال، محصور در تگ های Div) و کلاس row را برای آن بنویسید (در این حالت، تگ افتتاحیه شبیه به آن خواهد بود
خوب، و خود عناصر در ردیف، می توانید یک یا چند نوع شبکه را به طور همزمان با نوشتن ویژگی کلاس با یک مقدار توزیع کنید، به عنوان مثال، .col-xs-digit (در این مورد، فقط شبکه بسیار کوچک استفاده می شود).
به عنوان مثال، اگر در نتیجه باید سه ستون با اندازه مساوی بدست آورید، باید 12 (بعد شبکه در Bootstrap 3) را بر 3 (تعداد ستون مورد نیاز) تقسیم کنید. یعنی برای همه عنصر Htmlدر داخل ردیف (دوباره، اینها می توانند ظروف Div باشند)، باید همان کلاس ها را بنویسید -
در زیر در قسمت "گزینه های شبکه" توضیحی در مورد موارد بالا خواهید دید چهار سایز مشبوت استرپ مدرن
- ابتدا یک شبکه بسیار کوچک (در ستون «دستگاه‌های بسیار کوچک»)، طراحی شده برای دستگاه‌های تلفن همراه، با اندازه صفحه نمایش کمتر از ۷۶۸ پیکسل (پیوند زیر را بخوانید). برای هر اندازه صفحه نمایش همیشه افقی خواهد بود و سعی می کنم در زیر توضیح دهم که چیست. توجه داشته باشید که پیشوند کلاس برای این نوع شبکه فقط خواهد بود col-xs، همانطور که در مثالی که در بالا بحث شد.
- اگر اندازه صفحه نمایش دستگاه در محدوده 768 تا 992 پیکسل باشد (اکنون اینها اغلب تبلت ها هستند) ، شبکه Bootstrap که برای دستگاه های کوچک طراحی شده است برای آنها مناسب است. کوچک نامیده می شود و از پیشوندهای کلاس برای تعریف آن استفاده می شود. col-sm.
- برای دستگاه هایی با اندازه صفحه نمایش بزرگتر از 992، اما کمتر از 1200 (عمدتا مانیتورهای رایانه های رومیزی یا لپ تاپ ها)، شبکه ای برای دستگاه های متوسط وجود دارد. متوسط نام دارد و پیشوند کلاس دارد col-md.
- خوب، برای مانیتورهایی با عرض بیش از 1200 پیکسل، بزرگترین شبکه با پیشوند کلاس وجود دارد. col-lg.
سه شبکه آخر فقط در صورتی افقی خواهند بود که عرض صفحه از نقطه ای که در آن "فروپاشی" رخ می دهد بیشتر باشد. به عنوان مثال، برای یک شبکه بزرگ در صفحه نمایش های کوچکتر از 1200 پیکسل، افقی بودن آن متوقف می شود و به عمودی تبدیل می شود. در وب سایت رسمی GetBootstrap.com که در حال حاضر در حال بررسی آن هستیم، مثال ها و توضیحاتی در این زمینه وجود دارد. با این حال، به نظر من، همه چیز در آنجا تا حدودی گیج و پیچیده است.
نمونه ای از نحوه عملکرد سیستم شبکه Bootstrap 3 با عرض های مختلف صفحه نمایش
من سعی می کنم همه اینها را توضیح دهم نمونه تمام شده... شما فقط باید فایل را کپی کنید setka.html(برای این و انتخاب کنید منوی زمینهمورد "ذخیره با پیوند به عنوان ..."). اگر این فایل را مستقیماً در مرورگر باز کنید (با کلیک بر روی پیوند ارائه شده با دکمه سمت چپ ماوس)، هیچ چیز کار نخواهد کرد، زیرا چارچوب Bootstrap متصل نمی شود.
فایل setka.html دانلود شده را در پوشه Bootstrap که در مورد آن صحبت کردیم قرار دهید. باید در همان سطح فایل index.html باشد که قبلا ایجاد کردیم.
اکنون این فایل setka.html را در هر مرورگری که دوست دارید باز کنید و اندازه پنجره مرورگر خود را آزمایش کنید تا Bootstrap 3 را در عمل ببینید و نحوه عملکرد سیستم شبکه را درک کنید. کدومشون؟ الان توضیح میدم
من وضوح صفحه نمایش مانیتور 1280 پیکسل عرض دارم که بیشتر از 1200 پیکسل تعیین شده برای شبکه بزرگ است. در نتیجه چه می بینیم؟ چیزی مثل این:
در اینجا پنج نمونه از طرح‌بندی سایت ساخته شده است انواع متفاوتمش ها:
- ردیف اول با استفاده از هر چهار سیستم شبکه موجود در توضیح داده شده است این لحظهدر بوت استرپ بسته به وضوح صفحه دستگاهی که طرح روی آن مشاهده می شود، نام شبکه ای که در هر کدام از سلول ها استفاده می شود در آنجا نمایش داده می شود (اکنون بالای ردیف اول نوشته شده است که از یک شبکه درشت استفاده شده است و در سلول های "cl-lg" - پیشوند کلاس شبکه بزرگ) ... با کاهش عرض صفحه، این برچسب ها تغییر خواهند کرد.
- در ردیف های باقی مانده در زیر، فقط از یک سیستم اندازه شبکه استفاده می شود - بسیار کوچک، کوچک، متوسط و بزرگ (به این ترتیب).
به این ترتیب می‌توانیم مشاهده و مقایسه کنیم که این شبکه‌ها از زرادخانه Bootstrap 3 چگونه با هم کار می‌کنند و چگونه به طور جداگانه کار می‌کنند (هنگام استفاده از یک نوع). زیرا وقتی اسکرین شات قبلی را گرفتم، مرورگر من به حالت تمام صفحه بزرگ شد (عرض بیش از 1200 پیکسل)، سپس تمام این پنج نمونه از طرح‌بندی سایت به صورت افقی گسترش می‌یابند (ستون‌ها در عرض صفحه در کنار یکدیگر قرار دارند) .
حالا بیایید اندازه پنجره مرورگر را کمی محدود کنیم تا بتوانیم و خرابی (جمع شدن) رخ داده را مشاهده کنیم.
متن بالای ردیف بالا و پیشوندهای کلاس در سلول های آن تغییر کرده است (برای این کار از کلاس های visibility استفاده شده است که بعداً در مورد آنها صحبت خواهیم کرد). شبکه میانی اکنون استفاده می شود و همچنان به صورت افقی نمایش داده می شود. در همان زمان، پایین ترین ردیف (که استفاده از تنها را نشان می دهد مش درشت) به صورت عمودی تا شده است، یعنی. بلوک های مجاور اکنون نه در عرض در کنار یکدیگر، بلکه در زیر یکدیگر (در ارتفاع) نمایش داده می شوند.
به نظر می رسد که شبکه درشت، در غیاب هر گونه تأثیر خارجی، دقیقاً به این شکل رفتار می کند - در تمام دستگاه هایی که اندازه صفحه نمایش آنها کمتر از 1200 پیکسل است، به صورت عمودی تا می شود. این همه موارد دیگر استفاده شده در شبکه مثال را به صورت افقی ارائه می کند. ردیف اول از ترکیبی از شبکه ها استفاده می کند، بنابراین اکنون توسط سیستم شبکه متوسط کنترل می شود (سیستم بزرگ دیگر تأثیری ندارد).
بیایید یک بار دیگر اندازه پنجره مرورگر را در عرض تغییر دهیم تا تبدیل شود. اسقاط بعدی رخ خواهد داد:
اکنون (بر اساس اندازه صفحه) ما با یک شبکه کوچک کار می کنیم. بر این اساس، نه تنها شبکه بزرگ، بلکه شبکه متوسط نیز به صورت عمودی تا شده است. خوب، در ردیف اول، که از ترکیبی از شبکه‌ها استفاده می‌کند، اکنون همه چیز توسط سیستم شبکه کوچک Bootstrap کنترل می‌شود. در ضمن در فایل setka.html توزیع ستون های این سطر اول نیز تغییر می کند که اصلاً لازم نیست، اما می توان این کار را انجام داد تا بخشی از نیازهای شما از نظر چیدمان (و روی یک) برآورده شود. -two"، بدون هیچ مشکلی).
ما همچنان عرض پنجره مرورگر را به مقادیر کاهش می دهیم. اسقاط دیگری رخ می دهد:
در نتیجه، نه تنها شبکه های بزرگ و متوسط به صورت عمودی در سراسر صفحه می روند، بلکه شبکه های کوچک نیز به آنها ملحق شده اند. تنها یک شبکه بسیار کوچک افقی باقی مانده استکه تحت هر شرایطی (همانطور که قبلاً دیدیم) باقی می ماند. حتی اگر صفحه را به عرض بسیار کوچک محدود کنید، شبکه بسیار کوچک به یک شبکه عمودی تبدیل نمی‌شود (حتی زمانی که محتوا در سلول‌ها قرار نمی‌گیرد).
این مثال (فایل setka.html) دقیقا ساخته شده است. ما با جزئیات در مورد نحوه چیدمان همه چیز در آنجا صحبت خواهیم کرد. اما در حال حاضر، من می خواهم توجه شما را فقط به برخی از نکات ظریف که می توانید در کد منبع فایل setka.html متوجه شوید، جلب کنم.
توضیحاتی برای کد منبع مثال ما
در بالا با سبک های اضافه شده برای طراحی بصریطرح‌بندی‌ها (تورفتگی‌ها، رنگ‌های شبکه‌ای و غیره)، که بار معنایی خاصی ندارند. اگر اسکرول کنید منبعپایین، متوجه بلوکی مانند زیر خواهید شد:
lg از یک شبکه درشت برای صفحه نمایش های بزرگتر از 1200 پیکسل استفاده کنید.
md شبکه متوسط برای صفحه نمایش های کوچکتر از 1200 اما بزرگتر از 992 پیکسل استفاده می شود.
sm شبکه کوچک برای صفحه نمایش های کوچکتر از 992 اما بزرگتر از 768 پیکسل استفاده می شود.
xs از یک شبکه بسیار کوچک برای اندازه صفحه نمایش کمتر از 768 پیکسل استفاده می کند که همیشه افقی باقی می ماند.
چهار کانتینر اختصاص داده شده است کلاس های مختلف(درباره بخوانید). آنها به شما امکان می دهند محتوای خاصی را بر اساس پرسش های رسانه ای که مطابقت دارند نمایش دهید اندازه های مختلفمش چگونه کار می کند؟ هر چهار عنوان در مرورگر بارگذاری می‌شوند (اگر به منبع نگاه کنید)، اما تنها یک عنوان بسته به وضوح صفحه فعلی یا اندازه پنجره مرورگر نمایش داده می‌شود.
آی تی مش اصلیکه در آن هر چهار سیستم شبکه با هم ترکیب شده اند (شما می توانید این را با ویژگی های سلولی مانند class = "col-lg-4 col-md-1 col-sm-5 col-xs-5" مشاهده کنید، که پیشوندهای کلاس هر چهار شبکه را فهرست می کند. )... خود ردیف، همانطور که در بالا ذکر شد، با قرار دادن تمام عناصر تشکیل دهنده آن در یک ظرف با کلاس class = "row" تنظیم می شود (در مثال ما، این یک ظرف مبتنی بر div است).
لطفاً توجه داشته باشید که شبکه اصلی ما از سه سلول (ستون) تشکیل شده است و اگر تمام اعدادی را که به هر یک از ستون‌ها اختصاص داده شده است، به عنوان مثال برای پیشوندهای شبکه بسیار کوچک Bootstrap (col-xs) جمع کنید. در مجموع 12 بدست آورید، همین امر برای اعداد بعد از پیشوندهای سایر سیستم ها نیز صادق است. قابل درک است، زیرا این چارچوب، همانطور که در بالا ذکر شد، دارای ساختار 12 ستونی است، یعنی. به صورت افقی، تمام فضای موجود برای چیدمان به تقسیم می شود دوازده ستون مساوی(در سایت نامرئی - آنها مانند سلول های دفترهای مدرسه هستند).
خوب، با استفاده از اعداد بعد از پیشوندهای کلاس، به سادگی نسبت هر یک از سلول ها (ستون های واقعی) طرح خود را تعیین می کنید. آن ها نسبت ها می توانند به عنوان مثال:
بطور کلی، شما می توانید از یک، دو، سه یا هر چهار سیستم شبکه استفاده کنیددر یک طرح (خط). همه چیز به ترجیحات طراحی شما و آنچه می خواهید از صفحه وب خود به دست آورید (چگونه باید به برنامه های افزودنی صفحه نمایش مختلف نگاه کند) بستگی دارد. یک مثال در وب سایت رسمی آورده شده است:
ایجاد ردیف ها و سلول ها با کلاس های بوت استرپ
اجازه دهید اکنون برای درک بهتر، ایجاد کنیم صفحه اچ تی ام التا حدودی یادآور صفحه وب واقعی(با هدر، محتوای متن و تصویر و پاورقی) و با استفاده از سیستم شبکه Bootstrap 3 علامت گذاری کنید.
به طور دقیق تر، من خودم یک خالی ایجاد می کنم و فقط به شما پیشنهاد می کنم به قیاس با مثال قبلی، فایل را دانلود کنید. sait.html(برای انجام این کار، مورد "ذخیره به عنوان ..." را از منوی زمینه انتخاب کنید)، تا بعداً با هم بتوانیم به این "ماهی" اضافه کنیم. کلاس های مورد نیازبوت استرپ همچنین باید در پوشه Bootstrap در همان سطح فایل index.html که در مقاله اول ایجاد کردیم (و setka.html که کمی بالاتر با آن کار کردیم) قرار داده شود.
اگر به کد منبع فایل sait.html نگاه کنید، خواهید دید که قبلاً شامل Bootstrap و jquery است و همچنین محتوایی برای شبیه سازی اضافه کرده است. ظاهرمتوسط صفحه وب بله، شما همچنین به یک پدر با تصاویر استفاده شده در این صفحه نیاز خواهید داشت. شما می توانید آن را از اینجا دانلود کنید - img.zip... فقط بایگانی را از حالت فشرده خارج کنید و پوشه img را (مطمئن شوید که فایل های تصویری داخل آن وجود دارد نه یک پوشه img دیگر) را در پوشه Bootstrap، یک سطح با فایل sait.html قرار دهید. ساختار به شکل زیر خواهد بود:
اکنون (از پوشه Bootstrap) در مرورگر خود، صفحه وب را که به عنوان مثال استفاده کردم را مشاهده خواهید کرد. قابل توجه است که تمام بلوک های صفحه یکی زیر دیگری قرار گرفته اند و این امر به شدت در درک بصری صحیح اطلاعات اختلال ایجاد می کند. منطقی است که آنها را در ستون ها قرار دهید و به طوری که وقتی اندازه صفحه نمایش کاهش می یابد، "طراحی" به این امر پاسخ می دهد و تعداد ستون ها را تغییر می دهد تا تجربه بهتری از مشاهده در دستگاه هایی با عرض متفاوت ناحیه قابل مشاهده ایجاد شود.
در اصل کد Htmlمن از فایل sait.html برای نشان دادن مرزهای ردیف‌ها (ردیف‌هایی) که در نظر گرفتم استفاده کردم، که برای آن نمایش ستون‌ها را با استفاده از نوعی سیستم شبکه بوت استرپ سفارشی می‌کنیم. فقط چهار ردیف (در تصویر بالا شماره گذاری شده اند) - سربرگ (سرصفحه با نام و آرم سایت)، عنوان و توضیحات صفحه، محتوا (محتوای اصلی شامل اطلاعیه های چهار مقاله) و پاورقی.
اکنون باید نشانه گذاری Bootstrap را به فایل sait.html اضافه کنیم که. برای ایجاد ردیف ها، همانطور که به یاد دارید، کافی است تمام محتویات آن را در یک ظرف بپیچید (اغلب اینها تگ های Div هستند، اگرچه ممکن است موارد دیگری نیز وجود داشته باشند) و یک کلاس در آن بنویسید. کلاس = "ردیف"... برای ردیف اول، به این صورت خواهد بود:
سایت
همین کار را برای تمام ردیف های دیگر (خطوط) انجام دهید - یک برچسب باز قرار دهید
استفاده از شبکه های مختلف برای ایجاد ستون هایی از محتوا در عرض های مختلف صفحه
حالا وقته بیایید شروع به تشکیل سلول کنیمدر آن خطوط (ردیف ها) که انجام آن منطقی است. کاملا منطقی است که اعلان مقالات (از ردیف سوم) را در چهار ستون قرار دهیم و وقتی عرض صفحه کاهش یافت، اجازه دهیم این چهار ستون به دو ستون تبدیل شوند. چگونه انجامش بدهیم؟ اجازه بدید ببینم.
بنابراین، در Bootstrap 3، یک شبکه 12 ستونی وجود دارد که در بالا در مورد آن صحبت کردیم. از آنجایی که تصور کرده‌ایم چهار ستون با اعلان‌ها بسازیم، منطقی است که آنها را از نظر عرض برابر کنیم، به این معنی که هر یک از ستون‌ها سه سلول (سلول) در سیستم شبکه نامرئی ما (صرف نظر از اینکه چه اندازه شبکه را انتخاب می‌کنیم) خواهد بود. - فوق العاده کوچک، کوچک، متوسط یا بزرگ).
کدام مش را برای کار انتخاب کنیم؟ بیایید با میانگین به عنوان یک گزینه سازش شروع کنیم. در این حالت، کلاس "col-md-3" باید به کانتینرهای هر چهار سلول اضافه شود -
پس از ذخیره تغییرات انجام شده، خواهید دید که صفحه وب ما ظاهر بسیار قابل استفاده تری پیدا کرده است:
با این حال، هنگامی که پنجره مرورگر به عرض یک نقطه شکست کوچکتر کاهش می یابد (در مورد شبکه متوسطی که استفاده می کنیم، این عدد 992 پیکسل خواهد بود)، همه اعلان ها دوباره در یک ستون مرتب می شوند، که خوب نیست، زیرا در این حالت قابلیت استفاده کاهش می یابد (رزولوشن تقریباً 1000 پیکسل اجازه می دهد تا اطلاعات را با متراکم تر ترتیب دهید). برای رفع این وضعیت، می توانید یک مش دیگر اضافه کنیداز زرادخانه Bootstrap برای همان اسلات های اعلامی. چگونه انجامش بدهیم؟ اجازه بدید ببینم.
بیایید از پیشوندهای "col-xs-6" برای نام کلاس در هر سلول با اعلام استفاده کنیم (نتیجه یک کلاس کلاس ترکیبی = "col-md-3 col-sm-6" خواهد بود). به این شکل خواهد بود (با استفاده از مثال یک سلول):
Google AdWords - ایجاد گروه
متن اطلاعیه
همانطور که می بینید، در اینجا قانون اخیراً اعلام شده را شکستیم که اعداد بعد از پیشوندهای یک شبکه در همه سلول ها باید تا 12 جمع شوند. ما 24 (چهار ضربدر شش) دریافت کردیم. اما ما این کار را عمدا انجام دادیم تا به نتیجه دلخواه برسیم - به جای چهار ستون، هنگام عبور از نقطه شکست برای سیستم شبکه بوت استرپ متوسط (که 992 پیکسل است) دو ستون دریافت می کنیم. آن ها سلول ها در دو خط قرار می گیرند که هر کدام دو قطعه است:
زیرا ما یک سیستم شبکه بسیار کوچک را انتخاب کردیم، سپس با کاهش بیشتر در عرض پنجره مرورگر آرایش عمودیبلوک هایی با اعلان های زیر یکدیگر (قرار دادن در یک ستون) اتفاق نمی افتد، زیرا این سیستم همیشه افقی باقی می ماند.
اگر می‌خواهید چهار ستون به دو ستون تبدیل شوند، و سپس با کاهش عرض صفحه به یک ستون تبدیل شوند، باید از یک سیستم شبکه کوچک به جای "col-xs-6" استفاده کنید. "Col-sm-6":
Yandex Direct - اصول اولیه ایجاد یک کمپین
سپس، هنگام کاهش عرض پنجره مرورگر به زیر 768 پیکسل، یک اسکراپ مشاهده می کنید که در آن دو ستون با اعلان ها به یک ستون تبدیل می شوند. فقط آزمایش کنید و تفاوت را احساس کنید.
سفارشی کردن هدر صفحه وب خود با بوت استرپ 3
بیایید بیشتر آزمایش کنیم و تلاش کنیم، که در آن اساسا دو سلول بالقوه وجود دارد - نام سایت با توضیحات، و همچنین آرم. در واقع، ما آنها را در موقعیت قرار خواهیم داد. بیایید این بار از یک شبکه بزرگ استفاده کنیم "Col-lg-6"برای بدست آوردن دو ستون مساوی
سایت
همه چیز در مورد ایجاد وب سایت ها، وبلاگ ها، انجمن ها، فروشگاه های آنلاین، تبلیغ آنها در موتورهای جستجو و کسب درآمد در سایت
درست است، هنگام استفاده از یک مش بزرگ، خراش دادن به طور معمول اتفاق می افتد رزولوشن های بزرگصفحه نمایش (در مورد ما، پنجره های مرورگر، زیرا در آنجا دستگاه هایی با عرض صفحه نمایش متفاوت را شبیه سازی می کنیم). سپس سلول ها به صورت عمودی تا می شوند. برای جلوگیری از این، ما برای ردیف اول یک شبکه Bootstrap 3 دیگر اضافه کنید... فکر می کنم یک سیستم شبکه کوچک (پیوند کلاس col-sm) این کار را انجام دهد. سپس کد چیزی شبیه به این خواهد بود:
سایت
همه چیز در مورد ایجاد وب سایت ها، وبلاگ ها، انجمن ها، فروشگاه های آنلاین، تبلیغ آنها در موتورهای جستجو و کسب درآمد در سایت
با این حال، برای شبکه کوچک، سلول‌های با نام سایت و آرم را یکسان نکردم، زیرا لوگو در حال حاضر (به معنای باریک) نام با توضیحات ضروری است. با عرض کوچکتر صفحه نمایش، تخصیص سلول های مساوی به آنها منطقی نخواهد بود. بنابراین ستون اول را با نام و توضیحات سایت در دو بار فعال کردن سیستم شبکه کوچک بوت استرپ ساختم. ستون بیشتربا لوگو
در نتیجه، وقتی پنجره مرورگر کوچک می‌شود، این سلول‌ها تا لحظه شکستن سیستم شبکه کوچک Bootstrap همگرا می‌شوند، که زمانی اتفاق می‌افتد که عرض کمتر از ۷۶۸ پیکسل باشد، و سپس هر دو سلول یکی زیر دیگری قرار می‌گیرند.
احتمالاً متوجه شده اید که متن صفحه به لبه سمت چپ صفحه برخورد می کند که باعث می شود. می توانید برای اصلاح این وضعیت در تگ بدنه اضافه کنید که این امکان را فراهم می کند. و شما می توانید همه چیز را حل کنید با وسایل استانداردبوت استرپ 3.
برای انجام این کار، شما باید کل محتوای صفحه وب (هر چیزی که در تگ های Body موجود است) را در یک ظرف Div با کلاسی به همین نام بپیچید - همچنین می توانید ببینید که با کاهش عرض صفحه، تصاویر اعلامیه به یکدیگر برخورد می کنند. واقعیت این است که آنها هنوز "بدون پاسخ" هستند، اما ما آنها را در مقالات بعدی این ستون خواهیم گفت. و همچنین ما به تجزیه و تحلیل کار با سیستم شبکه Bootstrap 3 ادامه خواهیم داد، نحوه طراحی دکمه ها، جداول، فرم های Html، منوهای کشویی، پیمایش و موارد دیگر ایجاد کنید. بنابراین، جابجا نشوید و منتظر انتشارات جدید باشید. ادامه دارد >>> (شما می توانید در خبرنامه عضو شوید تا آن را از دست ندهید) و عاقبت اینجاست: (اما شما هنوز مشترک می شوید - چیزهای جالب و مفید بیشتری وجود خواهد داشت). - [kɔl] n. متر 1080; لات collum → cou I ♦ 1 ♦ Vx Cou. مد. محل Se hausser, se pousser du col: se faire valoir, prendre de grands airs. "Elle s en croit. Il y a sa mère aussi, qui se pousse du col "(سارتر). 2 ♦ Partie étroite, rétrécie (d ... ... Encyclopédie Universelle سرهنگ- col po scope; col po stat; col pot o my; col ter; col u ber; col u bri na; col u bri nae; col u lus; col um ba ceous; کول ام با ری ام; col um bary; col um batz; col um bel la; col um bel li dae; col um bif er ous; col u mella; col · u · mel·lar;…… هجاهای انگلیسی سرهنگ- سرهنگ س متر La partie du corps qui joint la teste aux espaules، la pronciation ordinaire dans la pluspart des phrases، c est Cou. لانگ کو. بزرگ کو. gros cou. دادگاه سرهنگ ل کو، او لی کول تورس. مال د کو، او مال او کو. mouchoir de col، ou ... Dictionnaire de l "Academie française سرهنگ- COL، coluri، s.n. (آنات.) Parte mai îngustă, mai strâmtă a unui organ sau a unui os. - دین فر. سرهنگ Trimis de IoanSoleriu، 28.06.2004. سوره: DEX 98 COL s. (آنات.) کول رحم = دهانه رحم; col vezical = دهانه رحم. Trimis de siveco، 05.08.2004. سورسا:…… دیکشنری رومی سرهنگ- می تواند به: مطالب 1 چیزها 2 مکان ها 3 زبان ها 4 اختصارات 5 گروه ها ... ویکی پدیا سرهنگ- سرهنگ س متر Voyez Cou, quant à la partie du corps qui joint la tête aux épaules.Col. س متر Terme dont on se sert dans différentes عبارات par analogie à cette partie du corps humain dont on vient de parler. [b] f♛ / b] در appelle Le col de la vessie ... Dictionnaire de l "Académie Française 1798 Çöl Dəllək- شهرداری ... ویکی پدیا سرهنگ- → con col élément, du lat. تقدیر V. co et com. ⇒COL (I)، COLO (N)، (COL، COLI، COLO، COLON)، élément préf. المان برتر ترکیب. خبرنگار au subst. Côlon etrant dans la formation de termes appartenant au domaine medical. A. Sur…… دایره المعارف جهانی سرهنگ- سرهنگ سرهنگ مخفف ستون * * * col. UK US اسم [C] (اصل جمع). 1. «جدول استخدام فارغ التحصیلان را در کنار ... ... شرایط مالی و تجاری نشان می دهد سرهنگ- سرهنگ 〈بوچو. آبک für lat.〉 columna (Spalte) * * * col. = ستون (Spalte). * * * سرهنگ، Abkürzung für den Bundesstaat کلرادو، ایالات متحده آمریکا. * * * سرنگ = columna (Spalte) ... Universal-Lexikon سرهنگ- sustantivo femenino 1. Brassica oleracea. Planta crucífera خوراکی، de tallo grueso، hojas anchas، flores pequeñas، blancas o amarillas que se kultiv en los huertos: Prepara las coles con patatas muy bien. Locuciones 1. col de Bruselas ... ... Diccionario Salamanca de la Lengua Españolaکتاب ها
