شبکه پیش فرض

سیستم شبکه پیش‌فرض ارائه شده به عنوان بخشی از Bootstrap یک شبکه 16 ستونی 940 پیکسلی است. این مزه سیستم محبوب شبکه 960 است، اما بدون حاشیه/بالشتک اضافی در سمت چپ و راست.

نمونه ای از نشانه گذاری شبکه ای

همانطور که در اینجا نشان داده شده است، یک طرح اولیه را می توان با دو "ستون" ایجاد کرد، که هر کدام شامل تعدادی از 16 ستون پایه است که ما به عنوان بخشی از سیستم شبکه خود تعریف کردیم. برای تنوع بیشتر به نمونه های زیر مراجعه کنید.

<div class="row">
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

چیدمان ثابت

یک طرح بندی کانتینری در مرکز با پهنای 940 پیکسل برای تقریباً هر سایت یا صفحه.

<بدن>
  <div class = "کانتینر" > 
    ...
  </div>
</body>

چیدمان سیال

ساختار صفحه سیال یا مایع انعطاف پذیر با حداقل و حداکثر عرض و یک نوار کناری سمت چپ. عالی برای برنامه ها

<بدن>
  <div class = "container-fluid" > 
    <div class = "نوار کناری" > 
      ...
    </div>
    <div class = "محتوا" > 
      ...
    </div>
  </div>
</body>

سرفصل ها و کپی

یک سلسله مراتب تایپوگرافی استاندارد برای ساختار صفحات وب شما.

h1. سرفصل 1

h2. سرفصل 2

h3. سرفصل 3

h4. سرفصل 4

h5. سرفصل 5

h6. سرفصل 6

پاراگراف نمونه

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parurient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultrices vehicula ut id elit.

عنوان مثال دارای عنوان فرعی ...

شما همچنین می توانید زیر عنوان ها را با <strong>و اضافه کنید<em>

متفرقه عناصر

استفاده از تاکید، آدرس و اختصارات

<strong> <em> <address> <abbr>

چه موقع باید استفاده کرد

تگ های تاکیدی ( <strong>و <em>) باید برای ایجاد تمایز بصری بین یک کلمه یا عبارت و کپی اطراف آن استفاده شود. برای <strong>توجه ساده قدیمی و <em>برای توجه و عناوین نرم استفاده کنید.

تاکید در یک پاراگراف

Fusce dapibus ، telus ac cursus commodo ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero، یک pharetra augue.

آدرس ها

این addressعنصر برای آدرس‌های—شما حدس زدید!—استفاده می‌شود. در اینجا به نظر می رسد:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

توجه: هر خط در یک addressباید با یک خط شکسته ( <br />) خاتمه یابد تا به درستی محتوا را همانطور که در زندگی واقعی خوانده می شود بدون هیچ گونه سبکی بخوانیم.

اختصارات

برای اختصارات و کلمات اختصاری، از abbrتگ استفاده کنید ( acronymدر HTML5 منسوخ شده است ). فرم مختصر را درون تگ قرار دهید و یک عنوان برای نام کامل تعیین کنید.

نقل قول های بلوکی

<blockquote> <p> <cite>

مطمئن شوید که blockquoteاطراف paragraphو citeبرچسب های خود را بپیچید. هنگام ذکر منبع، از citeعنصر استفاده کنید. CSS به طور خودکار نامی را با خط تیره em (—) مقدم می‌کند.

Lorem ipsum dolor sit amet، consectetur adipisicing elit، sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

دکتر جولیوس هیبرت

بدون سفارش<ul>

• جرمی بیکسبی
• رابرت دزور
• جاش واشنگتن
• آنتون کاپرسی
• هم تیمی هایم
  • جورج کاستانزا
  • جری ساینفلد
  • کاسمو کرامر
  • الین بنیس
  • انسان جدید
• جان جیکوب
• پل پیرس
• کوین گارنت

بی استایل<ul.unstyled>

• جرمی بیکسبی
• رابرت دزور
• جاش واشنگتن
• آنتون کاپرسی
• هم تیمی هایم
  • جورج کاستانزا
  • جری ساینفلد
  • کاسمو کرامر
  • الین بنیس
  • انسان جدید
• جان جیکوب
• پل پیرس
• کوین گارنت

