سہاروں · بوٹسٹریپ اردو میں

HTML5 doctype کی ضرورت ہے۔

بوٹسٹریپ کچھ HTML عناصر اور CSS خصوصیات کا استعمال کرتا ہے جو HTML5 doctype کے استعمال کی ضرورت ہوتی ہے۔ اسے اپنے تمام منصوبوں کے آغاز میں شامل کریں۔

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

نوع ٹائپ اور لنکس

بوٹسٹریپ بنیادی عالمی ڈسپلے، نوع ٹائپ، اور لنک اسٹائل سیٹ کرتا ہے۔ خاص طور پر، ہم:

marginجسم پر ہٹا دیں ۔
پر سیٹ کریں background-color: white;۔body
ہمارے ٹائپوگرافک بیس کے طور پر @baseFontFamily، @baseFontSize، اور صفات کا استعمال کریں۔@baseLineHeight
عالمی لنک کا رنگ بذریعہ سیٹ کریں @linkColorاور صرف پر لنک انڈر لائنز لگائیں۔:hover

یہ طرزیں scaffolding.less میں مل سکتی ہیں ۔

نارملائز کے ذریعے ری سیٹ کریں۔

بوٹسٹریپ 2 کے ساتھ، پرانے ری سیٹ بلاک کو Normalize.css کے حق میں چھوڑ دیا گیا ہے، جو نکولس گیلاگھر اور جوناتھن نیل کا ایک پروجیکٹ ہے جو HTML5 بوائلر پلیٹ کو بھی طاقت دیتا ہے ۔ جب کہ ہم اپنے reset.less میں Normalize کا زیادہ استعمال کرتے ہیں ، ہم نے خاص طور پر بوٹسٹریپ کے لیے کچھ عناصر کو ہٹا دیا ہے۔

لائیو گرڈ کی مثال

پہلے سے طے شدہ بوٹسٹریپ گرڈ سسٹم 12 کالموں کا استعمال کرتا ہے ، جس سے 940px چوڑا کنٹینر بناتا ہے، بغیر جوابی خصوصیات کو فعال کیا جاتا ہے۔ ریسپانسیو CSS فائل کو شامل کرنے کے ساتھ، گرڈ آپ کے ویو پورٹ کے لحاظ سے 724px اور 1170px چوڑائی میں ڈھال لیتا ہے۔ 767px ویو پورٹ کے نیچے، کالم سیال بن جاتے ہیں اور عمودی طور پر اسٹیک ہوتے ہیں۔

بنیادی گرڈ ایچ ٹی ایم ایل

ایک سادہ دو کالم لے آؤٹ کے لیے، ایک بنائیں اور کالموں .rowکی مناسب تعداد شامل کریں ۔ .span*چونکہ یہ ایک 12 کالم گرڈ ہے، ہر ایک .span*ان 12 کالموں کی تعداد پر پھیلا ہوا ہے، اور ہر قطار (یا پیرنٹ میں کالموں کی تعداد) کے لیے ہمیشہ 12 تک کا اضافہ کرنا چاہیے۔

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

اس مثال کو دیکھتے ہوئے، ہمارے پاس ہے .span4اور .span8، کل 12 کالموں اور ایک مکمل قطار کے لیے۔

کالمز کو آف سیٹ کرنا

.offset*کلاسز کا استعمال کرتے ہوئے کالموں کو دائیں طرف منتقل کریں ۔ ہر کلاس کالم کے بائیں مارجن کو پورے کالم سے بڑھاتی ہے۔ مثال کے طور پر، چار کالموں پر .offset4منتقل ہوتا ہے ۔.span4

3 آفسیٹ 2

3 آفسیٹ 1

3 آفسیٹ 2

6 آفسیٹ 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

نیسٹنگ کالم

اپنے مواد کو ڈیفالٹ گرڈ کے ساتھ نیسٹ کرنے کے لیے، موجودہ کالم کے اندر ایک نیا .rowاور کالموں کا سیٹ شامل کریں ۔ نیسٹڈ قطاروں میں کالموں کا ایک سیٹ شامل ہونا چاہیے جو اس کے پیرنٹ کے کالموں کی تعداد میں شامل ہو۔.span*.span*

لیول 1 کالم

لیول 2

<div class = "row" > 
  <div class = "span9" > 
    لیول 1 کالم
    <div class = "row" > 
      <div class = "span6" > لیول 2 </div> 
      <div class = "span3" > لیول 2 </div> 
    </div>
  </div>
