Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
د گرډ سیسټم معیاري 940px راک کړئ یا خپل ځان رول کړئ
ډیفالټ گرډ
د ډیفالټ گرډ سیسټم د بوټسټریپ برخې په توګه چمتو شوی د 940px پراخه 16 کالم گرډ دی. دا د مشهور 960 گرډ سیسټم خوند دی، مګر په ښي او ښي خوا کې د اضافي حاشیې / پیډینګ پرته.
د ګریډ مارک اپ بیلګه
لکه څنګه چې دلته ښودل شوي، یو بنسټیز ترتیب د دوو "کالمونو" سره رامینځته کیدی شي، هر یو د 16 بنسټیزو کالمونو شمیر چې موږ یې زموږ د شبکې سیسټم د یوې برخې په توګه تعریف کړی. د نورو تغیراتو لپاره لاندې مثالونه وګورئ.
- <div class="row"> ټولګي = "قطار" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
۸
۸
5
11
16
د کالمونو بندول
4
8 آفسټ 4
4 آفسټ 4
4 آفسټ 4
5 آفسټ 3
5 آفسټ 3
10 آفسټ 6
د ویب پاڼو د جوړولو لپاره بنسټیز ټیمپلیټونه
ثابت ترتیب
یو بنسټیز 940px پراخه، د هر سایټ یا پاڼې په اړه د کانټینر ترتیب.
- <body>
- <div class = "کانټینر" >
- ...
- </div>
- </body>
د سیال ترتیب
د انعطاف وړ مایع یا مایع پاڼې جوړښت چې لږترلږه او اعظمي پلنوالی او د کیڼ لاس اړخ بار سره. د ایپسونو لپاره عالي.
- <body>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </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 parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
د مثال سرلیک فرعي سرلیک لري ...
<strong>تاسو کولی شئ د او سره فرعي سرلیکونه هم اضافه کړئ<em>
متفرقه. عناصر
د تاکید، پتې، او لنډیزونو کارول
<strong> <em> <address> <abbr>
کله چې وکارول شي
د تاکید ټاګونه ( <strong>او <em>) باید د یوې کلمې یا جملې او د هغې شاوخوا کاپي ترمنځ د لید توپیر اضافه کولو لپاره وکارول شي. <strong>د ساده زاړه پاملرنې او د پام وړ پاملرنې او سرلیکونو<em> لپاره وکاروئ .
په یوه پراګراف کې ټینګار
Fusce dapibus , Tellus ac cursus commodo , Tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharatra augue.
ادرسونه
addressعنصر د دې لپاره کارول کیږي - تاسو یې اټکل کړی! - پته . دلته دا څنګه ښکاري:
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 به په اتوماتيک ډول د ایم ډیش (—) سره یو نوم مخکینۍ کړي.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
ډاکټر جولیوس هیبرټ
لیستونه
بې ترتیبه<ul>
- جیریمی بیکسبی
- رابرټ ډیزور
- جوش واشنګټن
- انتون کاپریسی
- زما د ټیم ملګري
- جورج کاستانزا
- جیري سینفیلډ
- کاسمو کرامر
- ایلین بینیس
- نیومن
- جان یعقوب
- پاول پیرس
- کیون ګارنټ
بې سټایل<ul.unstyled>
- جیریمی بیکسبی
- رابرټ ډیزور
- جوش واشنګټن
- انتون کاپریسی
- زما د ټیم ملګري
- جورج کاستانزا
- جیري سینفیلډ
- کاسمو کرامر
- ایلین بینیس
- نیومن
- جان یعقوب
- پاول پیرس
- کیون ګارنټ
امر وکړ<ol>
- جیریمی بیکسبی
- رابرټ ډیزور
- جوش واشنګټن
- انتون کاپریسی
- زما د ټیم ملګري
- جورج کاستانزا
- جیري سینفیلډ
- کاسمو کرامر
- ایلین بینیس
- نیومن
- جان یعقوب
- پاول پیرس
- کیون ګارنټ
تفصیلdl
- د توضیحاتو لیست
- د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.
- Euismod
- Vestibulum id ligula porta felis euismod sempre 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درجه بندي >>> وي .theadtrth
د کالم سرلیکونو ته ورته، ستاسو د میز ټول بدن مینځپانګه باید په یو ډول پوښل شي tbodyنو ستاسو درجه بندي tbody> tr> tdوي.
بېلګه: د ډیفالټ میز سټایلونه
ټول میزونه به په اوتومات ډول یوازې د لازمي سرحدونو سره سټایل شي ترڅو د لوستلو وړتیا او جوړښت وساتي. د اضافي ټولګیو یا ځانګړتیاو اضافه کولو ته اړتیا نشته.
| # | لومړی نوم | تخلص | ژبه |
|---|---|---|---|
| 1 | ځینې | یو | انګلیسي |
| 2 | جو | شپږ بسته | انګلیسي |
| 3 | Stu | غاښ | کوډ |
- <table class="common-table"> class = "common-table" >
- ...
- </table>
بېلګه: د زیبرا پټه
د زیبرا سټریپینګ په اضافه کولو سره د خپلو میزونو سره یو څه خوند واخلئ — یوازې .zebra-stripedټولګي اضافه کړئ.
| # | لومړی نوم | تخلص | ژبه |
|---|---|---|---|
| 1 | ځینې | یو | انګلیسي |
| 2 | جو | شپږ بسته | انګلیسي |
| 3 | Stu | غاښ | کوډ |
- <table class="common-table zebra-striped"> class = "common-table zebra-striped" >
- ...
- </table>
بېلګه: د زیبرا پټه w/ TableSorter.js
د مخکیني مثال په پام کې نیولو سره، موږ د jQuery او Tablesorter پلگ ان له لارې د ترتیب کولو فعالیت چمتو کولو سره زموږ د میزونو ګټورتیا ته وده ورکوو . د ترتیب بدلولو لپاره د هر کالم سرلیک کلیک وکړئ.
| # | لومړی نوم | تخلص | ژبه |
|---|---|---|---|
| 1 | ستاسو | یو | انګلیسي |
| 2 | جو | شپږ بسته | انګلیسي |
| 3 | Stu | غاښ | کوډ |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- د سکریپټ ډول = "متن/جاوا سکرپٹ" >
- $ ( سند ). چمتو ( فعالیت () {
- $ ( "table#sortTableExample" ). میز ترتیبونکی ( { ترتیب لیست : [[ 1 , 0 ]]} );
- });
- </script>
- <د میز طبقه = "مشترک میز زیبرا پټه" >
- ...
- </table>
فورمې
ډیفالټ سټایلونه
ټولو فورمو ته ډیفالټ سټایلونه ورکړل شوي ترڅو دوی د لوستلو وړ او د توزیع وړ انداز کې وړاندې کړي. سټایلونه د متن داخلونو لپاره چمتو شوي ، لیستونه غوره کړئ ، متن ټایرونه ، راډیو بټنونه او چیک باکسونه ، او بټونو.
سټک شوي بڼې
د خپل فارم HTML کې اضافه کړئ .form-stackedاو تاسو به د دوی د کیڼ اړخ پرځای د دوی ساحو په سر کې لیبلونه ولرئ. دا ښه کار کوي که ستاسو فورمې لنډې وي یا تاسو د درنو فورمو لپاره د معلوماتو دوه کالمونه لرئ.
تڼۍ
د کنوانسیون په توګه، تڼۍ د عملونو لپاره کارول کیږي پداسې حال کې چې لینکونه د شیانو لپاره کارول کیږي. د مثال په توګه، "ډاونلوډ" کیدای شي یو تڼۍ وي او "وروستی فعالیت" کیدای شي یو لینک وي.
ټولې تڼۍ د سپک خړ سټایل ته ډیفالټ کوي ، مګر نیلي .primaryټولګي شتون لري. برسیره پردې، ستاسو د سټایلونو رول کول اسانه دي.
د مثال بټن
د تڼۍ سټایلونه د پلي کیدو سره په هرڅه پلي کیدی شي .btn. عموما تاسو غواړئ دا یوازې aپه , button، او غوره کولو inputعناصرو کې پلي کړئ. دلته دا څنګه ښکاري:
بدیل اندازه
لوی یا کوچني بټنونه خوښوي؟ په دې کې اوسئ!
د معلولیت ریاست
د هغه بټونو لپاره چې فعال ندي یا د اپلیکیشن لخوا د یو دلیل یا بل لپاره غیر فعال شوي دي ، د معلول حالت وکاروئ. دا د .disabledلینکونو او عناصرو :disabledلپاره دی .button
لینکونه
تڼۍ
د بریالیتوب، خبرتیا، او د خطا پیغامونو یا خبرتیاو لپاره د خبرتیاو او غلطیو سټایلونه
بنسټیز خبرتیاوې
د ناکامۍ، احتمالي ناکامۍ، یا د عمل بریالیتوب روښانه کولو لپاره یو لیک پیغامونه. په ځانګړې توګه د فورمو لپاره ګټور.
پیغامونه بند کړئ
د هغو پیغامونو لپاره چې لږ وضاحت ته اړتیا لري، موږ د پاراګراف سټایل خبرتیاوې لرو. دا د اوږدې تېروتنې پیغامونو د ببل کولو لپاره مناسب دي، یو کاروونکي ته د پاتې عمل په اړه خبرداری ورکوي، یا یوازې په پاڼه کې د ډیر ټینګار لپاره معلومات وړاندې کوي.
په موډلونو، ټلیپونو، او پاپورونو کې د مینځپانګې ښودلو لپاره د پاپور اجزا
موډلونه
موډلونه - ډیالوګونه یا لایټ بکسونه - په داسې شرایطو کې د متناسب عملونو لپاره عالي دي چیرې چې دا مهمه ده چې د شالید شرایط وساتل شي.
د موډل سرلیک
×یو ښه بدن ...
د وسیلې لارښوونې
Twipsies د مغشوش کارونکي سره د مرستې لپاره خورا ګټور دي او سم لوري ته یې په ګوته کوي.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur، aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo، voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fugit fugit accusantium .
لاندې!
سمه ده!
پاتې!
پورته!
Popovers
د ترتیب اغیزې پرته یوې پاڼې ته د فرعي متن معلوماتو چمتو کولو لپاره پاپورونه وکاروئ.
د پاپور سرلیک
د کم سوپرچارج سره د بوټسټریپ کارول خپل CSS د متغیرونو ، مکسینونو او افعالاتو سره
بوټسټریپ د Preboot سره جوړ شوی و ، د مکسینونو او متغیرونو خلاص سرچینه بسته چې د ګړندي او اسانه ویب پراختیا لپاره د CSS پری پروسیسر ، Less سره په ګډه کارول کیږي.
وګورئ چې موږ څنګه په بوټسټریپ کې پریبوټ کارولی او تاسو څنګه کولی شئ له دې څخه کار واخلئ که تاسو په خپله راتلونکي پروژه کې لږ چلول غوره کړئ.
څنګه یې وکاروئ
دا اختیار په خپل براوزر کې د جاوا سکرپٹ له لارې په CSS کې د بوټسټریپ لږ متغیرونو ، مکسینونو او نیسټ کولو بشپړ کارولو لپاره وکاروئ.
- <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "ټول" />
- د سکریپټ ډول = "text/javascript" src = "js/less-1.0.41.min.js" ></script>
د .js حل احساس نه کوئ؟ د کم میک اپلیټ هڅه وکړئ یا د تالیف کولو لپاره Node.js وکاروئ کله چې تاسو خپل کوډ ځای په ځای کړئ.
څه پکې شامل دي
دلته د بوټسټریپ د یوې برخې په توګه د ټویټر بوټسټریپ کې د هغه څه ځینې مهمې څرګندونې دي. د بوټسټریپ ویب پا orې یا ګیتوب پروژې پا pageې ته لاړشئ ترڅو ډاونلوډ او نور زده کړئ.
د رنګ تغیرات
په لږ کې تغیرات ستاسو د CSS سر درد وړیا ساتلو او تازه کولو لپاره مناسب دي. کله چې تاسو غواړئ د رنګ ارزښت یا په مکرر ډول کارول شوي ارزښت بدل کړئ ، دا په یو ځای کې تازه کړئ او تاسو تنظیم شوي یاست.
- // لینکونه
- د لینک رنګ : #8b59c2 ؛
- @linkColorHover : تیاره ( @linkColor , 10 );
- // خړ
- تور : #000;
- ګریډارک : روښانه کول ( @تور ، 25 ٪)؛
- خړ : روښانه ( @تور ، 50 ٪)؛
- خړ رڼا : روښانه کول ( @ تور ، 70 ٪)؛
- خړ لایټر : روښانه کول ( @ تور ، 90 ٪)؛
- سپين : #ffff ;
- // تلفظ رنګونه
- نیلي : #08b5fb ;
- شنه : #46a546 ;
- سور : #9d261d ;
- ژیړ : #ffc40d;
- @نارنج : #f89406 ;
- ګلابي : #c3325f ;
- ارغواني : #7a43b6 ;
- // بیس لائن
- @baseline : 20px ;
تبصره کول
/* ... */لږ د CSS نورمال ترکیب سربیره د تبصرې بل ډول هم چمتو کوي .
- // دا یو تبصره ده
- /* دا هم یوه تبصره ده*/
وازګه ګډوي
مکسینز اساسا د CSS لپاره شامل یا برخې دي، تاسو ته اجازه درکوي چې د کوډ بلاک په یو کې یوځای کړئ. دا د پلورونکي مخکیني ملکیتونو لپاره عالي دي لکه box-shadowد کراس براوزر ګریډینټ ، فونټ سټیکس ، او نور ډیر څه. لاندې د مکسینونو نمونه ده چې د بوټسټریپ سره شامل دي.
د فونټ سټکس
- #فونټ {
- . لنډ لاسی ( @وزن : نورمال , @ اندازه : 14px , @ line Height : 20px ) {
- د فونټ اندازه : @size ;
- فونټ وزن : @weight ; _
- کرښه - لوړوالی : @ lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @line Height : 20px ) {
- د فونټ کورنۍ : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- د فونټ اندازه : @size ;
- فونټ وزن : @weight ; _
- کرښه - لوړوالی : @ lineHeight ;
- }
- . سیرف ( @وزن : نورمال , @ اندازه : 14px , @ lineHeight : 20px ) {
- د فونټ کورنۍ : " جورجیا" , ټایمز نیو رومن , ټایمز , سنز سیرف ;
- د فونټ اندازه : @size ;
- فونټ وزن : @weight ; _
- کرښه - لوړوالی : @ lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @line Height : 20px ) {
- د فونټ کورنۍ : " موناکو" , کوریر نیو , مونوسپیس ;
- د فونټ اندازه : @size ;
- فونټ وزن : @weight ; _
- کرښه - لوړوالی : @ lineHeight ;
- }
- }
تدریجي
- # تدریجي {
- . افقي ( @startColor : #555, @endColor: #333) {
- پس منظر رنګ : @endColor ;
- پس منظر - تکرار : تکرار - x ;
- پس منظر - انځور : - khtml - تدریجي ( خطي ، کیڼ پورتنۍ ، ښیې پورته ، له ( @startColor ) څخه ( @endColor ) ته ؛ // کانکورر
- پس منظر - انځور : - moz - خطي - تدریجي ( کیڼ , StartColor , @ endColor ); // FF 3.6+
- پس منظر - انځور : - ms - خطي - تدریجي ( کیڼ ، @startColor ، @endColor )؛ // IE10
- پس منظر - انځور : - ویب کیټ - تدریجي ( خطي ، کیڼ سر ، ښیې سر ، رنګ - ودرول ( 0 ٪، @startColor )، رنګ - بند ( 100 ٪، @endColor ))؛ // سفاري 4+، کروم 2+
- پس منظر - انځور : - ویبکیټ - خطي - تدریجي ( کیڼ ، @startColor ، @endColor )؛ // سفاري 5.1+، کروم 10+
- پس منظر - انځور : - o - خطي - تدریجي ( کیڼ ، @startColor ، @endColor )؛ // اوپیرا 11.10
- - ms - فلټر : %( "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 ) ته ؛ // کانکورر
- پس منظر - انځور : - moz - خطي - تدریجي ( @startColor ، @endColor )؛ // FF 3.6+
- پس منظر - انځور : - ms - خطي - تدریجي ( @startColor ، @endColor )؛ // IE10
- پس منظر - انځور : - ویب کیټ - تدریجي ( خطي ، کیڼ پورته ، کیڼ ښکته ، رنګ - ودرول ( 0 ٪، @startColor )، رنګ - بند ( 100 ٪، @endColor ))؛ // سفاري 4+، کروم 2+
- پس منظر - انځور : - ویبکیټ - خطي - تدریجي ( @startColor ، @endColor )؛ // سفاري 5.1+، کروم 10+
- پس منظر - انځور : - o - خطي - تدریجي ( @startColor ، @endColor )؛ // اوپیرا 11.10
- - ms - فلټر : %( "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) {
- ...
- }
- }
عملیات او د شبکې سیسټم
په زړه پوري اوسئ او یو څه ریاضی ترسره کړئ ترڅو د لاندې یو په څیر انعطاف وړ او ځواکمن مکسونه رامینځته کړئ.
- // ګریډیټیوډ
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // د ګریډ سیسټم
- . کانتینر {
- عرض : @siteWidth ;
- حاشیه : 0 اتومات ;
- . clearfix ();
- }
- . کالمونه ( @columnSpan : 1 ) {
- ښکاره کول : انلاین
- float : چپه ;
- عرض : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- حاشیه - کیڼ اړخ : @gridGutterWidth ;
- &: لومړی - ماشوم {
- حاشیه - چپه : 0 ;
- }
- }
- . آفسیټ ( @columnOffset : 1 ) {
- حاشیه - بائیں : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! مهم ;
- }