አካላት
አዶግራፊን፣ ተቆልቋይዎችን፣ የግቤት ቡድኖችን፣ አሰሳን፣ ማንቂያዎችን እና ሌሎችንም ለማቅረብ የተገነቡ ከደርዘን በላይ እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ክፍሎች።
አዶግራፊን፣ ተቆልቋይዎችን፣ የግቤት ቡድኖችን፣ አሰሳን፣ ማንቂያዎችን እና ሌሎችንም ለማቅረብ የተገነቡ ከደርዘን በላይ እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ክፍሎች።
ከ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>
ተከታታይ አዝራሮችን በአንድ መስመር በአንድ መስመር ከአዝራር ቡድን ጋር ይሰብስቡ። በአማራጭ የጃቫ ስክሪፕት ሬዲዮ እና የአመልካች ሳጥን ዘይቤ ባህሪን በአዝራሮቻችን ፕለጊን ያክሉ ።
በ a ውስጥ ባሉ ንጥረ ነገሮች ላይ የመሳሪያ ምክሮችን ወይም ብቅ-ባዮችን ሲጠቀሙ ያልተፈለጉ የጎንዮሽ ጉዳቶችን ለማስወገድ .btn-group
አማራጩን መግለጽ አለብዎት container: 'body'
(እንደ ኤለመንቱ እየሰፋ እያደገ እና/ወይም የመሳሪያ ጥቆማው ወይም ብቅ-ባይ ሲቀሰቀስ) የተጠጋጋ ማዕዘኖቹን ማጣት)።
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 ባደረጉት ማበጀት ላይ በመመስረት፣ ድንበሮችን ማስወገድ ወይም እንደገና መቀባት ሊፈልጉ ይችላሉ።
ኢንተርኔት ኤክስፕሎረር 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>
ነገሮች ጋር<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'
(እንደ ኤለመንቱ እየሰፋ እያደገ እና/ወይም የመሳሪያው ጫፍ ወይም ብቅ-ባይ ሲቀሰቀስ) የተጠጋጋ ማዕዘኖቹን ማጣት)።
የቅጽ ቡድኖችን ወይም የፍርግርግ አምድ ክፍሎችን በቀጥታ ከግብዓት ቡድኖች ጋር አታቀላቅሉ። በምትኩ፣ የግቤት ቡድኑን ከቅጽ ቡድን ውስጥ ወይም ከፍርግርግ ጋር የተዛመደ ኤለመንት ውስጥ ያስገቡ።
ለእያንዳንዱ ግቤት መለያ ካላካተቱ የስክሪን አንባቢዎች በእርስዎ ቅጾች ላይ ችግር አለባቸው። ለእነዚህ የግቤት ቡድኖች ማንኛውም ተጨማሪ መለያ ወይም ተግባር ወደ አጋዥ ቴክኖሎጂዎች መተላለፉን ያረጋግጡ።
ትክክለኛው ጥቅም ላይ የሚውለው ቴክኒክ (የሚታዩ <label>
ንጥረ ነገሮች፣ ክፍልን <label>
ተጠቅመው የተደበቁ ንጥረ ነገሮች፣ ወይም የ , , , ወይም ባህሪን መጠቀም) እና ምን ተጨማሪ መረጃ ማስተላለፍ እንደሚያስፈልግዎ እርስዎ እየተገበሩት ባለው የበይነገጽ መግብር አይነት ይለያያል። በዚህ ክፍል ውስጥ ያሉት ምሳሌዎች ጥቂት የተጠቆሙ፣ ጉዳይ-ተኮር አቀራረቦችን ያቀርባሉ።.sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
በግቤት በሁለቱም በኩል አንድ ተጨማሪ ወይም አዝራር ያስቀምጡ። እንዲሁም አንዱን በግቤት በሁለቱም በኩል ማስቀመጥ ይችላሉ።
በአንድ በኩል ብዙ ተጨማሪዎችን ( .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
ክፍል ጀምሮ እና እንዲሁም የተጋሩ ግዛቶች የጋራ ምልክት አላቸው። በእያንዳንዱ ዘይቤ መካከል ለመቀያየር የመቀየሪያ ክፍሎችን ይቀያይሩ።
.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
። በትናንሽ ስክሪኖች ላይ፣ የባህር ኃይል ማገናኛዎች ተቆልለዋል።
ትክክለኛ የናቭባር ናቭ ማገናኛዎች በአሁኑ ጊዜ አይደገፉም።
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
ለማንኛውም የናቭ አካል (ትሮች ወይም ክኒኖች)፣ ለግራጫ ማያያዣዎች ያክሉ .disabled
እና ምንም የማንዣበብ ውጤቶች የሉም ።
<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 ለመተግበሪያዎ ወይም ለጣቢያዎ እንደ ዳሰሳ ራስጌ የሚያገለግሉ የሜታ ክፍሎች ናቸው። በሞባይል እይታዎች መውደቅ ይጀምራሉ (እና ሊለዋወጡ የሚችሉ ናቸው) እና ያለው የመመልከቻ ስፋት ሲጨምር አግድም ይሆናሉ።
ትክክለኛ የናቭባር ናቭ ማገናኛዎች በአሁኑ ጊዜ አይደገፉም።
<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-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
፣ ነገር ግን በመሣሪያ መጠኖች ውስጥ የናቭባር ክፍሎችን በቀላሉ ለማስተናገድ የሚዲያ ጥያቄዎችን ያካተቱ ናቸው።
አክል .navbar-fixed-top
እና ወደ መሃል እና ወደ ፓድ navbar ይዘት .container
ያካትቱ ።.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
አክል .navbar-fixed-bottom
እና ወደ መሃል እና ወደ ፓድ navbar ይዘት .container
ያካትቱ ።.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
አንድ ወይም ወደ መሃል እና የንድፍ ዳሳሽ ይዘት በማከል .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>
<nav>
የገጽታው ክፍል እንደ የስክሪን አንባቢዎች እና ሌሎች አጋዥ ቴክኖሎጂዎች እንደ አሰሳ ክፍል ለመለየት በኤለመንቱ መጠቅለል አለበት ። በተጨማሪም፣ አንድ ገጽ ቀድሞውኑ ከአንድ በላይ የመዳሰሻ ክፍል ሊኖረው ስለሚችል (ለምሳሌ በአርዕስቱ ውስጥ ያለው ዋና ዳሰሳ ወይም የጎን አሞሌ ዳሰሳ) ዓላማውን የሚያንፀባርቅ መግለጫ aria-label
መስጠት ጥሩ ነው። <nav>
ለምሳሌ፣ የገጽታ ክፍሉ በፍለጋ ውጤቶች ስብስብ መካከል ለመዳሰስ የሚያገለግል ከሆነ፣ ተገቢው መለያ ሊሆን ይችላል aria-label="Search results pages"
።
ማገናኛዎች ለተለያዩ ሁኔታዎች ሊበጁ የሚችሉ ናቸው። .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 ይዘት ወደ ድንክዬዎች ማከል ይቻላል።
<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>
ኤለመንቱን ከውሂቡ ባህሪ <button>
ጋር መጠቀምዎን ያረጋግጡ ።data-dismiss="alert"
.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 እነማዎችን አይደግፍም።
የእርስዎ ድር ጣቢያ የማይፈቅድ የይዘት ደህንነት ፖሊሲ (ሲ.ኤስ.ፒ.) ካለው፣ ከዚህ በታች ባለው ምሳሌያችን ላይ እንደሚታየው የሂደት አሞሌ ስፋቶችን ለማዘጋጀት 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
እነሱን ለመደርደር ብዙ አሞሌዎችን ወደ ተመሳሳይ ያስቀምጡ።
<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
ምስሎቹ ወይም ሌላ ሚዲያ ከላይ፣ መሃል ወይም ታች ሊደረደሩ ይችላሉ። ነባሪው ከላይ የተሰለፈ ነው።
Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።
Donec ሴድ ኦዲዮ dui. ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus።
Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።
Donec ሴድ ኦዲዮ dui. ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus።
Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።
Donec ሴድ ኦዲዮ dui. ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus።
<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>
ከትንሽ ተጨማሪ ምልክት ማድረጊያ ጋር፣ በዝርዝሩ ውስጥ ሚዲያን መጠቀም ይችላሉ (ለአስተያየት ክሮች ወይም ለጽሁፎች ዝርዝሮች ይጠቅማል)።
Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።
<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 ይገንቡ።
<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>
የባጃጆችን አካል ወደ ማንኛውም የዝርዝር ቡድን ንጥል ያክሉ እና በራስ-ሰር በቀኝ በኩል ይቀመጣል።
<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
<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
።
<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>
ከሞላ ጎደል ማንኛውንም ኤችቲኤምኤል ያክሉ፣ ከታች እንዳለው ለተገናኙት ዝርዝር ቡድኖችም ቢሆን።
Donec id elit non mi porta gravida እና eget metus። Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida እና eget metus። Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida እና eget metus። Maecenas sed diam eget risus varius blandit.
<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 | ላሪ | ወፉ |
<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 | ላሪ | ወፉ |
<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.
<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>