</div>

رواں سیال گرڈ کی مثال

فلوڈ گرڈ سسٹم کالم کی چوڑائی کے لیے پکسلز کے بجائے فیصد استعمال کرتا ہے۔ اس میں ہمارے فکسڈ گرڈ سسٹم جیسی ہی ریسپانسیو صلاحیتیں ہیں، جو اسکرین کی کلیدی ریزولوشنز اور ڈیوائسز کے لیے مناسب تناسب کو یقینی بناتی ہیں۔

بنیادی سیال گرڈ HTML

.rowمیں تبدیل کرکے کسی بھی قطار کو "سیال" بنائیں .row-fluid۔ کالم کی کلاسیں بالکل وہی رہتی ہیں، جس سے فکسڈ اور فلوئڈ گرڈ کے درمیان پلٹنا آسان ہوتا ہے۔

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

سیال آفسیٹنگ

فکسڈ گرڈ سسٹم آفسٹنگ کی طرح کام کرتا ہے: .offset*کسی بھی کالم میں شامل کریں تاکہ اتنے کالموں سے آفسیٹ ہو۔

4 آفسیٹ 4

3 آفسیٹ 3

6 آفسیٹ 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

سیال گھونسلہ

فلوئڈ گرڈ گھونسلے کو مختلف طریقے سے استعمال کرتے ہیں: کالموں کے ہر نیسٹڈ لیول میں 12 کالموں کا اضافہ ہونا چاہیے۔ اس کی وجہ یہ ہے کہ سیال گرڈ چوڑائی کی ترتیب کے لیے فیصد کا استعمال کرتا ہے، پکسلز کا نہیں۔

سیال 12

سیال 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    سیال 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        سیال 6
        <div class = "row-fluid" > 
          <div class = "span6" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

فکسڈ لے آؤٹ

صرف مطلوبہ کے ساتھ ایک عام فکسڈ چوڑائی (اور اختیاری طور پر ذمہ دار) لے آؤٹ فراہم کرتا <div class="container">ہے۔

<body>
  <div class = "کنٹینر" > 
    ...
  </div>
</body>

سیال لے آؤٹ

<div class="container-fluid">ایپلیکیشنز اور دستاویزات کے لیے بہترین کے ساتھ دو کالم والا صفحہ بنائیں ۔

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--سائیڈبار مواد-->
    </div>
    <div class = "span10" > 
      <!--جسمانی مواد-->
    </div>
  </div>
</div>

ذمہ دار خصوصیات کو فعال کرنا

<head>اپنی دستاویز کے اندر مناسب میٹا ٹیگ اور اضافی اسٹائل شیٹ شامل کرکے اپنے پروجیکٹ میں ریسپانسیو سی ایس ایس کو آن کریں ۔ اگر آپ نے حسب ضرورت صفحہ سے بوٹسٹریپ مرتب کیا ہے، تو آپ کو صرف میٹا ٹیگ شامل کرنے کی ضرورت ہے۔

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

سنو!بوٹسٹریپ میں اس وقت بطور ڈیفالٹ ریسپانسیو فیچرز شامل نہیں ہیں کیونکہ ہر چیز کو ریسپانسیو ہونے کی ضرورت نہیں ہے۔ اس خصوصیت کو ہٹانے کے لیے ڈویلپرز کی حوصلہ افزائی کرنے کے بجائے، ہم اسے ضرورت کے مطابق فعال کرنا بہتر سمجھتے ہیں۔

ذمہ دار بوٹسٹریپ کے بارے میں

میڈیا کے استفسارات متعدد شرائط کی بنیاد پر حسب ضرورت CSS کی اجازت دیتے ہیں — تناسب، چوڑائی، ڈسپلے کی قسم، وغیرہ — لیکن عام طور پر اس کے ارد گرد min-widthاور max-width.

ہمارے گرڈ میں کالم کی چوڑائی میں ترمیم کریں۔
جہاں ضروری ہو وہاں فلوٹ کے بجائے عناصر کو اسٹیک کریں۔
آلات کے لیے زیادہ موزوں ہونے کے لیے عنوانات اور متن کا سائز تبدیل کریں۔

میڈیا کے سوالات کو ذمہ داری کے ساتھ استعمال کریں اور صرف اپنے موبائل سامعین کے لیے آغاز کے طور پر۔ بڑے پروجیکٹس کے لیے، وقف شدہ کوڈ بیسز پر غور کریں نہ کہ میڈیا کے سوالات کی تہوں پر۔

