نمونه های شروع سریع

به چند قالب سریع نیاز دارید؟ این مثال های اساسی را که با هم قرار داده ایم بررسی کنید:

شبکه پیش فرض

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

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

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

<div class = "ردیف" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

ستون های تودرتو

در صورت لزوم، محتوای خود را با ایجاد یک .rowدر یک ستون موجود، تودرتو کنید.

نمونه ای از ستون های تو در تو

<div class = "ردیف" > 
  <div class = "span12" > 
    سطح 1 ستون
    <div class = "ردیف" > 
      <div class = "span6" > 
        سطح 2
      </div>
      <div class = "span6" > 
        سطح 2
      </div>
    </div>
  </div>
</div>

شبکه خود را رول کنید

تعبیه شده در بوت استرپ تعدادی متغیر برای سفارشی سازی سیستم شبکه پیش فرض 940px وجود دارد. با کمی سفارشی‌سازی، می‌توانید اندازه ستون‌ها، ناودان‌ها و ظرفی که در آن قرار دارند را تغییر دهید.

داخل شبکه

متغیرهای مورد نیاز برای اصلاح سیستم شبکه در حال حاضر همه در preboot.less.

حالا برای سفارشی کردن

اصلاح گرید به معنای تغییر سه @grid-*متغیر و کامپایل مجدد فایل های Less است.

Bootstrap مجهز به سیستم شبکه ای با حداکثر 24 ستون است. پیش‌فرض فقط 16 است. در اینجا آمده است که چگونه متغیرهای شبکه شما برای یک شبکه 24 ستونی سفارشی به نظر می‌رسند.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

پس از کامپایل مجدد، شما تنظیم خواهید شد!

چیدمان ثابت

طرح‌بندی پیش‌فرض و ساده با پهنای 940 پیکسل، تقریباً برای هر وب‌سایت یا صفحه‌ای که توسط یک صفحه ارائه می‌شود <div.container>.

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

چیدمان سیال

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

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

سرفصل ها و کپی

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

کل شبکه تایپوگرافی بر اساس دو متغیر Less در فایل preboot.less ما است: @basefontو @baseline. اولی اندازه فونت پایه است که در سرتاسر استفاده می شود و دومی ارتفاع خط پایه است.

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

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> <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.

توجه: استفاده از تگ ها <b>و <i>تگ ها در HTML5 هنوز اشکالی ندارد و نیازی نیست که به ترتیب به صورت پررنگ و مورب استایل بندی شوند (البته اگر عنصر معنایی بیشتری وجود دارد، از آن استفاده کنید). <b>به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است، در حالی <i>که بیشتر برای صدا، اصطلاحات فنی و غیره است.

آدرس ها

این <address>عنصر برای اطلاعات تماس نزدیکترین اجداد خود یا کل بدنه کار استفاده می شود. در اینجا دو نمونه از نحوه استفاده از آن وجود دارد:

توجه: هر خط در یک <address>باید با یک خط شکسته ( <br />) خاتمه یابد یا در یک تگ سطح بلوک (مثلاً <p>) پیچیده شود تا محتوا به درستی ساختار یابد.

اختصارات

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

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

<blockquote> <p> <small>

نحوه نقل قول

برای اضافه کردن یک بلوک نقل قول، آن را بپیچید <blockquote>و <p>برچسب <small>بزنید. از <small>عنصر برای ذکر منبع خود استفاده کنید و قبل از آن یک خط خط دریافت خواهید —کرد.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante venenatis dapibus posuere velit aliquet.

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. عدد صحیح posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> دکتر جولیوس هیبرت </small>
</blockquote>

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• عدد صحیح molestie lorem at massa
• تسهیل در پرتیوم نیسل aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • زخم های پوروس سودال
  • Sem porttitor وستیبولوم laoreet
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• عدد صحیح molestie lorem at massa
• تسهیل در پرتیوم نیسل aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • زخم های پوروس سودال
  • Sem porttitor وستیبولوم laoreet
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

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

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. عدد صحیح molestie lorem at massa
4. تسهیل در پرتیوم نیسل aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

شرح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.

کد

<code> <pre>

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

ارائه کد

کد، بلوک‌ها یا فقط تکه‌های درون خطی را می‌توان فقط با قرار دادن در برچسب سمت راست با سبک نمایش داد. برای بلوک های کدی که چندین خط را در بر می گیرند، از <pre>عنصر استفاده کنید. برای کد درون خطی، از <code>عنصر استفاده کنید.

<div>
  <h1>عنوان</h1>
  <p>چیزی در اینجا...</p>
</div>

<div> <h1> عنوان </h1> <p> چیزی در اینجا... </p> </div>
  
  

برچسب های درون خطی

<span class="label">

هر عبارتی را در متن متن خود جلب کنید یا علامت بزنید.

هر چیزی را برچسب بزنید

تا به حال به یکی از آن فانتزی های جدید نیاز داشته اید! یا پرچم های مهم هنگام نوشتن کد؟ خوب، حالا شما آنها را دارید. در اینجا آنچه به طور پیش فرض گنجانده شده است:

شبکه رسانه ای

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

نمونه ریز عکسها

ریز عکسها در .media-gridهر اندازه ای می توانند باشند، اما زمانی که مستقیماً به سیستم شبکه بوت استرپ داخلی نگاشت شوند، بهترین کار را دارند. پهنای تصویر مانند 90، 210، و 330 با چند پیکسل پد ترکیب می‌شوند تا اندازه‌های , و ستون را .span2برابر .span4کنند .span6.