سفارش داده شده<ol>

1. جرمی بیکسبی
2. رابرت دزور
3. جاش واشنگتن
4. آنتون کاپرسی
5. هم تیمی هایم
   1. جورج کاستانزا
   2. جری ساینفلد
   3. کاسمو کرامر
   4. الین بنیس
   5. انسان جدید
6. جان جیکوب
7. پل پیرس
8. کوین گارنت

شرحdl

لیست های توضیحات

لیست توضیحات برای تعریف اصطلاحات عالی است.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

جداول ساختمان

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

میزها برای خیلی چیزها عالی هستند. با این حال، جداول عالی برای مفید، مقیاس پذیر و خوانا (در سطح کد) به مقداری علاقه به نشانه گذاری نیاز دارند. در اینجا چند نکته برای کمک وجود دارد.

همیشه سرصفحه های ستون خود را theadطوری بپیچید که سلسله مراتب thead> tr> thباشد.

مانند سرصفحه های ستون، تمام محتوای جدول شما باید در یک شکل پیچیده شود tbodyتا سلسله مراتب شما tbody> tr> tdباشد.

مثال: سبک های جدول پیش فرض

برای اطمینان از خوانایی و حفظ ساختار، همه جداول به صورت خودکار تنها با حاشیه‌های ضروری طراحی می‌شوند. بدون نیاز به اضافه کردن کلاس ها یا ویژگی های اضافی.

#	نام کوچک	نام خانوادگی	زبان
1	مقداری	یکی	انگلیسی
2	جو	سیکس پک	انگلیسی
3	استو	دندانه	کد

<table class="common-table"> class = "common-table" >
  ...
</table>

مثال: راه راه گورخری

با افزودن راه راه گورخری، میزهای خود را کمی شیک کنید—فقط .zebra-stripedکلاس را اضافه کنید.

#	نام کوچک	نام خانوادگی	زبان
1	مقداری	یکی	انگلیسی
2	جو	سیکس پک	انگلیسی
3	استو	دندانه	کد

<table class="common-table zebra-striped"> class = "میز مشترک گورخری راه راه" >
...
</table>

مثال: Zebra-striped w/ TableSorter.js

با در نظر گرفتن مثال قبلی، با ارائه قابلیت مرتب‌سازی از طریق jQuery و افزونه Tablesorter ، مفید بودن جداول خود را بهبود می‌بخشیم . برای تغییر مرتب‌سازی، روی سرصفحه هر ستون کلیک کنید.

#	نام کوچک	نام خانوادگی	زبان
1	شما	یکی	انگلیسی
2	جو	سیکس پک	انگلیسی
3	استو	دندانه	کد

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( سند ). آماده ( تابع () { 
    $ ( "table# sortTableExample" ). جدول‌بندی ( { sortList : [[ 1 , 0 ]]} );   
  })؛
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

سبک های پیش فرض

به همه فرم ها سبک های پیش فرض داده می شود تا آنها را به روشی خوانا و مقیاس پذیر ارائه کنند. سبک‌ها برای ورودی‌های متن، فهرست‌های انتخابی، مناطق متنی، دکمه‌های رادیویی و کادرهای چک و دکمه‌ها ارائه می‌شوند.

نمونه فرم افسانه

ورودی X-Large

انتخاب کنید

1 2 3 4 5

انتخاب کنید

1 2 3 4 5

ورودی غیر قابل ویرایش

مقداری ارزش در اینجا

ورودی غیرفعال

ورودی X-Large

قطعه کوچکی از متن راهنما

نمونه فرم افسانه

متن پیش‌فرض

@

چک باکس از پیش تعیین شده

چک باکس اضافه شد

ورودی فایل

نمونه فرم افسانه

لیست گزینه ها

• گزینه یک این و آن است - مطمئن شوید که چرا عالی است
• گزینه دو را نیز می توان بررسی کرد و در نتایج فرم گنجاند
• گزینه سه را می توان - بله، حدس زدید - نیز بررسی و در نتایج فرم گنجانده شود
• گزینه چهار را نمی توان بررسی کرد زیرا غیرفعال است.

توجه: برچسب‌ها همه گزینه‌ها را برای مناطق کلیکی بسیار بزرگ‌تر و یک فرم قابل استفاده‌تر احاطه می‌کنند.