معاون آلات

بوٹسٹریپ ایک فائل میں مٹھی بھر میڈیا سوالات کو سپورٹ کرتا ہے تاکہ آپ کے پروجیکٹس کو مختلف ڈیوائسز اور اسکرین ریزولوشنز پر زیادہ مناسب بنانے میں مدد ملے۔ یہاں کیا شامل ہے:

لیبل	لے آؤٹ کی چوڑائی	کالم کی چوڑائی	گٹر کی چوڑائی
بڑا ڈسپلے	1200px اور اس سے اوپر	70px	30px
طے شدہ	980px اور اس سے اوپر	60px	20px
پورٹریٹ گولیاں	768px اور اس سے اوپر	42px	20px
فون سے گولیاں	767px اور نیچے	سیال کالم، کوئی مقررہ چوڑائی نہیں۔
فونز	480px اور نیچے	سیال کالم، کوئی مقررہ چوڑائی نہیں۔

/* بڑا ڈیسک ٹاپ */
@media ( کم سے کم چوڑائی : 1200px ) { ... }     
 
/* لینڈ اسکیپ اور ڈیسک ٹاپ کے لیے پورٹریٹ ٹیبلیٹ */
@media ( کم سے کم چوڑائی : 768px ) اور ( زیادہ سے زیادہ چوڑائی : 979px ) { ... }        
 
/* لینڈ اسکیپ فون سے پورٹریٹ ٹیبلیٹ */
@media ( زیادہ سے زیادہ چوڑائی : 767px ) { ... }     
 
/* لینڈ اسکیپ فونز اور نیچے */
@media ( زیادہ سے زیادہ چوڑائی : 480px ) { ... }

ذمہ دار یوٹیلیٹی کلاسز

تیز رفتار موبائل دوستانہ ترقی کے لیے، ڈیوائس کے ذریعے مواد دکھانے اور چھپانے کے لیے ان یوٹیلیٹی کلاسز کا استعمال کریں۔ ذیل میں دستیاب کلاسوں کی ایک جدول اور دی گئی میڈیا استفسار کے لے آؤٹ (آلہ کے ذریعہ لیبل لگا ہوا) پر ان کا اثر ہے۔ وہ میں پایا جا سکتا ہے responsive.less.

کلاس	فونز767px اور نیچے	گولیاں979px سے 768px تک	ڈیسک ٹاپسطے شدہ
`.visible-phone`	نظر آنے والا	پوشیدہ	پوشیدہ
`.visible-tablet`	پوشیدہ	نظر آنے والا	پوشیدہ
`.visible-desktop`	پوشیدہ	پوشیدہ	نظر آنے والا
`.hidden-phone`	پوشیدہ	نظر آنے والا	نظر آنے والا
`.hidden-tablet`	نظر آنے والا	پوشیدہ	نظر آنے والا
`.hidden-desktop`	نظر آنے والا	نظر آنے والا	پوشیدہ

کب استعمال کرنا ہے۔

محدود بنیادوں پر استعمال کریں اور ایک ہی سائٹ کے بالکل مختلف ورژن بنانے سے گریز کریں۔ اس کے بجائے، ہر آلے کی پیشکش کو مکمل کرنے کے لیے ان کا استعمال کریں۔ ریسپانسیو یوٹیلیٹیز کو ٹیبلز کے ساتھ استعمال نہیں کیا جانا چاہیے، اور جیسا کہ اس کی حمایت نہیں کی جاتی ہے۔

ذمہ دار یوٹیلیٹیز ٹیسٹ کیس

مندرجہ بالا کلاسز کو جانچنے کے لیے اپنے براؤزر کا سائز تبدیل کریں یا مختلف ڈیوائسز پر لوڈ کریں۔

پر مرئی...

سبز چیک مارکس بتاتے ہیں کہ کلاس آپ کے موجودہ ویو پورٹ میں دکھائی دے رہی ہے۔

فون✔ فون
گولی✔ ٹیبلیٹ
ڈیسک ٹاپ✔ ڈیسک ٹاپ

پر پوشیدہ...

یہاں، سبز چیک مارکس بتاتے ہیں کہ کلاس آپ کے موجودہ ویو پورٹ میں پوشیدہ ہے۔

فون✔ فون
گولی✔ ٹیبلیٹ
ڈیسک ٹاپ✔ ڈیسک ٹاپ

سہاروں ۔

عالمی ترتیبات