بزرگ

متوسط

کم اهمیت

کدگذاری آنها

استفاده از شبکه های رسانه ای آسان است و در سمت نشانه گذاری بسیار ساده است. ابعاد آنها صرفاً بر اساس اندازه تصاویر موجود است.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

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

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

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

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

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

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

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

<جدول>
  ...
</table>

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

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

توجه: Zebra-striping یک پیشرفت پیشرونده است که برای مرورگرهای قدیمی‌تر مانند IE8 و پایین‌تر در دسترس نیست.

<table class = "گورخر راه راه" > 
...
</table>

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

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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<اسکریپت > 
  $ ( تابع () { 
    $ ( "table# sortTableExample" ). جدول‌بندی ({ sortList : [[ 1 , 0 ]] });  
  })؛
</script>
<table class = "گورخر راه راه" > 
  ...
</table>

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

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

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

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

اندازه های فیلد را تشکیل دهید

تنها با افزودن چند کلاس به نشانه گذاری خود ، هر فرم input، selectیا عرضی را سفارشی کنید.textarea

از نسخه 1.3.0، کلاس‌های اندازه‌بندی مبتنی بر شبکه را برای عناصر فرم اضافه کرده‌ایم. لطفاً از اینها در کلاس‌های موجود .mini، .smallو غیره استفاده کنید.

دکمه ها

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

همه دکمه‌ها به‌طور پیش‌فرض دارای سبک خاکستری روشن هستند، اما تعدادی از کلاس‌های کاربردی را می‌توان برای سبک‌های رنگی مختلف اعمال کرد. این کلاس ها شامل کلاس آبی .primary، کلاس آبی روشن .info، کلاس سبز .successو کلاس قرمز .dangerاست.

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

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

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

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

حالت غیر فعال

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

پیوندها

دکمه ها

چیست؟

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

قابل تنظیم

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

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

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

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

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

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

• صفحه اصلی
• مشخصات
• پیام ها
• تنظیمات
• مخاطب
• کشویی
  • پیوند ثانویه
  • یه چیز دیگه اینجا
  • لینک دیگه

<ul 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 = "قرص" > 
  <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>

پودرهای سوخاری

ناوبری Breadcrumb به عنوان راهی برای نشان دادن محل حضور کاربران در یک برنامه یا سایت استفاده می شود، اما برای پیمایش اولیه استفاده نمی شود.

• صفحه اصلی

• صفحه اصلی /
• صفحه وسط

• صفحه اصلی /
• صفحه وسط /
• یکی دیگه

• صفحه اصلی /
• صفحه وسط /
• یکی دیگر /
• تو اینجایی

<ul class = "خرد نان" > 
  <li><a href = "#" > صفحه اصلی </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > صفحه میانی </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > یکی دیگر </a> <span class = "divider" > / </span></li>   
  <li class = "active" > شما اینجا هستید </li> 
</ul>

صفحه بندی

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

<div 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>

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

.alert-message

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

دریافت جاوا اسکریپت »

کد نمونه

<div class = "هشدار پیام هشدار"  >
  <a class = "close" href = "#" > ×   </a>
  <p><strong> گواکامول مقدس! </strong> بهتر است از خودتان مطمئن شوید که خیلی خوب به نظر نمی رسید. </p>
</div>

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

.alert-message.block-message

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

دریافت جاوا اسکریپت »

کد نمونه

<div class = "اخطار بلوک پیام هشدار" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> گواکامول مقدس! این یک هشدار است! </strong> بهتر است از خودتان مطمئن شوید که خیلی خوب به نظر نمی رسید. Nulla vitae elit libero، یک pharetra augue. commodo cursus magna، vel scelerisque nisl consectetur et. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > این اقدام را انجام دهید </a> <a class = "btn small" href = "#" > یا این کار را انجام دهید </a>     
  </div>
</div>

مدال ها

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

دریافت جاوا اسکریپت »

نکات ابزار

Twipsies برای کمک به کاربر گیج و هدایت آنها در جهت درست بسیار مفید است.

دریافت جاوا اسکریپت »

پاپاورها

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

دریافت جاوا اسکریپت »

شروع شدن

ادغام جاوا اسکریپت با کتابخانه بوت استرپ بسیار آسان است. در زیر به اصول اولیه می پردازیم و چند پلاگین عالی برای شروع به شما ارائه می دهیم!

مشاهده اسناد جاوا اسکریپت »

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

با افزونه‌های سفارشی جدید که با jQuery و Ender کار می‌کنند، برخی از اجزای اصلی Bootstrap را زنده کنید . ما شما را تشویق می کنیم که آنها را گسترش دهید و آنها را مطابق با نیازهای توسعه خاص خود تغییر دهید.

آیا جاوا اسکریپت لازم است؟

جواب منفی! بوت استرپ قبل از هر چیز طراحی شده است تا یک کتابخانه CSS باشد. این جاوا اسکریپت یک لایه تعاملی اساسی را در بالای سبک های موجود ارائه می دهد.

با این حال، برای کسانی که به جاوا اسکریپت نیاز دارند، ما افزونه‌های بالا را ارائه کرده‌ایم تا به شما در درک نحوه ادغام بوت استرپ با جاوا اسکریپت کمک کند و فوراً گزینه‌ای سریع و سبک را برای عملکرد اصلی به شما ارائه دهد.

برای اطلاعات بیشتر و دیدن چند نمایش زنده، لطفاً به صفحه مستندات افزونه ما مراجعه کنید .