محدوده زمانی

به همه زمان ها به عنوان زمان استاندارد اقیانوس آرام (GMT -08:00) نشان داده می شود.

Textarea

بلوک متن راهنما برای توصیف فیلد بالا در صورت نیاز.

لیست گزینه ها

• گزینه یک این و آن است - مطمئن شوید که چرا عالی است
• گزینه دو را نیز می توان بررسی کرد و در نتایج فرم گنجاند

ذخیره تغییرات لغو کنید

فرم های انباشته

به HTML فرم خود اضافه .form-stackedکنید و برچسب هایی را در بالای فیلدهای آنها به جای سمت چپ آنها خواهید داشت. اگر فرم‌های شما کوتاه باشند یا دو ستون ورودی برای فرم‌های سنگین‌تر داشته باشید، عالی عمل می‌کند.

نمونه فرم افسانه

ورودی X-Large

انتخاب کنید

1 2 3 4 5

نمونه فرم افسانه

لیست گزینه ها

• گزینه یک این و آن است - مطمئن شوید که چرا عالی است
• گزینه دو را نیز می توان بررسی کرد و در نتایج فرم گنجاند

توجه: برچسب‌ها همه گزینه‌ها را برای مناطق کلیکی بسیار بزرگ‌تر و یک فرم قابل استفاده‌تر احاطه می‌کنند.

ذخیره تغییرات لغو کنید

دکمه ها

به عنوان یک قرارداد، دکمه ها برای اعمال استفاده می شوند در حالی که پیوندها برای اشیاء استفاده می شوند. به عنوان مثال، "دانلود" می تواند یک دکمه و "فعالیت اخیر" می تواند یک پیوند باشد.

همه دکمه ها به طور پیش فرض به سبک خاکستری روشن هستند، اما .primaryکلاس آبی در دسترس است. بعلاوه، رول کردن سبک های خود کار ساده ای است.

دکمه های نمونه

استایل‌های دکمه‌ای را می‌توان برای هر چیزی با .btnاعمال اعمال کرد. معمولاً می‌خواهید این موارد را فقط روی عناصر a، buttonو انتخاب کنید اعمال کنید. inputدر اینجا به نظر می رسد:

اندازه های جایگزین

دکمه های بزرگتر یا کوچکتر را دوست دارید؟ آن را داشته باشید!

حالت غیر فعال

برای دکمه‌هایی که فعال نیستند یا به دلایلی توسط برنامه غیرفعال شده‌اند، از حالت غیرفعال استفاده کنید. این .disabledبرای پیوندها و :disabledبرای buttonعناصر است.

پیوندها

دکمه ها

چیست؟

نوار بالای ما یک نوار ثابت است که لوگو یا نام یک وب سایت، پیمایش اصلی و فرم جستجو را در خود جای داده است.

قابل تنظیم

تمام عناصر داخل و کل نوار بالایی نیز اختیاری هستند. می‌توانید یک نشان‌واره/نام، ناوبری، جستجو، و یک ناوبری ثانویه یا هر ترکیبی از آن را انتخاب کنید.

کشویی گنجانده شده است

به عنوان بخشی از پیمایش اصلی، این قابلیت را برای شما در نظر گرفته‌ایم که می‌توانید فهرست‌های کشویی را به ناوبری خود اضافه کنید. ناوبری ثانویه بالا (تراز سمت راست) را بررسی کنید تا ببینید چگونه انجام می شود.

زبانه ها و قرص ها

با یک پیمایش ثانویه ساده ایجاد کنید ul. با افزودن کلاس مناسب بین زبانه ها یا قرص ها تعویض کنید.

برای بخش‌های فرعی محتوا مانند صفحات تنظیمات حساب ما و جدول‌های زمانی کاربر برای جابجایی بین صفحات محتوای مشابه عالی است. موجود در سبک های زبانه ای یا قرصی.

• صفحه اصلی
• مشخصات
• پیام ها
• تنظیمات
• مخاطب

<ul class="tabs"> class = "tabs" >
  <li class = "active" ><a href = "" > صفحه اصلی </a></li>  
  <li><a href = "" > نمایه </a></li> 
  <li><a href = "" > پیام‌ها </a></li> 
  <li><a href = "" > تنظیمات </a></li> 
  <li><a href = "" > تماس با </a></li> 
</ul>

• صفحه اصلی
• مشخصات
• پیام ها
• تنظیمات
• مخاطب

<ul class="pills"> class = "قرص" >
  <li class = "active" ><a href = "" > صفحه اصلی </a></li>  
  <li><a href = "" > نمایه </a></li> 
  <li><a href = "" > پیام‌ها </a></li> 
  <li><a href = "" > تنظیمات </a></li> 
  <li><a href = "" > تماس با </a></li> 
</ul>

صفحه بندی

صفحه‌بندی فوق‌العاده ساده و مینیمال با الهام از Rdio. بلوک بزرگ به سختی قابل از دست دادن است، به راحتی مقیاس پذیر است و مناطق کلیک بزرگی را فراهم می کند.

<div class="pagination"> class = "صفحه بندی" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← قبلی </a></li>  
    <li class = "active" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4 ​​</a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "next" ><a href = "" > بعدی → </a></li>  
  </ul>
</div>

هشدارهای اولیه

پیام های تک خطی برای برجسته کردن شکست، شکست احتمالی یا موفقیت یک عمل. به خصوص برای فرم ها مفید است.

مسدود کردن پیام ها

برای پیام هایی که نیاز به کمی توضیح دارند، هشدارهای سبک پاراگراف داریم. این‌ها برای حباب کردن پیام‌های خطای طولانی‌تر، هشدار دادن به کاربر در مورد یک اقدام معلق، یا فقط ارائه اطلاعات برای تاکید بیشتر در صفحه مناسب هستند.

مدال ها

مدال ها - دیالوگ ها یا لایت باکس ها - برای اقدامات متنی در موقعیت هایی که حفظ زمینه پس زمینه مهم است، عالی هستند.

پاپاورها

از پاپاورها برای ارائه اطلاعات زیرمتنی به یک صفحه بدون تأثیرگذاری روی طرح بندی استفاده کنید.

Bootstrap با Preboot ساخته شده است، یک بسته منبع باز از میکسین ها و متغیرها برای استفاده همراه با Less ، یک پیش پردازنده CSS برای توسعه سریعتر و آسان تر وب.

بررسی کنید که چگونه از Preboot در Bootstrap استفاده کرده‌ایم و اگر Less را در پروژه بعدی خود اجرا کنید چگونه می‌توانید از آن استفاده کنید.

نحوه استفاده از آن

از این گزینه برای استفاده کامل از متغیرهای Bootstrap Less، mixins و nesting در CSS از طریق جاوا اسکریپت در مرورگر خود استفاده کنید.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "همه" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

راه حل .js را احساس نمی کنید؟ برنامه Less Mac را امتحان کنید یا از Node.js برای کامپایل هنگام استقرار کد خود استفاده کنید.

چه چیزی گنجانده شده است

در اینجا برخی از نکات برجسته در توییتر بوت استرپ به عنوان بخشی از بوت استرپ وجود دارد. برای دانلود و کسب اطلاعات بیشتر به وب سایت بوت استرپ یا صفحه پروژه Github بروید.

متغیرهای رنگ

متغیرهای Less برای حفظ و به‌روزرسانی بدون سردرد CSS شما عالی هستند. وقتی می‌خواهید مقدار رنگ یا مقداری که اغلب استفاده می‌شود را تغییر دهید، آن را در یک نقطه به‌روزرسانی کنید و آماده هستید.

// پیوندها
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
// خاکستری
@black : #000;             
@grayDark :           روشن ( @black , 25 %)؛ 
@grey :               روشن کردن ( @black , 50 %); 
@grayLight :          روشن ( @black ، 70 %)؛ 
@grayLighter :        روشن کردن ( @black , 90 %); 
@white : #fff;             
// رنگ های تاکیدی
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@بنفش : #7a43b6 ;            
// خط مبنا
@baseline : 20px ;          

اظهار نظر

Less علاوه بر /* ... */سینتکس معمولی CSS، سبک دیگری از نظر دادن را نیز ارائه می دهد.

// این یک نظر است
/* این هم یک نظر */

wazoo را مخلوط می کند

میکس ها اساسا شامل یا جزئی برای CSS هستند و به شما این امکان را می دهند که یک بلوک از کد را در یکی ترکیب کنید. آنها برای ویژگی های پیشوند فروشنده مانند box-shadow، گرادیان های متقابل مرورگر، پشته های فونت و موارد دیگر عالی هستند. در زیر نمونه ای از میکس های موجود در Bootstrap آمده است.

پشته های فونت

#فونت {
  . مختصر ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    فونت - وزن : @weight ; 
    خط - ارتفاع : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    فونت - وزن : @weight ; 
    خط - ارتفاع : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    فونت - وزن : @weight ; 
    خط - ارتفاع : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    فونت - وزن : @weight ; 
    خط - ارتفاع : @lineHeight ; 
  }
}

گرادیان ها

#شیب {
  . افقی ( @startColor : #555، @endColor: #333) { 
    پس زمینه - رنگ : @endColor ; 
    پس زمینه - تکرار : تکرار - x ;
    پس‌زمینه - تصویر : - khtml - گرادیان ( خطی ، سمت چپ بالا ، بالا سمت راست ، از ( @startColor )، به ( @endColor )); // Conqueror   
    پس‌زمینه - تصویر : - moz - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // FF 3.6+    
    پس زمینه - تصویر : - ms - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // IE10    
    پس‌زمینه - تصویر : - webkit - گرادیان ( خطی ، بالا سمت چپ ، بالا سمت راست ، توقف رنگ ( 0 ٪، @startColor )، توقف رنگ ( 100 ٪ ، @endColor ) ). // Safari 4+، Chrome 2+    
    پس‌زمینه - تصویر : - webkit - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // Safari 5.1+، Chrome 10+    
    پس زمینه - تصویر : - o - خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    فیلتر : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 و IE7 
    پس‌زمینه - تصویر : خطی - گرادیان ( سمت چپ ، @startColor ، @endColor ); // استاندارد لو   
  }
  . عمودی ( @startColor : #555، @endColor: #333) { 
    پس زمینه - رنگ : @endColor ; 
    پس زمینه - تکرار : تکرار - x ;
    پس‌زمینه - تصویر : - khtml - گرادیان ( خطی ، سمت چپ بالا ، پایین سمت چپ ، از ( @startColor )، به ( @endColor )); // Conqueror   
    پس‌زمینه - تصویر : - moz - خطی - گرادیان ( @startColor ، @endColor ); // FF 3.6+   
    پس زمینه - تصویر : - ms - خطی - گرادیان ( @startColor ، @endColor ); // IE10   
    پس‌زمینه - تصویر : - webkit - گرادیان ( خطی ، بالا سمت چپ ، پایین سمت چپ ، توقف رنگ ( 0 ٪، @startColor )، رنگ - توقف ( 100 ٪ ، @endColor ) ). // Safari 4+، Chrome 2+    
    پس زمینه - تصویر : - وب کیت - خطی - گرادیان ( @startColor ، @endColor ); // Safari 5.1+، Chrome 10+   
    پس‌زمینه - تصویر : - o - خطی - گرادیان ( @startColor ، @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    فیلتر : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 و IE7 
    پس‌زمینه - تصویر : خطی - گرادیان ( @startColor ، @endColor ); // استاندارد  
  }
  . جهت دار ( @startColor : #555، @endColor: #333، @deg: 45deg) { 
    ...
  }
  . عمودی - سه - رنگ ( @startColor : #00b3ee، @midColor: #7a43b6، @colorStop: 0.5، @endColor: #c3325f) { 
    ...
  }
}

عملیات و سیستم شبکه

برای تولید میکس‌های انعطاف‌پذیر و قدرتمند مانند موارد زیر، کمی شیک باشید و کمی ریاضی انجام دهید.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// سیستم شبکه ای
. ظرف {
  عرض : @siteWidth ; 
  حاشیه : 0 خودکار ;  
  . clearfix ();
}
. ستون ها ( @columnSpan : 1 ) {  
  نمایش : درون خطی ; 
  شناور : چپ ;
  عرض : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  حاشیه - چپ : @gridGutterWidth ; 
  &: اول - فرزند {
    حاشیه - چپ : 0 ; 
  }
}
. افست ( @columnOffset : 1 ) {  
  حاشیه - چپ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! مهم ؛          
}