با سلام و عرض ادب خدمت دوستان و سروران عزیز. توی این مطلب آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوم رو در اختیار کاربران عزیز قرار داده ایم. همانطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده است. شروع دوره در ادامه مطلب…
جهت مشاهده آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوم به ادامه مطلب مراجعه نمایید.
Bootstrap Gridsبخش سوم :
سیستم و ساختار بوت استرپ گرید :
سیستم بوت استریپ گرید به شما اجازه ساخت ده ستون در طول صفحع را میدهد . اگر مایل به ساخت 12 ستون به صورت مجزا نیستید میتوانید انها را به به صورت گروهی در اورده و ستون های عریض تری بسازید . سیستم بوت استرپ گرید به حالت ریسپانسیو-واکنش گرا عمل میکند به به صورت اتوماتیک و نسبت به اندازه صفحه نظم و اندازه ستون ها را تنطیم میکند .
کلاس های گرید :
سیستم بوت استرپ گرید شامل چهار کلاس میباشد :
- XS (برای موبایل ها)
- SM ( برای تبلت ها)
- ) MDبرای کامپیوتر های رومیزی)
- LG ( برای کامپیوتر های رومیزی بزرگتر)
میتوان کلاس های بالا را ترکیب کرده و طرحی انعطاف پذیر تر پویا تر بسازیم.
ساختار اساسی بوت استرپ گرید :
در زیر ساختار اساسی یک بوت استرپ گریدرا مشاهده می نمایید :
<div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div>
ابتدا یک ردیف (<div class=”row”>) بسازید . سپس ، به تعداد دلخواه ستون وارد کنید . ( تگ هایی با کلاس .col-*-* مناسب ) . توجه داشته باشید که عددهای تنظیم شده در .col-*-* همیشه باید برای هر هر ردیف به دوازده تا برسند. در زیر تعدادی مثال از طرح های بیسیک بوت استرپ گرید برایتان تدارک دیده ایم.
سه ستون مساوی :
.col-sm-4 | .col-sm-4 | .col-sm-4 |
.col-sm-4
.col-sm-8
” height=”112″ width=”495″>این مثال نشان میدهد که چگونه دو ستون با عرض های نامساوی در تبلت ها و کامپیوتر های رومیزی بزرگ بسازید .
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
نکته : در بخش های بعدی این مجموعه بیشتر با بوت استرپ اشنا خواهید شد .
بخش چهارم : Bootstrap Text/Typography
تنظیمات پیش فرض بوت استرپ : اندازه بین المللی تعیین شده برا فونت بوت استرپ 14px و ارتفاع خطوط 1.428 میباشد . این تنظیمات به <body> و همه پاراگراف ها اعمال میشود . علاوه بر این ، المنت های پاراگراف <p>از پایین به اندازه نصف فاصله خطوط مارجین دارند که بصورت پیشفرض 10px است.
بوت استرپ در مقابل تنظیمات پیش فرض های بروزر :
در این قسمت نگاهی به چند المنت HTML خواهیم داشت که توسط بوت استرپ به شکل متفاوتی نسبت به تنظیمات پیش فرض بروز استایل دهی میشوند .
<h1> – <h6>
به صورت پیش فرض بوت استرپ هدینگ های اچ تی ام ال را بصورت زیر استایل دهی می کند :
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
عنصر <small>
در بوت استرپ از عنصر اچ تی ام ال <small> برای ایجاد یک متن ثانویه و سبک تر در هر سرفصل استفاده می شود:
همچنین برای نشان دادن نقل قول در سمت راست، از کلاس .blockquote-reverse استفاده کنید.
عنصر <dl>
بوت استرپ عنصر اچ تی ام ال <dl> را به شکل زیر نشان می دهد.
Coffee
– black hot drink
Milk
– white cold drink
عنصر <code>
بوت استرپ عنصر اچ تی ام ال <code> را به شکل زیر نشان می دهد.
The following HTML elements: span, section, and div defines a section in a document.
عنصر <kbd>
بوت استرپ عنصر اچ تی ام ال <kbd> را به شکل زیر نشان می دهد.
Use ctrl + p to open the Print dialog box.
عنصر <pre>
بوت استرپ عنصر اچ تی ام ال <pre> را به شکل زیر نشان می دهد.
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
رنگ های متنی و پس زمینه :
علاوه بر انچه ذکر شد ، بوت استرپ همچنین دارای چند کلاس متنی ست که میتوانند در نشان دادن معنا توسط رنگ مورد استفاده قرار گیرند. کلاس ها برای رنگ های متن عبارتند از :
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger:
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
کلاس های برای رنگ های پس زمینه عبارت اند از :
The classes for background colors are:.bg-primary, .bg-success, bg-info, bg-warning, .bg-danger:
کلاس های تایپوگرافی بیشتر :
کلاس های بوت استرپ زیر را میتوان در استایل دهی عناصر HTML مورد استفاده قرار داد :
کلاس | توضیحات | |
.lead | برجسته کردن پاراگراف | |
.small | یک متن کوچکتر را نشان میدهد( تا 85% سایز والد تنظیم میکند) | |
.text-left | تزاربندی متن به سمت چپ | |
.text-center | تراز بندی متن به وسط صفحه | |
.text-right | تراز بندی متن به سمت راست | |
.text-justify | هم تراز کردن متون | |
.text-nowrap | تراز بندی به صورت بدون شکست | |
.text-lowercase | نشان دهنده متن با حروف کوچک | |
.text-uppercase | نشان دهنده متن با حروف بزرگ | |
.text-capitalize | نشان دهنده متن با سرحرف درشت | |
.initialism | نمایش متن در عنصر <abbr> در سایزی کوچک تر | |
.list-unstyled | لیست-استایل پیشفرض و تراز بندی سمت چپ ر در ایتم های لیست پاک میکند(بر روی دو عنصر<ul> و <ol> کار میکند) .این کلاس فقط بر روی ایتم های لیست فرزند اعمال میشود(برای پاک کردن لیست-استایل پیشفرض در بیست های تو در تو، این کلاس را بر روی تک تک لیست های تو در تو اجرا کنید) | |
.list-inline | تمام ایتم های لیست را بر روی یک خط قرار میدهد . | |
.dl-horizontal | ترم های <dt> و توضیحات <dd> را در عنصر <dl>کنار هم تنظیم میکند.در ابتدا مانند <dl> پیشفرض کار میکند اما وقتی که صفحه بزرگ تر شود ، به صورت کنار هم تنظیم میشود | |
.pre-scrollable | عنصر <pre> را قابل اسکرول میکند . |
منابع کامل تایپوگرافی بوت استرپ : برای دستیابی به منابع کامل تمام کلاس ها عنصر ها به این لینک مراجعه کنید . و همینطور برای اطلاعات بیشتر در مورد کلاس های متنی میتوانید از این لینک استفاده کنید .
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۳ آبان ۱۳۹۴
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس