የሚገኙ ግሊፎች
ከGlyphicon Halflings ስብስብ ከ250 በላይ ግሊፍሎችን በቅርጸ-ቁምፊ ቅርጸት ያካትታል። Glyphicons Halflings በመደበኛነት በነጻ አይገኙም፣ ነገር ግን ፈጣሪያቸው ለBootstrap ያለምንም ወጪ እንዲገኙ አድርጓቸዋል። ለማመስገን፣ በተቻለ መጠን ወደ Glyphicons የሚመለስ አገናኝ እንዲያካትቱ እንጠይቃለን።
እንዴት መጠቀም እንደሚቻል
ለአፈጻጸም ምክንያቶች ሁሉም አዶዎች የመሠረት ክፍል እና የግለሰብ አዶ ክፍል ያስፈልጋቸዋል። ለመጠቀም የሚከተለውን ኮድ በማንኛውም ቦታ ያስቀምጡ። ለትክክለኛው ንጣፍ በአዶ እና በጽሑፍ መካከል ክፍተት መተውዎን ያረጋግጡ።
ከሌሎች አካላት ጋር አትቀላቅሉ
የአዶ ክፍሎች በቀጥታ ከሌሎች አካላት ጋር ሊጣመሩ አይችሉም። በተመሳሳይ ኤለመንት ላይ ከሌሎች ክፍሎች ጋር አብረው ጥቅም ላይ መዋል የለባቸውም. በምትኩ፣ ጎጆ ያክሉ <span>
እና የአዶ ክፍሎችን በ <span>
.
በባዶ አካላት ላይ ብቻ ለመጠቀም
የአዶ መደቦች የጽሑፍ ይዘት በሌላቸው እና ምንም የሕፃን ክፍሎች በሌሉት አካላት ላይ ብቻ ነው ጥቅም ላይ መዋል ያለባቸው።
የአዶ ቅርጸ-ቁምፊውን ቦታ በመቀየር ላይ
../fonts/
Bootstrap የአዶ ቅርጸ-ቁምፊ ፋይሎች ከተቀናጁት የCSS ፋይሎች አንጻር በማውጫው ውስጥ እንደሚገኙ ይገምታል ። እነዚያን የቅርጸ-ቁምፊ ፋይሎችን ማንቀሳቀስ ወይም እንደገና መሰየም ማለት ከሶስቱ መንገዶች በአንዱ CSS ማዘመን ማለት ነው።
@icon-font-path
በምንጩ ውስጥ ያሉትን እና/ወይም ተለዋዋጮችን ይቀይሩ @icon-font-name
ያነሱ ፋይሎች።
በትንሹ አቀናባሪ የቀረበውን አንጻራዊ የዩአርኤል አማራጮችን ተጠቀም ።
url()
በተቀናበረው CSS ውስጥ ያሉትን መንገዶች ይቀይሩ ።
ለእርስዎ የተለየ የእድገት ማዋቀር የሚስማማውን ማንኛውንም አማራጭ ይጠቀሙ።
ተደራሽ አዶዎች
ዘመናዊ የረዳት ቴክኖሎጂዎች ስሪቶች በCSS የመነጩ ይዘቶችን እና የተወሰኑ የዩኒኮድ ቁምፊዎችን ያስታውቃሉ። በስክሪን አንባቢዎች ውስጥ ያልታሰበ እና ግራ የሚያጋባ ውጤትን ለማስወገድ (በተለይ አዶዎች ለጌጥነት ብቻ ጥቅም ላይ በሚውሉበት ጊዜ) ከባህሪው ጋር aria-hidden="true"
እንደብቃቸዋለን።
ትርጉሙን ለማስተላለፍ አዶን እየተጠቀሙ ከሆነ (እንደ ጌጣጌጥ አካል ብቻ ሳይሆን) ይህ ትርጉም ወደ አጋዥ ቴክኖሎጂዎች መተላለፉን ያረጋግጡ - ለምሳሌ ተጨማሪ ይዘትን ያካትቱ ፣ .sr-only
ከክፍል ጋር በምስላዊ የተደበቀ።
ምንም ሌላ ጽሑፍ የሌሉ መቆጣጠሪያዎችን እየፈጠሩ ከሆነ (ለምሳሌ <button>
አዶን ብቻ የያዘ) የመቆጣጠሪያውን ዓላማ ለመለየት ሁልጊዜ አማራጭ ይዘት ማቅረብ አለቦት ይህም ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች ትርጉም ይኖረዋል። በዚህ አጋጣሚ aria-label
በመቆጣጠሪያው ላይ አንድ ባህሪ ማከል ይችላሉ.
<span class= "glyphicon glyphicon-search" aria-hidden= "true" ></span>
ምሳሌዎች
ለመሳሪያ አሞሌ፣ አሰሳ ወይም ቀድሞ የተሰሩ የቅጽ ግብዓቶች በአዝራሮች፣ የአዝራር ቡድኖች ውስጥ ይጠቀሙባቸው።
<button type= "button" class= "btn btn-default" aria-label= "Left Align" >
<span class= "glyphicon glyphicon-align-left" aria-hidden= "true" ></span>
</button>
<button type= "button" class= "btn btn-default btn-lg" >
<span class= "glyphicon glyphicon-star" aria-hidden= "true" ></span> Star
</button>
ይህን ፍንጭ ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች ለማስተላለፍ ከተጨማሪ ጽሑፍ ጋር የስህተት መልእክት መሆኑን ለማስተላለፍ በማንቂያው ውስጥ ጥቅም ላይ የሚውል አዶ ።.sr-only
ስህተት፡- የሚሰራ የኢሜይል አድራሻ አስገባ
<div class= "alert alert-danger" role= "alert" >
<span class= "glyphicon glyphicon-exclamation-sign" aria-hidden= "true" ></span>
<span class= "sr-only" > Error:</span>
Enter a valid email address
</div>
የሚቀያየር፣ የአገናኞች ዝርዝሮችን ለማሳየት አውድ ምናሌ። ከተቆልቋዩ ጃቫ ስክሪፕት ተሰኪ ጋር በይነተገናኝ ተደርጓል ።
ለምሳሌ
የተቆልቋይ ቀስቅሴውን እና ተቆልቋይ ሜኑን በ ውስጥ .dropdown
፣ ወይም ሌላ የሚያውጅውን አካል ጠቅልል position: relative;
። ከዚያ የምናሌውን HTML ያክሉ።
<div class= "dropdown" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "dropdownMenu1" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "true" >
Dropdown
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu1" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
.dropup
ተቆልቋይ ምናሌዎች ወደ ወላጅ በማከል ወደ ላይ (ከታች ወደ ታች) ለመስፋፋት ሊለወጡ ይችላሉ ።
<div class= "dropup" >
<button class= "btn btn-default dropdown-toggle" type= "button" id= "dropdownMenu2" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropup
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu2" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
አሰላለፍ
በነባሪ፣ ተቆልቋይ ሜኑ በቀጥታ 100% ከላይ እና በወላጁ በግራ በኩል ይቀመጣል። የተቆልቋይ ምናሌውን .dropdown-menu-right
ወደ .dropdown-menu
ቀኝ አሰላለፍ።
ተጨማሪ አቀማመጥ ሊፈልግ ይችላል
ተቆልቋይዎች በሰነዱ መደበኛ ፍሰት ውስጥ በራስ-ሰር በ CSS በኩል ይቀመጣሉ። ይህ ማለት ተቆልቋይ አንዳንድ overflow
ንብረቶች ባላቸው ወላጆች ሊቆረጡ ወይም ከእይታ እይታ ወሰን ውጭ ሊመስሉ ይችላሉ። እነዚህን ችግሮች በሚነሱበት ጊዜ በራስዎ ይፍቱ።
የተቋረጠ .pull-right
አሰላለፍ
ከ v3.1.0 ጀምሮ፣ .pull-right
በተቆልቋይ ምናሌዎች ላይ አቋርጠናል። አንድ ምናሌን ወደ ቀኝ ለማስተካከል፣ ተጠቀም .dropdown-menu-right
። በቀኝ የተሰለፉ የናቭ ክፍሎች በናvbar ውስጥ ያሉ የናቭ ክፍሎች ምናሌውን በራስ-ሰር ለማስተካከል የዚህን ክፍል ድብልቅ ስሪት ይጠቀማሉ። እሱን ለመሻር ይጠቀሙ .dropdown-menu-left
።
<ul class= "dropdown-menu dropdown-menu-right" aria-labelledby= "dLabel" >
...
</ul>
በማንኛውም ተቆልቋይ ሜኑ ውስጥ ያሉትን የእርምጃዎች ክፍሎች ለመሰየም ርዕስ ያክሉ።
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu3" >
...
<li class= "dropdown-header" > Dropdown header</li>
...
</ul>
አከፋፋይ
በተቆልቋይ ምናሌ ውስጥ ተከታታይ አገናኞችን ለመለየት አካፋይ ያክሉ።
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenuDivider" >
...
<li role= "separator" class= "divider" ></li>
...
</ul>
የተሰናከሉ የምናሌ ንጥሎች
አገናኙን ለማሰናከል በተቆልቋዩ ውስጥ .disabled
ያክሉ ።<li>
<ul class= "dropdown-menu" aria-labelledby= "dropdownMenu4" >
<li><a href= "#" > Regular link</a></li>
<li class= "disabled" ><a href= "#" > Disabled link</a></li>
<li><a href= "#" > Another link</a></li>
</ul>
ተከታታይ አዝራሮችን በአንድ መስመር በአንድ መስመር ከአዝራር ቡድን ጋር ይሰብስቡ። በአማራጭ የጃቫ ስክሪፕት ሬዲዮ እና የአመልካች ሳጥን ዘይቤ ባህሪን በአዝራሮቻችን ፕለጊን ያክሉ ።
ትክክለኛውን ያረጋግጡ role
እና መለያ ያቅርቡ
ረዳት ቴክኖሎጂዎች - እንደ ማያ አንባቢዎች - ተከታታይ አዝራሮች በቡድን መከፋፈላቸውን ለማስተላለፍ, ተገቢ role
ባህሪን መስጠት ያስፈልጋል. ለአዝራር ቡድኖች፣ ይህ ይሆናል role="group"
፣ የመሳሪያ አሞሌዎች ግን ሊኖራቸው ይገባል role="toolbar"
።
አንድ ለየት ያለ ሁኔታ አንድ ነጠላ ቁጥጥር ብቻ (ለምሳሌ የጸደቁ የአዝራር ቡድኖች ከኤለመንቶች ጋር <button>
) ወይም ተቆልቋይ የያዙ ቡድኖች ናቸው።
role
በተጨማሪም, ቡድኖች እና የመሳሪያ አሞሌዎች ትክክለኛ መለያዎች ቢኖሩም, አብዛኛዎቹ አጋዥ ቴክኖሎጂዎች ስለማያውቁ ግልጽ መለያ ሊሰጣቸው ይገባል . እዚህ በቀረቡት ምሳሌዎች ውስጥ, እንጠቀማለን aria-label
, ነገር ግን እንደ አማራጮች aria-labelledby
እንዲሁ ጥቅም ላይ ሊውሉ ይችላሉ.
መሰረታዊ ምሳሌ
በ ውስጥ ተከታታይ አዝራሮችን .btn
ጠቅልል .btn-group
።
<div class= "btn-group" role= "group" aria-label= "..." >
<button type= "button" class= "btn btn-default" > Left</button>
<button type= "button" class= "btn btn-default" > Middle</button>
<button type= "button" class= "btn btn-default" > Right</button>
</div>
ለተጨማሪ ውስብስብ አካላት <div class="btn-group">
ስብስቦችን ያዋህዱ ።<div class="btn-toolbar">
<div class= "btn-toolbar" role= "toolbar" aria-label= "..." >
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
</div>
መጠናቸው
በቡድን ውስጥ ላለው እያንዳንዱ ቁልፍ የአዝራር መጠን ክፍሎችን ከመተግበር ይልቅ ብዙ ቡድኖችን ሲያስገቡ ጨምሮ .btn-group-*
ወደ እያንዳንዱ ያክሉ።.btn-group
ግራ
መካከለኛ
ቀኝ
ግራ
መካከለኛ
ቀኝ
ግራ
መካከለኛ
ቀኝ
ግራ
መካከለኛ
ቀኝ
<div class= "btn-group btn-group-lg" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-sm" role= "group" aria-label= "..." > ...</div>
<div class= "btn-group btn-group-xs" role= "group" aria-label= "..." > ...</div>
መክተቻ
የተቆልቋይ ምናሌዎች ከተከታታይ አዝራሮች ጋር ሲደባለቁ .btn-group
በሌላ ውስጥ ያስቀምጡ ።.btn-group
<div class= "btn-group" role= "group" aria-label= "..." >
<button type= "button" class= "btn btn-default" > 1</button>
<button type= "button" class= "btn btn-default" > 2</button>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Dropdown
<span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Dropdown link</a></li>
<li><a href= "#" > Dropdown link</a></li>
</ul>
</div>
</div>
አቀባዊ ልዩነት
የአዝራሮች ስብስብ በአግድም ሳይሆን በአቀባዊ የተደረደሩ እንዲታዩ ያድርጉ። የተከፈለ አዝራር ተቆልቋይ እዚህ አይደገፍም።
አዝራር
አዝራር
ዝቅ በል
አዝራር
አዝራር
ዝቅ በል
ዝቅ በል
ዝቅ በል
<div class= "btn-group-vertical" role= "group" aria-label= "..." >
...
</div>
የተረጋገጠ የአዝራር ቡድኖች
የወላጁን አጠቃላይ ስፋት ለመዘርጋት የአዝራሮች ቡድን በእኩል መጠን እንዲዘረጋ ያድርጉ። በአዝራር ቡድን ውስጥ በተቆልቋይ ቁልፎችም ይሰራል።
ድንበሮችን አያያዝ
አዝራሮችን ለማጽደቅ ጥቅም ላይ በሚውሉት ልዩ HTML እና CSS ምክንያት (ማለትም display: table-cell
) በመካከላቸው ያሉት ድንበሮች በእጥፍ ይጨምራሉ። በመደበኛ የአዝራር ቡድኖች, margin-left: -1px
ድንበሮችን ከማስወገድ ይልቅ ለመደርደር ጥቅም ላይ ይውላል. ሆኖም ፣ margin
ከ ጋር አይሰራም display: table-cell
። በውጤቱም፣ ለBootstrap ባደረጉት ማበጀት ላይ በመመስረት፣ ድንበሮችን ማስወገድ ወይም እንደገና መቀባት ሊፈልጉ ይችላሉ።
IE8 እና ድንበሮች
ኢንተርኔት ኤክስፕሎረር 8 በተረጋገጠ የአዝራር ቡድን ውስጥ ባሉ አዝራሮች ላይ ድንበሮችን አያደርግም ፣ ላይም <a>
ሆነ <button>
አካላት። ይህንን ለማድረግ እያንዳንዱን ቁልፍ በሌላ ጠቅ ያድርጉ .btn-group
።
ለበለጠ መረጃ #12476 ይመልከቱ።
ከንጥረ <a>
ነገሮች ጋር
ተከታታይ .btn
ዎች ውስጥ ብቻ ጠቅልለው .btn-group.btn-group-justified
።
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
...
</div>
እንደ አዝራሮች የሚሰሩ አገናኞች
ንጥረ ነገሮቹ እንደ አዝራሮች ለመስራት ጥቅም ላይ የሚውሉ ከሆነ <a>
- የውስጠ-ገጽ ተግባርን የሚቀሰቅስ, አሁን ባለው ገጽ ውስጥ ወዳለ ሌላ ሰነድ ወይም ክፍል ከመሄድ ይልቅ - እንዲሁም ተገቢነት ሊሰጣቸው ይገባል role="button"
.
<button>
የጸደቁ የአዝራር ቡድኖችን ከኤለመንቶች ጋር ለመጠቀም እያንዳንዱን አዝራር በአንድ አዝራር ቡድን ውስጥ መጠቅለል አለብዎት ። አብዛኛዎቹ አሳሾች የእኛን CSS ለኤለመንቶች ማረጋገጫ በትክክል አይተገበሩም <button>
ነገር ግን የአዝራር ተቆልቋይዎችን ስለምንደግፍ በዚያ ዙሪያ መስራት እንችላለን።
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Left</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Middle</button>
</div>
<div class= "btn-group" role= "group" >
<button type= "button" class= "btn btn-default" > Right</button>
</div>
</div>
የተቆልቋይ ምናሌን በ ውስጥ በማስቀመጥ .btn-group
እና ተገቢውን የሜኑ ማርክ በማቅረብ ለማስነሳት ማንኛውንም ቁልፍ ይጠቀሙ።
የተሰኪ ጥገኝነት
የአዝራር ተቆልቋይ ተቆልቋይ ተሰኪው በእርስዎ የBootstrap ስሪት ውስጥ እንዲካተት ይፈልጋሉ።
ነጠላ አዝራር ተቆልቋይ
ከአንዳንድ መሰረታዊ የማርክ ለውጦች ጋር አንድ ቁልፍን ወደ ተቆልቋይ መቀያየር ይለውጡ።
ነባሪ
ዋና
ስኬት
መረጃ
ማስጠንቀቂያ
አደጋ
<!-- Single button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Action <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
የተከፈለ ቁልፍ ተቆልቋይ
በተመሳሳይ፣ የተከፈለ አዝራር ተቆልቋይዎችን ከተመሳሳይ የማርክ ለውጦች ጋር ይፍጠሩ፣ በተለየ አዝራር ብቻ።
ነባሪ
መውረድን ቀያይር
ዋና
መውረድን ቀያይር
ስኬት
መውረድን ቀያይር
መረጃ
መውረድን ቀያይር
ማስጠንቀቂያ
መውረድን ቀያይር
አደጋ
መውረድን ቀያይር
<!-- Split button -->
<div class= "btn-group" >
<button type= "button" class= "btn btn-danger" > Action</button>
<button type= "button" class= "btn btn-danger dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "caret" ></span>
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div>
መጠናቸው
የአዝራር ተቆልቋይዎች በሁሉም መጠኖች አዝራሮች ይሰራሉ.
<!-- Large button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-lg dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Large button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
<!-- Small button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-sm dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Small button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
<!-- Extra small button group -->
<div class= "btn-group" >
<button class= "btn btn-default btn-xs dropdown-toggle" type= "button" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
Extra small button <span class= "caret" ></span>
</button>
<ul class= "dropdown-menu" >
...
</ul>
</div>
የመጣል ልዩነት
.dropup
ወደ ወላጅ በማከል ከንጥረ ነገሮች በላይ ተቆልቋይ ምናሌዎችን ያስነሱ ።
<div class= "btn-group dropup" >
<button type= "button" class= "btn btn-default" > Dropup</button>
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" >
<span class= "caret" ></span>
<span class= "sr-only" > Toggle Dropdown</span>
</button>
<ul class= "dropdown-menu" >
<!-- Dropdown menu links -->
</ul>
</div>
ከማንኛውም ጽሑፍ ላይ የተመሠረተ ጽሑፍን ወይም አዝራሮችን በፊት፣ በኋላ ወይም በሁለቱም በኩል በማከል የቅጽ መቆጣጠሪያዎችን ያራዝሙ <input>
። በነጠላ ወይም በነጠላ ላይ ክፍሎችን ለማዘጋጀት ወይም ለማያያዝ ይጠቀሙ .input-group
።.input-group-addon
.input-group-btn
.form-control
ጽሑፍ <input>
ብቻ
<select>
በWebKit አሳሾች ውስጥ ሙሉ ለሙሉ ሊዘጋጁ ስለማይችሉ ኤለመንቶችን ከመጠቀም ይቆጠቡ ።
በአንዳንድ ሁኔታዎች <textarea>
ባህሪያቸው ስለማይከበር ኤለመንቶችን ከመጠቀም ይቆጠቡ ።rows
በግቤት ቡድኖች ውስጥ ያሉ የመሳሪያ ምክሮች እና ብቅ-ባዮች ልዩ መቼት ያስፈልጋቸዋል
በ ውስጥ ባሉ ንጥረ ነገሮች ላይ የመሳሪያ ምክሮችን ወይም ብቅ-ባዮችን ሲጠቀሙ ያልተፈለጉ የጎንዮሽ ጉዳቶችን ለማስወገድ .input-group
አማራጩን መግለጽ አለብዎት container: 'body'
(እንደ ኤለመንቱ እየሰፋ እያደገ እና/ወይም የመሳሪያው ጫፍ ወይም ብቅ-ባይ ሲቀሰቀስ) የተጠጋጋ ማዕዘኖቹን ማጣት)።
በግቤት በሁለቱም በኩል አንድ ተጨማሪ ወይም አዝራር ያስቀምጡ። እንዲሁም አንዱን በግቤት በሁለቱም በኩል ማስቀመጥ ይችላሉ።
በአንድ በኩል ብዙ ተጨማሪዎችን ( .input-group-addon
ወይም ) አንደግፍም ።.input-group-btn
በአንድ የግቤት ቡድን ውስጥ ብዙ የቅጽ መቆጣጠሪያዎችን አንደግፍም።
<div class= "input-group" >
<span class= "input-group-addon" id= "basic-addon1" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "basic-addon1" >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Recipient's username" aria-describedby= "basic-addon2" >
<span class= "input-group-addon" id= "basic-addon2" > @example.com</span>
</div>
<div class= "input-group" >
<span class= "input-group-addon" > $</span>
<input type= "text" class= "form-control" aria-label= "Amount (to the nearest dollar)" >
<span class= "input-group-addon" > .00</span>
</div>
<label for= "basic-url" > Your vanity URL</label>
<div class= "input-group" >
<span class= "input-group-addon" id= "basic-addon3" > https://example.com/users/</span>
<input type= "text" class= "form-control" id= "basic-url" aria-describedby= "basic-addon3" >
</div>
አንጻራዊውን የቅጽ መጠን ክፍሎችን ወደ .input-group
ራሱ ያክሉ እና በውስጡ ያሉት ይዘቶች በራስ-ሰር ይቀየራሉ—በእያንዳንዱ ኤለመንት ላይ የቅጽ መቆጣጠሪያ መጠን ክፍሎችን መደጋገም አያስፈልግም።
<div class= "input-group input-group-lg" >
<span class= "input-group-addon" id= "sizing-addon1" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon1" >
</div>
<div class= "input-group" >
<span class= "input-group-addon" id= "sizing-addon2" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon2" >
</div>
<div class= "input-group input-group-sm" >
<span class= "input-group-addon" id= "sizing-addon3" > @</span>
<input type= "text" class= "form-control" placeholder= "Username" aria-describedby= "sizing-addon3" >
</div>
ማንኛውንም አመልካች ሳጥን ወይም የሬዲዮ አማራጭ ከጽሑፍ ይልቅ በግቤት ቡድን አዶ ውስጥ ያስቀምጡ።
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-addon" >
<input type= "checkbox" aria-label= "..." >
</span>
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-addon" >
<input type= "radio" aria-label= "..." >
</span>
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
በግቤት ቡድኖች ውስጥ ያሉ አዝራሮች ትንሽ ለየት ያሉ ናቸው እና አንድ ተጨማሪ የጎጆ ደረጃ ያስፈልጋቸዋል። በምትኩ ፣ አዝራሮቹን ለመጠቅለል .input-group-addon
መጠቀም ያስፈልግዎታል ። .input-group-btn
ይህ የሚፈለገው ሊሻሩ በማይችሉ ነባሪ የአሳሽ ቅጦች ምክንያት ነው።
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<span class= "input-group-btn" >
<button class= "btn btn-default" type= "button" > Go!</button>
</span>
<input type= "text" class= "form-control" placeholder= "Search for..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<input type= "text" class= "form-control" placeholder= "Search for..." >
<span class= "input-group-btn" >
<button class= "btn btn-default" type= "button" > Go!</button>
</span>
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
<div class= "row" >
<div class= "col-lg-6" >
<div class= "input-group" >
<div class= "input-group-btn" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Action <span class= "caret" ></span></button>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div> <!-- /btn-group -->
<input type= "text" class= "form-control" aria-label= "..." >
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
<div class= "col-lg-6" >
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<button type= "button" class= "btn btn-default dropdown-toggle" data-toggle= "dropdown" aria-haspopup= "true" aria-expanded= "false" > Action <span class= "caret" ></span></button>
<ul class= "dropdown-menu dropdown-menu-right" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /input-group -->
</div> <!-- /.col-lg-6 -->
</div> <!-- /.row -->
<div class= "input-group" >
<div class= "input-group-btn" >
<!-- Button and dropdown menu -->
</div>
<input type= "text" class= "form-control" aria-label= "..." >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<!-- Button and dropdown menu -->
</div>
</div>
በእያንዳንዱ ጎን አንድ ተጨማሪ ብቻ ሊኖርዎት ሲችል በአንድ ነጠላ ውስጥ ብዙ አዝራሮች ሊኖሩዎት ይችላሉ .input-group-btn
።
<div class= "input-group" >
<div class= "input-group-btn" >
<!-- Buttons -->
</div>
<input type= "text" class= "form-control" aria-label= "..." >
</div>
<div class= "input-group" >
<input type= "text" class= "form-control" aria-label= "..." >
<div class= "input-group-btn" >
<!-- Buttons -->
</div>
</div>
በ Bootstrap ውስጥ የሚገኙት የባህር ኃይል መርከቦች ከመሠረታዊ .nav
ክፍል ጀምሮ እና እንዲሁም የተጋሩ ግዛቶች የጋራ ምልክት አላቸው። በእያንዳንዱ ዘይቤ መካከል ለመቀያየር የመቀየሪያ ክፍሎችን ይቀያይሩ።
የመርከብ መርከቦችን እንደ አሰሳ ተደራሽ ያድርጉ
የአሰሳ አሞሌን ለማቅረብ ናቭስ እየተጠቀሙ ከሆነ role="navigation"
በጣም ምክንያታዊ በሆነው የወላጅ መያዣ ላይ መጨመርዎን ያረጋግጡ <ul>
ወይም <nav>
በአጠቃላይ አሰሳ ዙሪያ አንድ ኤለመንት ይጠቅልሉ። <ul>
በረዳት ቴክኖሎጂዎች እንደ ትክክለኛ ዝርዝር እንዳይታወቅ ስለሚከለክለው ሚናውን በራሱ ላይ አይጨምሩ።
ትሮች
.nav-tabs
ክፍሉ .nav
መሰረታዊ ክፍልን እንደሚፈልግ ልብ ይበሉ .
<ul class= "nav nav-tabs" >
<li role= "presentation" class= "active" ><a href= "#" > Home</a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages</a></li>
</ul>
እንክብሎች
ያንኑ ኤችቲኤምኤል ይውሰዱ፣ ግን .nav-pills
በምትኩ ይጠቀሙ፡-
<ul class= "nav nav-pills" >
<li role= "presentation" class= "active" ><a href= "#" > Home</a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages</a></li>
</ul>
እንክብሎች እንዲሁ በአቀባዊ ሊደረደሩ የሚችሉ ናቸው። ጨምር ብቻ .nav-stacked
።
<ul class= "nav nav-pills nav-stacked" >
...
</ul>
የተረጋገጠ
ከ 768 ፒክስል ሰፋ ባሉ ስክሪኖች ላይ በቀላሉ ትሮችን ወይም እንክብሎችን የወላጆቻቸውን እኩል ስፋት ይስሩ .nav-justified
። በትናንሽ ስክሪኖች ላይ፣ የባህር ኃይል ማገናኛዎች ተቆልለዋል።
ትክክለኛ የናቭባር ናቭ ማገናኛዎች በአሁኑ ጊዜ አይደገፉም።
ሳፋሪ እና ምላሽ ሰጪ የተረጋገጠ የባህር ኃይል መርከቦች
ከ v9.1.2 ጀምሮ፣ ሳፋሪ አሳሽዎን በአግድም መቀየር በሚያድስበት ጊዜ በጸዱ የባህር ኃይል ውስጥ ስህተቶችን የሚፈጥርበት ስህተት ያሳያል። ይህ ስህተት በተረጋገጠው የናቭ ምሳሌ ላይም ይታያል ።
<ul class= "nav nav-tabs nav-justified" >
...
</ul>
<ul class= "nav nav-pills nav-justified" >
...
</ul>
የተሰናከሉ ማገናኛዎች
ለማንኛውም የናቭ አካል (ትሮች ወይም ክኒኖች)፣ ለግራጫ ማያያዣዎች ያክሉ .disabled
እና ምንም የማንዣበብ ውጤቶች የሉም ።
የአገናኝ ተግባር አልተጎዳም።
ይህ ክፍል የ <a>
‹መልክ› ብቻ ነው የሚቀይረው እንጂ ተግባራዊነቱን አይደለም። አገናኞችን ለማሰናከል ብጁ ጃቫስክሪፕት ይጠቀሙ።
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "disabled" ><a href= "#" > Disabled link</a></li>
...
</ul>
ተቆልቋይዎችን በመጠቀም
ተቆልቋይ ሜኑዎችን ከትንሽ ተጨማሪ ኤችቲኤምኤል እና ተቆልቋዮቹ ጃቫስክሪፕት ፕለጊን ያክሉ ።
ተቆልቋይ ያላቸው ትሮች
<ul class= "nav nav-tabs" >
...
<li role= "presentation" class= "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false" >
Dropdown <span class= "caret" ></span>
</a>
<ul class= "dropdown-menu" >
...
</ul>
</li>
...
</ul>
ተቆልቋይ ያላቸው እንክብሎች
<ul class= "nav nav-pills" >
...
<li role= "presentation" class= "dropdown" >
<a class= "dropdown-toggle" data-toggle= "dropdown" href= "#" role= "button" aria-haspopup= "true" aria-expanded= "false" >
Dropdown <span class= "caret" ></span>
</a>
<ul class= "dropdown-menu" >
...
</ul>
</li>
...
</ul>
ነባሪ የናቭባር
Navbars ለመተግበሪያዎ ወይም ለጣቢያዎ እንደ ዳሰሳ ራስጌ የሚያገለግሉ የሜታ ክፍሎች ናቸው። በሞባይል እይታዎች መውደቅ ይጀምራሉ (እና ሊለዋወጡ የሚችሉ ናቸው) እና ያለው የመመልከቻ ስፋት ሲጨምር አግድም ይሆናሉ።
ትክክለኛ የናቭባር ናቭ ማገናኛዎች በአሁኑ ጊዜ አይደገፉም።
የተትረፈረፈ ይዘት
ቡትስትራፕ በእርስዎ ናቭባር ውስጥ ያለው ይዘት ምን ያህል ቦታ እንደሚያስፈልገው ስለማያውቅ፣ ይዘቱ ወደ ሁለተኛ ረድፍ መጠቅለል ላይ ችግሮች ሊያጋጥሙዎት ይችላሉ። ይህንን ለመፍታት የሚከተሉትን ማድረግ ይችላሉ:
የናቭባር ንጥሎችን መጠን ወይም ስፋት ይቀንሱ።
ምላሽ ሰጪ የመገልገያ ክፍሎችን በመጠቀም የተወሰኑ የናቭባር ንጥሎችን በተወሰኑ ስክሪን መጠኖች ደብቅ ።
የናቭባርዎ በተሰበሰበ እና አግድም ሁነታ መካከል የሚቀያየርበትን ነጥብ ይቀይሩ። ተለዋዋጭውን ያብጁ @grid-float-breakpoint
ወይም የራስዎን የሚዲያ ጥያቄ ያክሉ።
JavaScript ፕለጊን ያስፈልገዋል
ጃቫ ስክሪፕት ከተሰናከለ እና የመመልከቻ ቦታው ጠባብ ከሆነ ናቭባር ከተሰበሰበ ናቭባርን ማስፋት እና በውስጡ ያለውን ይዘት ማየት አይቻልም።.navbar-collapse
።
ምላሽ ሰጪው navbar የስብስብ ተሰኪው በእርስዎ የBootstrap ስሪት ውስጥ እንዲካተት ይፈልጋል።
የተሰበሰበውን የሞባይል ናቭባር መግቻ ነጥብ በመቀየር ላይ
የመመልከቻ ቦታው ከ ጠባብ በሆነበት ጊዜ ናቭባር ወደ ቁመታዊ የሞባይል እይታው ይወድቃል @grid-float-breakpoint
እና መመልከቻው ቢያንስ @grid-float-breakpoint
ወርድ ሲሆን ወደ አግድም የሞባይል ያልሆነ እይታ ይሰፋል። ናቭባር ሲፈርስ/ሲሰፋ ለመቆጣጠር ይህንን ተለዋዋጭ በትንሽ ምንጭ ውስጥ ያስተካክሉት። ነባሪ እሴቱ 768px
(ትንሹ "ትንሽ" ወይም "ታብሌት" ማያ ገጽ) ነው።
Navbars ተደራሽ ያድርጉ
<nav>
ኤለመንት መጠቀሙን ያረጋግጡ ወይም እንደ ሀ ያለ የበለጠ አጠቃላይ አካል ከተጠቀሙ ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች እንደ ምልክት ክልል በግልፅ ለመለየት በእያንዳንዱ ናቭባር ላይ <div>
ይጨምሩ ።role="navigation"
<nav class= "navbar navbar-default" >
<div class= "container-fluid" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class= "navbar-header" >
<button type= "button" class= "navbar-toggle collapsed" data-toggle= "collapse" data-target= "#bs-example-navbar-collapse-1" aria-expanded= "false" >
<span class= "sr-only" > Toggle navigation</span>
<span class= "icon-bar" ></span>
<span class= "icon-bar" ></span>
<span class= "icon-bar" ></span>
</button>
<a class= "navbar-brand" href= "#" > Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class= "collapse navbar-collapse" id= "bs-example-navbar-collapse-1" >
<ul class= "nav navbar-nav" >
<li class= "active" ><a href= "#" > Link <span class= "sr-only" > (current)</span></a></li>
<li><a href= "#" > Link</a></li>
<li class= "dropdown" >
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown <span class= "caret" ></span></a>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > One more separated link</a></li>
</ul>
</li>
</ul>
<form class= "navbar-form navbar-left" >
<div class= "form-group" >
<input type= "text" class= "form-control" placeholder= "Search" >
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
<ul class= "nav navbar-nav navbar-right" >
<li><a href= "#" > Link</a></li>
<li class= "dropdown" >
<a href= "#" class= "dropdown-toggle" data-toggle= "dropdown" role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown <span class= "caret" ></span></a>
<ul class= "dropdown-menu" >
<li><a href= "#" > Action</a></li>
<li><a href= "#" > Another action</a></li>
<li><a href= "#" > Something else here</a></li>
<li role= "separator" class= "divider" ></li>
<li><a href= "#" > Separated link</a></li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
የምርት ስም ምስል
ጽሁፉን ወደ አንድ በመቀየር የናቭባርን ስም በራስዎ ምስል ይተኩ <img>
። .navbar-brand
የራሱ የሆነ ንጣፍ እና ቁመት ስላለው በምስልዎ ላይ በመመስረት የተወሰነ CSS መሻር ሊኖርብዎ ይችላል ።
<nav class= "navbar navbar-default" >
<div class= "container-fluid" >
<div class= "navbar-header" >
<a class= "navbar-brand" href= "#" >
<img alt= "Brand" src= "..." >
</a>
</div>
</div>
</nav>
የቅጹን ይዘት .navbar-form
ለትክክለኛው አቀባዊ አሰላለፍ እና ለተሰበሰበ ባህሪ በጠባብ የእይታ ወደቦች ውስጥ ያስቀምጡ። በናቭባር ይዘት ውስጥ የት እንደሚኖር ለመወሰን የአሰላለፍ አማራጮችን ይጠቀሙ።
እንደ .navbar-form
መጀመሪያው ጊዜ፣ ብዙ ኮዱን .form-inline
በ mixin በኩል ያጋራል። እንደ የግቤት ቡድኖች ያሉ አንዳንድ የቅጽ መቆጣጠሪያዎች ቋሚ ስፋቶችን በናቭባር ውስጥ በትክክል እንዲታዩ ሊፈልጉ ይችላሉ።
<form class= "navbar-form navbar-left" role= "search" >
<div class= "form-group" >
<input type= "text" class= "form-control" placeholder= "Search" >
</div>
<button type= "submit" class= "btn btn-default" > Submit</button>
</form>
የሞባይል መሳሪያ ማስጠንቀቂያዎች
በተንቀሳቃሽ መሣሪያዎች ላይ ባሉ ቋሚ አካላት ውስጥ የቅጽ መቆጣጠሪያዎችን ስለመጠቀም አንዳንድ ማስጠንቀቂያዎች አሉ። ለዝርዝሮች የእኛን የአሳሽ ድጋፍ ሰነዶች ይመልከቱ።
.navbar-btn
ክፍሉን በ navbar ውስጥ በአቀባዊ ወደ መሃል ለማኖር በ <button>
ውስጥ የማይኖሩ አካላት ላይ ይጨምሩ ።<form>
<button type= "button" class= "btn btn-default navbar-btn" > Sign in</button>
አውድ-ተኮር አጠቃቀም
ልክ እንደ መደበኛው የአዝራር ክፍሎች , በ ላይ እና ኤለመንቶችን .navbar-btn
መጠቀም ይቻላል . ሆኖም፣ መደበኛው የአዝራር ክፍሎች��� ሆኑ በ ውስጥ ባሉ ንጥረ ነገሮች ላይ ጥቅም ላይ መዋል የለባቸውም ።<a>
<input>
.navbar-btn
<a>
.navbar-nav
ጽሑፍ
የጽሑፍ ሕብረቁምፊዎችን ከ ጋር በአንድ አካል ጠቅልሉ .navbar-text
፣ ብዙውን ጊዜ <p>
ለትክክለኛ አመራር እና ቀለም መለያ ላይ።
<p class= "navbar-text" > Signed in as Mark Otto</p>
ናቭ ያልሆኑ አገናኞች
በመደበኛው የናቭባር ዳሰሳ ክፍል ውስጥ የሌሉ መደበኛ አገናኞችን ለሚጠቀሙ ሰዎች .navbar-link
፣ ለነባሪ እና ተገላቢጦሽ የናቭባር አማራጮች ተገቢውን ቀለሞች ለመጨመር ክፍሉን ይጠቀሙ።
<p class= "navbar-text navbar-right" > Signed in as <a href= "#" class= "navbar-link" > Mark Otto</a></p>
የአካል ክፍሎች አሰላለፍ
.navbar-left
የፍጆታ ክፍሎችን ወይም .navbar-right
የፍጆታ ክፍሎችን በመጠቀም ማገናኛዎችን፣ ቅጾችን፣ አዝራሮችን ወይም ጽሁፍን አሰልፍ ። ሁለቱም ክፍሎች በተጠቀሰው አቅጣጫ የሲኤስኤስ ተንሳፋፊ ይጨምራሉ። ለምሳሌ፣ የናቭ አገናኞችን ለማስተካከል፣ ከተተገበረው <ul>
የመገልገያ ክፍል ጋር በተለየ ያስቀምጧቸው።
እነዚህ ክፍሎች የተዋሃዱ .pull-left
እና የተቀላቀሉ ስሪቶች ናቸው .pull-right
፣ ነገር ግን በመሣሪያ መጠኖች ውስጥ የናቭባር ክፍሎችን በቀላሉ ለማስተናገድ የሚዲያ ጥያቄዎችን ያካተቱ ናቸው።
ብዙ ክፍሎችን በትክክል ማመጣጠን
Navbars በአሁኑ ጊዜ ከበርካታ .navbar-right
ክፍሎች ጋር ገደብ አላቸው። ይዘትን በትክክል ለማስቀመጥ በመጨረሻው .navbar-right
አካል ላይ አሉታዊ ህዳግ እንጠቀማለን። ያንን ክፍል የሚጠቀሙ ብዙ አካላት ሲኖሩ እነዚህ ህዳጎች እንደታሰበው አይሰሩም።
ያንን አካል በ v4 ውስጥ እንደገና መፃፍ ስንችል ይህንን እንደገና እንጎበኘዋለን።
ወደላይ ተስተካክሏል
አክል .navbar-fixed-top
እና ወደ መሃል እና ወደ ፓድ navbar ይዘት .container
ያካትቱ ።.container-fluid
<nav class= "navbar navbar-default navbar-fixed-top" >
<div class= "container" >
...
</div>
</nav>
የሰውነት መቆንጠጥ ያስፈልጋል
padding
ወደ ላይኛው ክፍል ካልጨመሩ በስተቀር ቋሚው የዳሰሳ አሞሌ ሌላ ይዘትዎን ይሸፍነዋል <body>
። የእራስዎን እሴቶች ይሞክሩ ወይም የእኛን ቅንጭብ ከታች ይጠቀሙ። ጠቃሚ ምክር፡ በነባሪ የ navbar 50px ከፍተኛ ነው።
body { padding-top : 70px ; }
ይህንን ከዋና ቡትስትራፕ CSS በኋላ ማካተትዎን ያረጋግጡ ።
ወደ ታች ተስተካክሏል
አክል .navbar-fixed-bottom
እና ወደ መሃል እና ወደ ፓድ navbar ይዘት .container
ያካትቱ ።.container-fluid
<nav class= "navbar navbar-default navbar-fixed-bottom" >
<div class= "container" >
...
</div>
</nav>
የሰውነት መቆንጠጥ ያስፈልጋል
padding
ወደ ታችኛው ክፍል ካልጨመሩ በስተቀር ቋሚው የዳሰሳ አሞሌ ሌላ ይዘትዎን ይሸፍነዋል <body>
። የእራስዎን እሴቶች ይሞክሩ ወይም የእኛን ቅንጭብ ከታች ይጠቀሙ። ጠቃሚ ምክር፡ በነባሪ የ navbar 50px ከፍተኛ ነው።
body { padding-bottom : 70px ; }
ይህንን ከዋና ቡትስትራፕ CSS በኋላ ማካተትዎን ያረጋግጡ ።
የማይንቀሳቀስ ከላይ
አንድ ወይም ወደ መሃል እና የንድፍ ዳሳሽ ይዘት በማከል .navbar-static-top
እና በማካተት ከገጹ ጋር የሚሸብልል ባለ ሙሉ ስፋት ናቭባር ይፍጠሩ።.container
.container-fluid
ከክፍሎቹ በተለየ .navbar-fixed-*
፣ በ ላይ ምንም አይነት ንጣፍ መቀየር አያስፈልግዎትም body
።
<nav class= "navbar navbar-default navbar-static-top" >
<div class= "container" >
...
</div>
</nav>
የተገለበጠ ናቭባር
በማከል የናቭባርን መልክ ያስተካክሉ .navbar-inverse
።
<nav class= "navbar navbar-inverse" >
...
</nav>
የአሁኑን ገጽ አካባቢ በአሰሳ ተዋረድ ውስጥ ያመልክቱ።
መለያዎች በራስ-ሰር በ CSS በኩል :before
እና በ ውስጥ ይታከላሉ content
።
<ol class= "breadcrumb" >
<li><a href= "#" > Home</a></li>
<li><a href= "#" > Library</a></li>
<li class= "active" > Data</li>
</ol>
ለጣቢያዎ ወይም ለመተግበሪያዎ የገጽታ ማያያዣዎችን ባለብዙ ገጽ የገጽ ክፍል ወይም ቀላሉ የፔጀር አማራጭ ያቅርቡ ።
በRdio አነሳሽነት ቀላል ፔጃኒሽን፣ ለመተግበሪያዎች እና ለፍለጋ ውጤቶች ምርጥ። ትልቁ ብሎክ ለማጣት ከባድ ነው፣ በቀላሉ ሊሰፋ የሚችል እና ትልቅ ጠቅታ ቦታዎችን ያቀርባል።
<nav aria-label= "Page navigation" >
<ul class= "pagination" >
<li>
<a href= "#" aria-label= "Previous" >
<span aria-hidden= "true" > « </span>
</a>
</li>
<li><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>
<a href= "#" aria-label= "Next" >
<span aria-hidden= "true" > » </span>
</a>
</li>
</ul>
</nav>
የተሰናከሉ እና ንቁ ግዛቶች
ማገናኛዎች ለተለያዩ ሁኔታዎች ሊበጁ የሚችሉ ናቸው። .disabled
ጠቅ ለማይችሉ አገናኞች እና .active
የአሁኑን ገጽ ለማመልከት ይጠቀሙ ።
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" ><a href= "#" aria-label= "Previous" ><span aria-hidden= "true" > « </span></a></li>
<li class= "active" ><a href= "#" > 1 <span class= "sr-only" > (current)</span></a></li>
...
</ul>
</nav>
<span>
የታቀዱ ቅጦችን በማቆየት የጠቅ ተግባርን ለማስወገድ ንቁ ወይም የተሰናከሉ መልህቆችን ለ ን እንዲቀይሩ ወይም በቀደሙት/ቀጣዮቹ ቀስቶች ላይ መልህቁን እንዲተዉት እንመክራለን ።
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" >
<span>
<span aria-hidden= "true" > « </span>
</span>
</li>
<li class= "active" >
<span> 1 <span class= "sr-only" > (current)</span></span>
</li>
...
</ul>
</nav>
መጠናቸው
ትልቅ ወይም ትንሽ ፔጃኒሽን ይፈልጋሉ? አክል .pagination-lg
ወይም .pagination-sm
ለተጨማሪ መጠኖች.
<nav aria-label= "..." ><ul class= "pagination pagination-lg" > ...</ul></nav>
<nav aria-label= "..." ><ul class= "pagination" > ...</ul></nav>
<nav aria-label= "..." ><ul class= "pagination pagination-sm" > ...</ul></nav>
ፈጣን ቀዳሚ እና ቀጣይ አገናኞች ለቀላል ፔጅ አተገባበር በብርሃን ምልክት ማድረጊያ እና ቅጦች። እንደ ብሎጎች ወይም መጽሔቶች ላሉ ቀላል ጣቢያዎች በጣም ጥሩ ነው።
ነባሪ ምሳሌ
በነባሪ, ፔጀር አገናኞችን ያገናኛል.
<nav aria-label= "..." >
<ul class= "pager" >
<li><a href= "#" > Previous</a></li>
<li><a href= "#" > Next</a></li>
</ul>
</nav>
የተጣጣሙ አገናኞች
በአማራጭ፣ እያንዳንዱን ማገናኛ ወደ ጎኖቹ ማስተካከል ይችላሉ፡-
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
አማራጭ የአካል ጉዳተኛ ሁኔታ
የፔጀር ማገናኛዎች ከገጽ ወረቀቱ የአጠቃላይ .disabled
መገልገያ ክፍልንም ይጠቀማሉ።
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
ለምሳሌ
ምሳሌ ርዕስ አዲስ
ምሳሌ ርዕስ አዲስ
ምሳሌ ርዕስ አዲስ
ምሳሌ ርዕስ አዲስ
ምሳሌ ርዕስ አዲስ
ምሳሌ ርዕስ አዲስ
<h3> Example heading <span class= "label label-default" > New</span></h3>
የሚገኙ ልዩነቶች
የመለያውን ገጽታ ለመለወጥ ከዚህ በታች ከተጠቀሱት ማናቸውንም ማሻሻያ ክፍሎችን ያክሉ።
ነባሪ
የመጀመሪያ ደረጃ
ስኬት
መረጃ
የማስጠንቀቂያ
አደጋ
<span class= "label label-default" > Default</span>
<span class= "label label-primary" > Primary</span>
<span class= "label label-success" > Success</span>
<span class= "label label-info" > Info</span>
<span class= "label label-warning" > Warning</span>
<span class= "label label-danger" > Danger</span>
ብዙ መለያዎች አለዎት?
በጠባብ መያዣ ውስጥ በደርዘን የሚቆጠሩ የውስጠ-መስመር መለያዎች ሲኖርዎት፣ እያንዳንዱ የራሱ inline-block
አካል (እንደ አዶ) ሲይዝ የማቅረብ ችግሮች ሊፈጠሩ ይችላሉ። በዚህ ዙሪያ ያለው መንገድ ቅንብር ነው display: inline-block;
. ለአውድ እና ለምሳሌ #13219 ይመልከቱ ።
<span class="badge">
አዲስ ወይም ያልተነበቡ ንጥሎችን ወደ አገናኞች፣ ቡትስትራፕ ናቭስ እና ሌሎችንም በማከል በቀላሉ ያድምቁ።
<a href= "#" > Inbox <span class= "badge" > 42</span></a>
<button class= "btn btn-primary" type= "button" >
Messages <span class= "badge" > 4</span>
</button>
ራስን መሰባበር
ምንም አዲስ ወይም ያልተነበቡ ንጥሎች ከሌሉ ባጆች በቀላሉ ይወድቃሉ (በ CSS :empty
መራጭ በኩል) ምንም ይዘት ከሌለ በስተቀር።
የአሳሽ ተሻጋሪ ተኳኋኝነት
በInternet Explorer 8 ውስጥ ባጅ በራሱ አይፈርስም ምክንያቱም ለመምረጡ ድጋፍ ስለሌለው :empty
።
ከንቁ የባህር ኃይል ግዛቶች ጋር ይስማማል።
በክኒን ዳሰሳ ውስጥ ባጆችን በገባሪ ግዛቶች ለማስቀመጥ አብሮ የተሰሩ ቅጦች ተካትተዋል።
<ul class= "nav nav-pills" role= "tablist" >
<li role= "presentation" class= "active" ><a href= "#" > Home <span class= "badge" > 42</span></a></li>
<li role= "presentation" ><a href= "#" > Profile</a></li>
<li role= "presentation" ><a href= "#" > Messages <span class= "badge" > 3</span></a></li>
</ul>
በጣቢያዎ ላይ ቁልፍ ይዘትን ለማሳየት አጠቃላይ እይታን እንደ አማራጭ ሊያራዝም የሚችል ቀላል ክብደት ያለው ተለዋዋጭ አካል።
ሰላም ልዑል!
ይህ ቀላል የጀግና አሃድ ነው፣ ለቀረበ ይዘት ወይም መረጃ ተጨማሪ ትኩረት ለመጥራት ቀላል የጃምቦሮን አይነት አካል ነው።
ተጨማሪ እወቅ
<div class= "jumbotron" >
<h1> Hello, world!</h1>
<p> ...</p>
<p><a class= "btn btn-primary btn-lg" href= "#" role= "button" > Learn more</a></p>
</div>
ጃምቦትሮን ሙሉ ስፋቱን ለመስራት እና ያለማጠጋጋ ማዕዘኖች ከሁሉም s ውጭ ያስቀምጡት .container
እና በምትኩ .container
ውስጥ ይጨምሩ።
<div class= "jumbotron" >
<div class= "container" >
...
</div>
</div>
አንድ ቀላል ሼል h1
በተገቢው ቦታ ለማስወጣት እና የይዘት ክፍሎችን በገጽ ላይ። h1
ነባሪውን small
ኤለመንት፣ እንዲሁም ሌሎች ብዙ ክፍሎችን (ከተጨማሪ ቅጦች ጋር) መጠቀም ይችላል።
<div class= "page-header" >
<h1> Example page header <small> Subtext for header</small></h1>
</div>
የምስሎችን፣ ቪዲዮዎችን፣ የጽሑፍ እና ሌሎችንም ፍርግርግ በቀላሉ ለማሳየት የ Bootstrapን ፍርግርግ ስርዓት ከትንሽ አክል አካል ጋር ያራዝሙ።
እንደ Pinterest የሚመስል የተለያየ ቁመት እና/ወይም ስፋቶች ድንክዬ ማቅረቢያ እየፈለጉ ከሆነ እንደ ሜሶነሪ ፣ ኢሶቶፕ ወይም ሳልቫቶር ያሉ የሶስተኛ ወገን ተሰኪ መጠቀም ያስፈልግዎታል ።
ነባሪ ምሳሌ
በነባሪ የ Bootstrap ጥፍር አከሎች የተገናኙ ምስሎችን በትንሹ የሚፈለገው ምልክት ለማሳየት የተነደፉ ናቸው።
<div class= "row" >
<div class= "col-xs-6 col-md-3" >
<a href= "#" class= "thumbnail" >
<img src= "..." alt= "..." >
</a>
</div>
...
</div>
ብጁ ይዘት
በትንሽ ተጨማሪ ምልክት ማድረጊያ እንደ አርእስት፣ አንቀጾች ወይም አዝራሮች ያሉ ማንኛውንም አይነት HTML ይዘት ወደ ድንክዬዎች ማከል ይቻላል።
ድንክዬ መለያ
Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። Donec id elit non mi porta gravida እና eget metus። Nullam id dolor id nibh ultricies vehicula ut id elit.
አዝራር አዝራር
ድንክዬ መለያ
Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። Donec id elit non mi porta gravida እና eget metus። Nullam id dolor id nibh ultricies vehicula ut id elit.
አዝራር አዝራር
ድንክዬ መለያ
Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። Donec id elit non mi porta gravida እና eget metus። Nullam id dolor id nibh ultricies vehicula ut id elit.
አዝራር አዝራር
<div class= "row" >
<div class= "col-sm-6 col-md-4" >
<div class= "thumbnail" >
<img src= "..." alt= "..." >
<div class= "caption" >
<h3> Thumbnail label</h3>
<p> ...</p>
<p><a href= "#" class= "btn btn-primary" role= "button" > Button</a> <a href= "#" class= "btn btn-default" role= "button" > Button</a></p>
</div>
</div>
</div>
</div>
በጣት በሚቆጠሩ እና በተለዋዋጭ የማንቂያ መልእክቶች ለተለመደ የተጠቃሚ እርምጃዎች የአውድ ግብረመልስ መልዕክቶችን ያቅርቡ።
ምሳሌዎች
ለመሠረታዊ የማንቂያ መልእክቶች ማንኛውንም ጽሑፍ እና አማራጭ ማሰናበት ቁልፍን .alert
እና ከአራቱ የአውድ ክፍሎች አንዱን (ለምሳሌ ) ጠቅልል።.alert-success
ነባሪ ክፍል የለም።
ማንቂያዎች ነባሪ ክፍሎች የሉትም፣ የመሠረት እና የመቀየሪያ ክፍሎች ብቻ ናቸው። ነባሪ ግራጫ ማንቂያ ብዙ ትርጉም አይሰጥም፣ስለዚህ አይነት በአውድ ክፍል በኩል መግለጽ ያስፈልግዎታል። ከስኬት፣ መረጃ፣ ማስጠንቀቂያ ወይም አደጋ ይምረጡ።
ጥሩ ስራ! ይህን አስፈላጊ የማንቂያ መልእክት በተሳካ ሁኔታ አንብበሃል።
ቀና በል! ይህ ማንቂያ የእርስዎን ትኩረት ይፈልጋል፣ ግን እጅግ በጣም አስፈላጊ አይደለም።
ማስጠንቀቂያ! እራስህን መፈተሽ ይሻላል፣ በጣም ጥሩ አይደለህም
ኧረ ተው! ጥቂት ነገሮችን ይቀይሩ እና እንደገና ለማስገባት ይሞክሩ።
<div class= "alert alert-success" role= "alert" > ...</div>
<div class= "alert alert-info" role= "alert" > ...</div>
<div class= "alert alert-warning" role= "alert" > ...</div>
<div class= "alert alert-danger" role= "alert" > ...</div>
የማይታለፉ ማንቂያዎች
አማራጭ .alert-dismissible
እና ዝጋ ቁልፍ በማከል በማንኛውም ማንቂያ ላይ ይገንቡ።
ጃቫ ስክሪፕት ማንቂያ ተሰኪ ያስፈልገዋል
ሙሉ በሙሉ ለመስራት፣ ሊሰናበቱ የማይችሉ ማንቂያዎች፣ ማንቂያዎቹን መጠቀም አለቦት JavaScript ፕለጊን ።
×
ማስጠንቀቂያ! እራስህን መፈተሽ ይሻላል፣ በጣም ጥሩ አይደለህም
<div class= "alert alert-warning alert-dismissible" role= "alert" >
<button type= "button" class= "close" data-dismiss= "alert" aria-label= "Close" ><span aria-hidden= "true" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
ማንቂያዎች ውስጥ አገናኞች
.alert-link
በማንኛውም ማንቂያ ውስጥ ተዛማጅ ቀለም ያላቸው አገናኞችን በፍጥነት ለማቅረብ የመገልገያ ክፍሉን ይጠቀሙ ።
<div class= "alert alert-success" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-info" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-warning" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
<div class= "alert alert-danger" role= "alert" >
<a href= "#" class= "alert-link" > ...</a>
</div>
ቀላል ሆኖም ተለዋዋጭ የሂደት አሞሌዎች ባለው የስራ ሂደት ወይም እርምጃ ሂደት ላይ ወቅታዊ ግብረመልስ ይስጡ።
የአሳሽ ተሻጋሪ ተኳኋኝነት
የሂደት አሞሌዎች አንዳንድ ውጤቶቻቸውን ለማሳካት የCSS3 ሽግግሮችን እና እነማዎችን ይጠቀማሉ። እነዚህ ባህሪያት በInternet Explorer 9 እና ከዚያ በታች ወይም በቆዩ የፋየርፎክስ ስሪቶች ውስጥ አይደገፉም። ኦፔራ 12 እነማዎችን አይደግፍም።
የይዘት ደህንነት ፖሊሲ (CSP) ተኳኋኝነት
የእርስዎ ድር ጣቢያ የማይፈቅድ የይዘት ደህንነት ፖሊሲ (ሲ.ኤስ.ፒ.) ካለው፣ ከዚህ በታች ባለው ምሳሌያችን ላይ እንደሚታየው የሂደት አሞሌ ስፋቶችን ለማዘጋጀት style-src 'unsafe-inline'
የመስመር ውስጥ ባህሪያትን መጠቀም አይችሉም ። style
ከጥብቅ ሲኤስፒዎች ጋር የሚጣጣሙትን ስፋቶችን ለማዘጋጀት አማራጭ ዘዴዎች ትንሽ ብጁ ጃቫ ስክሪፕት (ያ ያዘጋጃል element.style.width
) ወይም ብጁ የሲኤስኤስ ክፍሎችን መጠቀም ያካትታሉ።
መሰረታዊ ምሳሌ
ነባሪ የሂደት አሞሌ።
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
<span class= "sr-only" > 60% Complete</span>
</div>
</div>
ከመለያ ጋር
የሚታይ መቶኛ ለማሳየት ከሂደት አሞሌው ውስጥ ያለውን ክፍል <span>
ያስወግዱት ።.sr-only
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%;" >
60%
</div>
</div>
የመለያው ጽሑፍ ለዝቅተኛ መቶኛም ቢሆን የሚነበብ ሆኖ መቆየቱን ለማረጋገጥ min-width
የሂደት አሞሌን ማከል ያስቡበት።
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "0" aria-valuemin= "0" aria-valuemax= "100" style= "min-width: 2em;" >
0%
</div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "2" aria-valuemin= "0" aria-valuemax= "100" style= "min-width: 2em; width: 2%;" >
2%
</div>
</div>
አውዳዊ አማራጮች
የሂደት አሞሌዎች ለተመሳሳይ ቅጦች የተወሰኑትን ተመሳሳይ ቁልፍ እና የማንቂያ ክፍሎችን ይጠቀማሉ።
<div class= "progress" >
<div class= "progress-bar progress-bar-success" role= "progressbar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "100" style= "width: 40%" >
<span class= "sr-only" > 40% Complete (success)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-info" role= "progressbar" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" style= "width: 20%" >
<span class= "sr-only" > 20% Complete</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-warning" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%" >
<span class= "sr-only" > 60% Complete (warning)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-danger" role= "progressbar" aria-valuenow= "80" aria-valuemin= "0" aria-valuemax= "100" style= "width: 80%" >
<span class= "sr-only" > 80% Complete (danger)</span>
</div>
</div>
የተራቆተ
የጭረት ውጤት ለመፍጠር ቅልመትን ይጠቀማል። በIE9 እና ከዚያ በታች አይገኝም።
<div class= "progress" >
<div class= "progress-bar progress-bar-success progress-bar-striped" role= "progressbar" aria-valuenow= "40" aria-valuemin= "0" aria-valuemax= "100" style= "width: 40%" >
<span class= "sr-only" > 40% Complete (success)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-info progress-bar-striped" role= "progressbar" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" style= "width: 20%" >
<span class= "sr-only" > 20% Complete</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-warning progress-bar-striped" role= "progressbar" aria-valuenow= "60" aria-valuemin= "0" aria-valuemax= "100" style= "width: 60%" >
<span class= "sr-only" > 60% Complete (warning)</span>
</div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-danger progress-bar-striped" role= "progressbar" aria-valuenow= "80" aria-valuemin= "0" aria-valuemax= "100" style= "width: 80%" >
<span class= "sr-only" > 80% Complete (danger)</span>
</div>
</div>
የታነመ
ገመዶቹን ከቀኝ ወደ ግራ ለማንቃት .active
ያክሉ ። .progress-bar-striped
በIE9 እና ከዚያ በታች አይገኝም።
<div class= "progress" >
<div class= "progress-bar progress-bar-striped active" role= "progressbar" aria-valuenow= "45" aria-valuemin= "0" aria-valuemax= "100" style= "width: 45%" >
<span class= "sr-only" > 45% Complete</span>
</div>
</div>
የተቆለለ
.progress
እነሱን ለመደርደር ብዙ አሞሌዎችን ወደ ተመሳሳይ ያስቀምጡ።
35% ሙሉ (ስኬት)
20% ሙሉ (ማስጠንቀቂያ)
10% ሙሉ (አደጋ)
<div class= "progress" >
<div class= "progress-bar progress-bar-success" style= "width: 35%" >
<span class= "sr-only" > 35% Complete (success)</span>
</div>
<div class= "progress-bar progress-bar-warning progress-bar-striped" style= "width: 20%" >
<span class= "sr-only" > 20% Complete (warning)</span>
</div>
<div class= "progress-bar progress-bar-danger" style= "width: 10%" >
<span class= "sr-only" > 10% Complete (danger)</span>
</div>
</div>
ከጽሑፋዊ ይዘት ጋር በግራ ወይም በቀኝ የተሰለፈ ምስል የሚያሳዩ የተለያዩ አይነት ክፍሎችን (እንደ ብሎግ አስተያየቶች፣ ትዊቶች፣ ወዘተ) ለመገንባት ረቂቅ የነገር ቅጦች።
ነባሪ ሚዲያ ከይዘት እገዳ በስተግራ ወይም ቀኝ ያለውን የሚዲያ ነገር (ምስሎች፣ ቪዲዮ፣ ኦዲዮ) ያሳያል።
<div class= "media" >
<div class= "media-left" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Media heading</h4>
...
</div>
</div>
ክፍሎቹ .pull-left
እና .pull-right
እንዲሁም ያሉ እና ቀደም ሲል እንደ የሚዲያ አካል አካል ሆነው ያገለግሉ ነበር፣ ነገር ግን ከ v3.3.0 ጀምሮ ለዛ አገልግሎት ተቋርጠዋል። በኤችቲኤምኤል ውስጥ መቀመጥ ካለበት በስተቀር እነሱ በግምት እኩል ናቸው .media-left
እና ..media-right
.media-right
.media-body
ምስሎቹ ወይም ሌላ ሚዲያ ከላይ፣ መሃል ወይም ታች ሊደረደሩ ይችላሉ። ነባሪው ከላይ የተሰለፈ ነው።
<div class= "media" >
<div class= "media-left media-middle" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Middle aligned media</h4>
...
</div>
</div>
ከትንሽ ተጨማሪ ምልክት ማድረጊያ ጋር፣ በዝርዝሩ ውስጥ ሚዲያን መጠቀም ይችላሉ (ለአስተያየት ክሮች ወይም ለጽሁፎች ዝርዝሮች ይጠቅማል)።
<ul class= "media-list" >
<li class= "media" >
<div class= "media-left" >
<a href= "#" >
<img class= "media-object" src= "..." alt= "..." >
</a>
</div>
<div class= "media-body" >
<h4 class= "media-heading" > Media heading</h4>
...
</div>
</li>
</ul>
የዝርዝር ቡድኖች ቀላል የሆኑ የንጥረ ነገሮች ዝርዝሮችን ብቻ ሳይሆን ብጁ ይዘት ያላቸውን ውስብስብ ለማሳየት ተለዋዋጭ እና ኃይለኛ አካል ናቸው።
መሰረታዊ ምሳሌ
በጣም መሠረታዊው የዝርዝር ቡድን በቀላሉ ከዝርዝር ዕቃዎች እና ተገቢ ክፍሎች ጋር ያልተያዘ ዝርዝር ነው። በእሱ ላይ በሚቀጥሉት አማራጮች ወይም እንደ አስፈላጊነቱ የራስዎን CSS ይገንቡ።
Cras justo odio
Dapibus ac facilisis in
ሞርቢ ሊዮ ሪስ
Porta ac consectetur ac
Vestibulum እና eros
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
ባጆች
የባጃጆችን አካል ወደ ማንኛውም የዝርዝር ቡድን ንጥል ያክሉ እና በራስ-ሰር በቀኝ በኩል ይቀመጣል።
14 Cras justo odio
2 Dapibus ac facilisis in
1 ሞርቢ ሊዮ ሪስ
<ul class= "list-group" >
<li class= "list-group-item" >
<span class= "badge" > 14</span>
Cras justo odio
</li>
</ul>
የተገናኙ ንጥሎች
ከዝርዝር ዝርዝሮች ይልቅ መልህቅ መለያዎችን በመጠቀም የቡድን ንጥሎችን አገናኝ አገናኙ (ይህ ማለት ደግሞ ከ ወላጅ ማለት ነው <div>
) <ul>
። በእያንዳንዱ ንጥረ ነገር ዙሪያ የግለሰብ ወላጆች አያስፈልግም.
<div class= "list-group" >
<a href= "#" class= "list-group-item active" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item" > Morbi leo risus</a>
<a href= "#" class= "list-group-item" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item" > Vestibulum at eros</a>
</div>
የቡድን ንጥሎች ከዝርዝር ንጥሎች ይልቅ አዝራሮች ሊሆኑ ይችላሉ (ይህ ማለት ደግሞ ከ አንድ ወላጅ ማለት ነው <div>
) <ul>
. በእያንዳንዱ ንጥረ ነገር ዙሪያ የግለሰብ ወላጆች አያስፈልግም. እዚህ መደበኛ ክፍሎችን አይጠቀሙ ..btn
Cras justo odio
Dapibus ac facilisis in
ሞርቢ ሊዮ ሪስ
Porta ac consectetur ac
Vestibulum እና eros
<div class= "list-group" >
<button type= "button" class= "list-group-item" > Cras justo odio</button>
<button type= "button" class= "list-group-item" > Dapibus ac facilisis in</button>
<button type= "button" class= "list-group-item" > Morbi leo risus</button>
<button type= "button" class= "list-group-item" > Porta ac consectetur ac</button>
<button type= "button" class= "list-group-item" > Vestibulum at eros</button>
</div>
የተሰናከሉ እቃዎች
አካል ጉዳተኛ ሆኖ ለመታየት ወደ ግራጫ .disabled
ያክሉት ።.list-group-item
<div class= "list-group" >
<a href= "#" class= "list-group-item disabled" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item" > Morbi leo risus</a>
<a href= "#" class= "list-group-item" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item" > Vestibulum at eros</a>
</div>
አውዳዊ ክፍሎች
የንጥሎች ዝርዝር፣ ነባሪ ወይም የተገናኘን የቅጥ ለማድረግ አውድ ክፍሎችን ተጠቀም። ግዛትንም ያካትታል .active
።
Dapibus ac facilisis in
Cras sit አሜት ኒብ ሊበሮ
Porta ac consectetur ac
Vestibulum እና eros
<ul class= "list-group" >
<li class= "list-group-item list-group-item-success" > Dapibus ac facilisis in</li>
<li class= "list-group-item list-group-item-info" > Cras sit amet nibh libero</li>
<li class= "list-group-item list-group-item-warning" > Porta ac consectetur ac</li>
<li class= "list-group-item list-group-item-danger" > Vestibulum at eros</li>
</ul>
<div class= "list-group" >
<a href= "#" class= "list-group-item list-group-item-success" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item list-group-item-info" > Cras sit amet nibh libero</a>
<a href= "#" class= "list-group-item list-group-item-warning" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item list-group-item-danger" > Vestibulum at eros</a>
</div>
ብጁ ይዘት
ከሞላ ጎደል ማንኛውንም ኤችቲኤምኤል ያክሉ፣ ከታች እንዳለው ለተገናኙት ዝርዝር ቡድኖችም ቢሆን።
<div class= "list-group" >
<a href= "#" class= "list-group-item active" >
<h4 class= "list-group-item-heading" > List group item heading</h4>
<p class= "list-group-item-text" > ...</p>
</a>
</div>
ሁልጊዜ አስፈላጊ ባይሆንም አንዳንድ ጊዜ የእርስዎን DOM በሳጥን ውስጥ ማስቀመጥ ያስፈልግዎታል። ለእነዚያ ሁኔታዎች የፓነል ክፍሉን ይሞክሩ።
መሰረታዊ ምሳሌ
በነባሪ፣ ሁሉም .panel
የሚሰራው አንዳንድ ይዘቶችን ለመያዝ አንዳንድ መሰረታዊ ድንበር እና ንጣፍ መተግበር ነው።
<div class= "panel panel-default" >
<div class= "panel-body" >
Basic panel example
</div>
</div>
ርዕስ ያለው ፓነል
የርዕስ መያዣን በቀላሉ ወደ ፓነልዎ ያክሉ .panel-heading
። እንዲሁም ማንኛውንም ማካተት ይችላሉ <h1>
- ቅድመ-ቅጥ ያለው ርዕስ ለመጨመር ከክፍል <h6>
ጋር ። ሆኖም፣ የ - .panel-title
ቅርጸ-ቁምፊ መጠኖች በ ተሽረዋል ።<h1>
<h6>
.panel-heading
ለትክክለኛው የአገናኝ ቀለም፣ አገናኞችን በርዕሶች ውስጥ ማስቀመጥዎን እርግጠኛ ይሁኑ .panel-title
።
<div class= "panel panel-default" >
<div class= "panel-heading" > Panel heading without title</div>
<div class= "panel-body" >
Panel content
</div>
</div>
<div class= "panel panel-default" >
<div class= "panel-heading" >
<h3 class= "panel-title" > Panel title</h3>
</div>
<div class= "panel-body" >
Panel content
</div>
</div>
ጠቅልል አዝራሮች ወይም ሁለተኛ ጽሑፍ .panel-footer
. የአውድ ልዩነቶችን ሲጠቀሙ የፓነል ግርጌዎች በግንባር ቀደምትነት ውስጥ መሆን ስላልቻሉ ቀለሞችን እና ድንበሮችን እንደማይወርሱ ልብ ይበሉ ።
<div class= "panel panel-default" >
<div class= "panel-body" >
Panel content
</div>
<div class= "panel-footer" > Panel footer</div>
</div>
አውዳዊ አማራጮች
ልክ እንደሌሎች ክፍሎች፣ ማናቸውንም የአውድ ስቴት ክፍሎችን በማከል በቀላሉ ፓነልን ለተወሰነ አውድ የበለጠ ትርጉም ያለው ያድርጉት።
<div class= "panel panel-primary" > ...</div>
<div class= "panel panel-success" > ...</div>
<div class= "panel panel-info" > ...</div>
<div class= "panel panel-warning" > ...</div>
<div class= "panel panel-danger" > ...</div>
ከጠረጴዛዎች ጋር
.table
እንከን የለሽ ንድፍ በፓነል ውስጥ ማንኛውንም ድንበር የሌለበትን ያክሉ ። ካለ .panel-body
፣ ለመለያየት በጠረጴዛው አናት ላይ ተጨማሪ ድንበር እንጨምራለን ።
የፓነል ርዕስ
አንዳንድ ነባሪ የፓነል ይዘት እዚህ። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። አኔን ላሲኒያ ቢቤንዱም ኑላ ሴድ ኮንሴክቴተር። አኔን ኢዩ ሊዮ ቁም. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
የመጀመሪያ ስም
ያባት ስም
የተጠቃሚ ስም
1
ምልክት ያድርጉ
ኦቶ
@mdo
2
ያዕቆብ
እሾህ
@ ስብ
3
ላሪ
ወፉ
@twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<div class= "panel-body" >
<p> ...</p>
</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
የፓነል አካል ከሌለ, ክፍሉ ያለማቋረጥ ከፓነል ራስጌ ወደ ጠረጴዛ ይንቀሳቀሳል.
የፓነል ርዕስ
#
የመጀመሪያ ስም
ያባት ስም
የተጠቃሚ ስም
1
ምልክት ያድርጉ
ኦቶ
@mdo
2
ያዕቆብ
እሾህ
@ ስብ
3
ላሪ
ወፉ
@twitter
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<!-- Table -->
<table class= "table" >
...
</table>
</div>
ከዝርዝር ቡድኖች ጋር
በማንኛውም ፓነል ውስጥ ባለ ሙሉ ስፋት ዝርዝር ቡድኖችን በቀላሉ ያካትቱ።
የፓነል ርዕስ
አንዳንድ ነባሪ የፓነል ይዘት እዚህ። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። አኔን ላሲኒያ ቢቤንዱም ኑላ ሴድ ኮንሴክቴተር። አኔን ኢዩ ሊዮ ቁም. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis in
ሞርቢ ሊዮ ሪስ
Porta ac consectetur ac
Vestibulum እና eros
<div class= "panel panel-default" >
<!-- Default panel contents -->
<div class= "panel-heading" > Panel heading</div>
<div class= "panel-body" >
<p> ...</p>
</div>
<!-- List group -->
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
</div>
አሳሾች በማናቸውም መሳሪያ ላይ በትክክል የሚለካ ውስጣዊ ምጥጥን በመፍጠር በይዘታቸው ስፋት ላይ በመመስረት የቪዲዮ ወይም የተንሸራታች ትዕይንት ልኬቶችን እንዲወስኑ ይፍቀዱላቸው።
ደንቦች በቀጥታ የሚተገበሩት በ,,, እና <iframe>
ንጥረ ነገሮች ላይ ነው; ከሌሎች ባህሪያት ጋር ማመሳሰል ሲፈልጉ እንደ አማራጭ ግልጽ የሆነ የዘር ክፍል ይጠቀሙ ።<embed>
<video>
<object>
.embed-responsive-item
ጠቃሚ ምክር! frameborder="0"
ያንን ለእርስዎ ስንሽረው በእርስዎ <iframe>
s ውስጥ ማካተት አያስፈልገዎትም ።
<!-- 16:9 aspect ratio -->
<div class= "embed-responsive embed-responsive-16by9" >
<iframe class= "embed-responsive-item" src= "..." ></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class= "embed-responsive embed-responsive-4by3" >
<iframe class= "embed-responsive-item" src= "..." ></iframe>
</div>
በደንብ ነባሪ
ጉድጓዱን የማስገባት ውጤት ለመስጠት በአንድ ንጥረ ነገር ላይ እንደ ቀላል ተጽእኖ ይጠቀሙ።
<div class= "well" > ...</div>
አማራጭ ክፍሎች
መቆጣጠሪያ ፓዲንግ እና የተጠጋጋ ማዕዘኖች ከሁለት አማራጭ መቀየሪያ ክፍሎች ጋር።
<div class= "well well-lg" > ...</div>
<div class= "well well-sm" > ...</div>