ዝርከቡ ግሊፍታት
ልዕሊ 250 ግሊፍ ብቅርጺ ቅርጺ ካብ ስብስብ ግሊፊኮን ሃፍሊንግስ ዘጠቓለለ እዩ። ግሊፊኮንስ ሃፍሊንግስ ንቡር ብነጻ ኣይርከብን እዩ፡ ፈጣሪኡ ግን ንቡትስትራፕ ብነጻ ከም ዝቐርብ ገይሩ ኣሎ። ከም ምስጋና ድማ ብዝተኻእለ መጠን ናብ ግሊፊኮንስ ዝምለስ ሊንክ ከተእትዉ ጥራይ ኢና ንሓትት ።
ከመይ ጌርና ንጥቀመሉ
ንኣፈጻጽማ ምኽንያት ኩሎም ምልክታት መሰረታዊ ክፍልን ውልቃዊ ምልክት ክፍልን የድልዮም። ንኽትጥቀመሉ፡ ነዚ ዝስዕብ ኮድ ዳርጋ ኣብ ዝኾነ ቦታ ኣቐምጦ። ኣብ መንጎ እቲ ምልክትን ጽሑፍን ንግቡእ ምዕሻግ ቦታ ምግዳፍካ ኣረጋግጽ።
ምስ ካልኦት ባእታታት ኣይትሕወሱ
ናይ ምልክት ክፍልታት ብቐጥታ ምስ ካልኦት ባእታታት ክውሃሃዱ ኣይክእሉን እዮም። ምስ ካልኦት ክፍልታት ኣብ ሓደ ባእታ ክጥቀሙ የብሎምን። ኣብ ክንድኡስ፡ ሓደ nested ወስኸሉን <span>
ነቶም ናይ ምልክት ክፍልታት ኣብቲ <span>
.
ኣብ ባዶ ባእታታት ጥራይ ንኽትጥቀመሉ
ናይ ምልክት ክፍልታት ኣብ ትሕዝቶ ጽሑፍ ዘይሓዙን ውላድ ባእታታት ዘይብሎምን ባእታታት ጥራይ ክጥቀሙ ይግባእ።
ናይ ምልክት ቅርጺ ፊደል ቦታ ምቕያር
ቡትስትራፕ ምልክት ቅርጺ ፋይላት ኣብቲ ../fonts/
ማህደር ክህልዉ እዮም ዝብል ግምት ኣለዎ፣ ብተዛማዲ ምስቶም ዝተጠርነፉ CSS ፋይላት። ነቶም ናይ ቅርጺ ፋይላት ምግዓዝ ወይ ምቕያር ማለት ነቲ CSS ብሓደ ካብ ሰለስተ መንገድታት ምዕራፍ ማለት እዩ፤
- ኣብቲ ምንጪ ውሑድ ፋይላት
@icon-font-path
ዘሎን/ወይ ተለዋዋጢ ረቛሒታት ቀይር ።@icon-font-name
- ብ Less compiler ዝቐረበ ኣንጻራዊ URLs ኣማራጺ ተጠቐም ።
url()
ኣብቲ ዝተጠርነፈ CSS ዘለዉ መንገድታት ምቕያር ።
ንፍሉይ ናይ ምዕባለ ኣወዳድባኻ ዝበለጸ ዝሰማማዕ ዝኾነ ኣማራጺ ተጠቐም።
ተበጻሕቲ ዝኾኑ ምልክታት
ዘመናዊ ስሪት ሓገዝቲ ቴክኖሎጂታት ብሲኤስኤስ ዝተፈጥረ ትሕዝቶ፡ ከምኡ’ውን ፍሉያት ፊደላት ዩኒኮድ ከበስሩ እዮም። ኣብ ስክሪን ሪደርስ ዘይተደልየን ዘደናግርን ውጽኢት ንኸይፍጠር (ብፍላይ ምልክታት ንመጋየጺ ጥራይ ኣብ ዝጥቀሙሉ እዋን)፡ በቲ aria-hidden="true"
ባህሪ ንሕብኦም።
ትርጉም ንምትሕልላፍ ምልክት ትጥቀም እንተኾንካ (ከም መጋየጺ ባእታ ጥራይ ዘይኮነስ)፡ እዚ ትርጉም እዚ ናብ ሓገዝቲ ቴክኖሎጂታት እውን ከም ዝመሓላለፍ ኣረጋግጽ - ንኣብነት፡ ተወሳኺ ትሕዝቶ ኣካትት፡ ብዓይኒ ምስቲ .sr-only
ክፍሊ ዝተሓብአ።
ካልእ ጽሑፍ ዘይብሉ ቁጽጽር ትፈጥር እንተኾንካ (ከም <button>
ምልክት ጥራይ ዝሓዘ)፡ ኩሉ ግዜ ዕላማ ናይቲ ቁጽጽር ንምልላይ ኣማራጺ ትሕዝቶ ክትህብ ኣለካ፡ ምእንቲ ንተጠቀምቲ ሓጋዚ ቴክኖሎጂታት ትርጉም ክህልዎ። aria-label
ኣብ ከምዚ ኩነታት ፡ ኣብቲ ቁጽጽር ባዕሉ ሓደ ባህሪ ክትውስኽ ትኽእል ኢኻ ።
ኣብነታት
ኣብ መጠወቒታት፣ ንመሳርሒታት ዝኸውን ጉጅለታት መጠወቒታት፣ ምድህሳስ፣ ወይ ቅድሚኡ ዝተሰነየ ቅጥዒ ምእታው ተጠቐመሎም።
ኣብ ሓደ መጠንቀቕታ ናይ ጌጋ መልእኽቲ ምዃኑ ንምትሕልላፍ ዝጥቀመሉ ምልክት፣ ምስ ተወሳኺ .sr-only
ጽሑፍ ነዚ ምልክት ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት ንምትሕልላፍ።
ስሕተት:ቅኑዕ ናይ ኢመይል ኣድራሻ ኣእቱ
ዝርዝር መላግቦታት ንምርኣይ ዝቕየር፣ ዓውደ-ጽሑፋዊ ዝርዝር። ምስቲ ንቑልቁል ዝወርድ ተወሰኽቲ ጃቫስክሪፕት መስተጋብራዊ ተገይሩ ።
ኣብነት
ናይቲ ንቑልቁል ዝወርድ መበገስን ነቲ ንቑልቁል ዝወርድ ዝርዝርን ኣብ ውሽጢ .dropdown
፣ ወይ ካልእ ን ዝእውጅ ባእታ ጠቕልሎ position: relative;
። ድሕሪኡ ናይቲ ዝርዝር ኤችቲኤምኤል ንውስኸሉ።
.dropup
ንቑልቁል ዝወርድ ምልክታታት ናብቲ ወላዲ ብምውሳኽ ንላዕሊ (ኣብ ክንዲ ንታሕቲ) ንምስፋሕ ክቕየሩ ይኽእሉ ።
ኣሰላልፋ
ብነባሪ መልክዑ፡ ሓደ ንቑልቁል ዝወርድ ዝርዝር ብኣውቶማቲክ ካብ ላዕሊን ብጸጋማይ ሸነኽ ወላዲኡን 100% ይቕመጥ። .dropdown-menu-right
ናብ a ወስኹ ናብ .dropdown-menu
የማን ነቲ ንቑልቁል ዝወርድ ዝርዝር ኣሰላልፍዎ።
ተወሳኺ ኣቀማምጣ ከድልዮ ይኽእል እዩ።
ድሮፕዳውንድ ብኣውቶማቲክ ብመንገዲ CSS ኣብ ውሽጢ ንቡር ዋሕዚ ናይቲ ሰነድ ይቕመጡ። እዚ ማለት ንቑልቁል ዝወርድ ነገራት ብገለ overflow
ባህርያት ዘለዎም ወለዲ ክቑረጹ ወይ ካብ ደረት ናይቲ ቪውፖርት ወጻኢ ክረኣዩ ይኽእሉ። ነዞም ጉዳያት ከም ዝለዓሉ ባዕልኻ ፍታሕ።
ዘይተጠቕመ .pull-right
ኣሰላልፋ
ካብ v3.1.0 ጀሚርና .pull-right
ኣብ ንቑልቁል ዝወርድ ምልክታታት ኣቋሪጽናዮ ኣለና። ንሓደ ዝርዝር ብየማናይ ምልክት ንምስምማዕ፡ ን ተጠቐም .dropdown-menu-right
። ኣብ navbar ብየማን ዝተሰለፉ nav ክፍልታት ብኣውቶማቲክ ነቲ ምልክት ንምስላፍ ናይዚ ክፍሊ mixin ስሪት ይጥቀሙ። ንምግዳፍ ድማ .dropdown-menu-left
.
ኣብ ዝኾነ ንቑልቁል ዝወርድ ዝርዝር ንክፋላት ተግባራት ስያመ ንምሃብ ርእሲ ምውሳኽ።
መከፋፈልቲ
ኣብ ንቑልቁል ዝወርድ ዝርዝር ንዝተፈላለዩ ተኸታተልቲ መላግቦታት መከፋፈልቲ ምውሳኽ።
ናይ ምልክት ዝርዝር ነገራት ተሰናኺሎም
ነቲ ሊንክ ንምስንኻል ኣብቲ ንቑልቁል ዝወርድ .disabled
ናብ a ወስኹሉ ።<li>
ተኸታታሊ መጠወቒታት ብሓባር ኣብ ሓደ መስመር ምስቲ ጉጅለ መጠወቒታት ኣጥርዩ። ኣብ ኣማራጺ ጃቫስክሪፕት ሬድዮን ምልክት ሳጹን ቅዲ ባህሪ ብመጠወቒታትና ፕላግ-ኢን ወስኹ ።
ቅኑዕ role
ምርግጋጽን ምልክት ምሃብን።
ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ተኸታታሊ መጠወቒታት ከም ዝተጠርነፉ ንኸመሓላልፉ፡ ግቡእ role
ባህሪ ክቐርብ ኣለዎ። ንጉጅለታት መጠወቒ፡ እዚ ምኾነ role="group"
፡ መሳርሒታት ባር ድማ role="toolbar"
.
ሓደ ፍሉይ ዝኾነ ሓደ ቁጽጽር ጥራይ ዝሓዙ ጉጅለታት እዮም (ንኣብነት እቶም ዝተመኽኑ መጠወቒ ጉጅለታት ምስ <button>
ባእታታት) ወይ ንቑልቁል ዝወርድ።
role
ብተወሳኺ፡ መብዛሕትኦም ሓገዝቲ ቴክኖሎጂታት ብኻልእ መገዲ፡ ዋላ’ኳ ቅኑዕ ባህሪ እንተሃለዎም፡ ስለዘይእውጅዎም፡ ጉጅለታትን መሳርሒታትን ግሉጽ ስያመ ክወሃቦም ይግባእ ። ኣብዚ ዝተዋህበ ኣብነታት፡ ንጥቀም aria-label
, ግን ከም ኣማራጺታት aria-labelledby
እውን ክጥቀሙ ይኽእሉ እዮም።
መሰረታዊ ኣብነት
ተኸታታሊ መጠወቒታት ብ .btn
in ጠቕልል .btn-group
።
ስብስባት ናይ <div class="btn-group">
ናብ ሓደ <div class="btn-toolbar">
ንዝያዳ ዝተሓላለኹ ባእታታት ምውህሃድ።
ሳይዚንግ ምግባር
ኣብ ክንዲ ኣብ ነፍሲ ወከፍ መጠወቒ ኣብ ሓደ ጉጅለ ናይ መጠወቒ ዓቐን ክፍልታት ምትግባር፡ ኣብ ነፍሲ ወከፍ ጥራይ ወስኸሉ .btn-group-*
፣ .btn-group
ንብዙሓት ጉጅለታት ክትሰፍር ከለኻ ሓዊስካ።
ምድቃል
ንቑልቁል ዝወርድ ምልክታታት ብተኸታታሊ መጠወቒታት ክሕወሱ ምስ እትደሊ ኣብ .btn-group
ውሽጢ ካልእ ኣቐምጦ ።.btn-group
ቀጥታዊ ለውጢ
ሓደ ስብስብ መጠወቒታት ብኣግማድ ዘይኮነስ ብቐጥታ ተደራሪቡ ከም ዝረአ ግበር። ኣብዚ ናይ ምፍንጫል መጠወቒ ንቑልቁል ዝወርድ ኣይድገፍን እዩ።
ምኽኑይ ዝኾኑ ናይ መጠወቒ ጉጅለታት
ሓደ ጉጅለ መጠወቒታት ንብምሉኡ ስፍሓት ወላዲኡ ዝሽፍን ብማዕረ ዓቐን ክዝርጋሕ ግበሮ። ከምኡ ውን ኣብ ውሽጢ ጉጅለ መጠወቒታት ምስ ዝወድቁ መጠወቒታት ይሰርሕ።
ኣተሓሕዛ ዶባት
ብሰንኪ እቲ ንመጠወቒታት ንምምኽናይ ዝጥቀመሉ ፍሉይ HTMLን CSSን (ማለት display: table-cell
)፡ ኣብ መንጎኦም ዘሎ ዶባት ብዕጽፊ ይውስኽ። ኣብ ስሩዓት ናይ መጠወቒ ጉጅለታት፡ ኣብ margin-left: -1px
ክንዲ ምእላይ ንዶባት ንምድማር ይጥቀመሉ። ይኹን margin
እምበር፡ ምስ display: table-cell
. ከም ውጽኢቱ ድማ፡ ከከምቲ ናብ ቡትስትራፕ ዝገበርካዮ ምምዕርራይ፡ ነቶም ዶባት ከተውጽኦም ወይ ዳግማይ ሕብሪ ክትህቦም ትደሊ ትኸውን።
IE8ን ዶባትን ምዃኑ’ዩ።
ኢንተርነት ኤክስፕሎረር 8 ኣብ ሓደ ዝተመኽነየ ናይ መጠወቒ ጉጅለ ኣብ ዝርከቡ መጠወቒታት ዶባት ኣይህብን እዩ፡ ንሱ ኣብ <a>
ይኹን <button>
ባእታታት። ካብዚ ንምእላይ ነፍሲ ወከፍ መጠወቒ ብኻልእ ጠቕልሎ .btn-group
.
ንዝያዳ ሓበሬታ #12476 ርአ ።
ምስ <a>
ባእታታት
በቃ ተኸታታሊ .btn
s ኣብ .btn-group.btn-group-justified
.
ከም መጠወቒታት ዝሰርሑ መላግቦታት
እቶም <a>
ባእታታት ከም መጠወቒታት ንኽሰርሑ ዝጥቀሙ እንተኾይኖም – ኣብ ውሽጢ ገጽ ንዘሎ ተግባር ዘበግሱ፡ ኣብ ክንዲ ናብ ካልእ ሰነድ ወይ ክፍሊ ኣብ ውሽጢ እቲ ህሉው ገጽ ምኻድ – ንዕኦም’ውን ዝምጥን role="button"
.
<button>
ምኽኑይ ዝኾኑ ናይ መጠወቒ ጉጅለታት ምስ ባእታታት ንምጥቃም ፡ ነፍሲ ወከፍ መጠወቒ ኣብ ሓደ ናይ መጠወቒ ጉጅለ ክትጠቕልሎ ኣለካ ። መብዛሕትኦም ዳህሰስቲ ንባእታታት ንምምኽናይ CSSና ብግቡእ ኣይጥቀሙን እዮም <button>
፡ ግን ንመጠወቒታት ንቑልቁል ዝወርድ ስለ እንድግፍ፡ ነዚ ክንፈትሖ ንኽእል ኢና።
ዝኾነ መጠወቒ ተጠቒምካ ንሓደ ንቑልቁል ዝወርድ ዝርዝር ኣብ ውሽጢ a ብምቕማጥን .btn-group
ግቡእ ምልክት ምልክት ብምሃብን ተጠቐም።
ንጽል መጠወቒ ንቑልቁል ዝወርድ
ንሓደ መጠወቒ ናብ ንቑልቁል ዝወርድ መቐያየሪ ምስ ገለ መሰረታዊ ለውጢ ምልክት ምቕያር።
ስፕሊት መጠወቒ ንቑልቁል ዝወርድ
ብተመሳሳሊ ተመሳሳሊ ናይ ምልክት ለውጢ ዘለዎም ናይ ዝተመቕሉ መጠወቒታት ንቑልቁል ዝወርድ ፍጠር፣ ብፍሉይ መጠወቒ ጥራይ።
ሳይዚንግ ምግባር
ንቑልቁል ዝወርድ መጠወቒታት ምስ ኩሉ ዓቐን ዘለዎም መጠወቒታት ይሰርሑ።
ምውዳቕ ፍልልይ
.dropup
ኣብ ልዕሊ ባእታታት ዝርከቡ ንቑልቁል ዝወርድ ምልክታታት ናብቲ ወላዲ ብምውሳኽ ኣበግስ ።
ቅድሚ፡ ድሕሪ ወይ ኣብ ክልቲኡ ወገን ዝኾነ ጽሑፍ ዝተመርኮሰ ጽሑፍ ወይ መጠወቒታት ብምውሳኽ ንመቆጻጸሪታት ቅጥዒ ኣናውሕ <input>
። .input-group
ምስ ሓደ .input-group-addon
ወይ .input-group-btn
ንሓደ ንጽል ባእታታት ንቕድሚት ንምንቅስቓስ ወይ ንምውሳኽ ተጠቐም .form-control
።
ጽሑፋዊ <input>
ስ ጥራይ
<select>
ኣብዚ ባእታታት ኣብ ዌብኪት ዳህሰስቲ ምሉእ ብምሉእ ቅዲ ክግበሩ ስለዘይክእሉ ካብ ምጥቃም ተቖጠቡ ።
<textarea>
ኣብዚ ባእታታት ካብ ምጥቃም ተቖጠብ ምኽንያቱ rows
ኣብ ገለ ገለ ኣጋጣሚታት ባህርያቶም ስለዘይክበር።
Tooltips & popovers ኣብ ናይ ምእታው ጉጅለታት ፍሉይ ቅጥዒ የድልዮም
ኣብ ውሽጢ ሓደ ኣብ ዝርከቡ ባእታታት መሳርሒታት ወይ ፖፖቨርስ ክትጥቀም ከለኻ ፡ ዘይተደልየ ጎናዊ ሳዕቤናት (ከም እቲ ባእታ እናሰፍሐን/ወይ ድማ እቲ መሳርሒ ወይ ፖፖቨር ክጅምር ከሎ ክቡብ ኩርናዓቱ ምጥፋእን) ንምውጋድ ዝሕግዝ .input-group
ኣማራጺ ክትገልጽ ክትግደድ ኢኻ ።container: 'body'
ኣብ ክልቲኡ ወገን ናይ ሓደ ምእታው ሓደ ተወሳኺ ወይ መጠወቒ ኣቐምጥ። ሓደ ኣብ ክልቲኡ ወገን ናይ ሓደ እታው እውን ከተቐምጥ ትኽእል ኢኻ።
ብሓደ ወገን ብዙሓት ተወሳኺ ( .input-group-addon
ወይ ) ኣይንድግፍን ኢና ።.input-group-btn
ኣብ ሓደ ናይ ምእታው ጉጅለ ብዙሓት ቅጥዒ-ቁጽጽር ኣይንድግፍን ኢና።
ነቶም ኣንጻራዊ ናይ ቅጥዒ ዓቐን ክፍልታት ናብ .input-group
ባዕሉ ወስኹሎም እሞ ኣብ ውሽጢ ዘለዉ ትሕዝቶታት ብኣውቶማቲክ ዓቐን ክቕይሩ እዮም-ኣብ ነፍሲ ወከፍ ባእታ ናይ ቅጥዒ ቁጽጽር ዓቐን ክፍልታት ምድጋም ኣየድልን።
ዝኾነ ናይ ምልክት ሳጹን ወይ ናይ ሬድዮ ኣማራጺ ኣብ ክንዲ ጽሑፍ ኣብ ውሽጢ ናይ ሓደ ናይ ምእታው ጉጅለ ኣድዶን ኣቐምጦ።
ኣብ ጉጅለታት ምእታው ዝርከቡ መጠወቒታት ቁሩብ ዝተፈላለዩ ኮይኖም ሓደ ተወሳኺ ደረጃ ምድቃል የድልዮም። ኣብ ክንዲ ፡ ነቶም መጠወቒታት ንምጥቕላል .input-group-addon
ክትጥቀመሉ ከድልየካ እዩ ። .input-group-btn
እዚ ብሰንኪ ነባሪ ቅዲታት መርበብ ሓበሬታ ክግለጽ ዘይክእል እዩ ዘድሊ።
ኣብ ነፍሲ ወከፍ ወገን ሓደ ተወሳኺ ጥራይ ክህልወካ ዝኽእል እኳ እንተኾነ፡ ኣብ ውሽጢ ሓደ ሓደ ግን ብዙሓት መጠወቒታት ክህልዉኻ ይኽእሉ እዮም .input-group-btn
።
ኣብ Bootstrap ዝርከቡ Navs ካብ base class ጀሚሮም shared markup ኣለዎም .nav
፣ ከምኡ ውን shared states ኣለዎም። ኣብ መንጎ ነፍሲ ወከፍ ቅዲ ንምቕያር ናይ መቐየሪ ክፍልታት ምቕያር።
ከም ናቪጌሽን ዝጥቀሙ navs ተበጻሕቲ ምግባር
ናይ ምድህሳስ ባር ንምሃብ navs ትጥቀም እንተኾንካ role="navigation"
፡ ኣብቲ ዝያዳ ስነ-መጐታዊ ወላዲ መትሓዚ ናይቲ ምውሳኽካ ኣረጋግጽ፣ ወይ ድማ ኣብ ዙርያ ምሉእ ምድህሳስ <ul>
ሓደ ባእታ ምጥቕላል ። እዚ ብተሓጋገዝቲ ቴክኖሎጂታት ከም ጭቡጥ ዝርዝር ከይግለጽ ስለ ዝኽልክሎ <nav>
፡ ነቲ ተራ ኣብቲ ንባዕሉ ኣይትውሰኾ።<ul>
ትቦታት
ኣስተውዕል እቲ ክፍሊ መሰረታዊ ክፍሊ .nav-tabs
ይሓትት ።.nav
ከኒናታት
ንሱ ተመሳሳሊ ኤችቲኤምኤል ውሰድ .nav-pills
፡ ኣብ ክንድኡ ግን ተጠቐም፤
ከኒናታት እውን ብቐጥታ ዝድምር እዩ። በቃ ወስኹሉ .nav-stacked
.
ርትዓዊ ዝኾነ
ብቐሊሉ ትቦታት ወይ ከኒናታት ማዕረ ስፍሓት ወላዲኦም ኣብ ልዕሊ 768px ዝሰፍሐ ስክሪናት ምስ .nav-justified
. ኣብ ንኣሽቱ ስክሪናት፡ እቶም nav ሊንክታት ተደራሪቦም ይርከቡ።
ምኽኑይ ዝኾኑ navbar nav መላግቦታት ኣብዚ እዋን እዚ ኣይድገፉን እዮም።
ሳፋሪን ምላሽ ዝህብን ምኽኑይ navs
ካብ v9.1.2 ጀሚሩ፡ ሳፋሪ ንዓቐን መርበብ ሓበሬታኻ ብኣግማድ ምቕያር ኣብቲ ምኽኑይ nav ናይ ምቕራብ ጌጋታት ዘስዕብ ስሕተት ዘርኢ ኮይኑ፡ ምስ ምሕዳስ ዝጽረግ እዩ። እዚ ስሕተት ኣብቲ ዝተመኽነየ nav ኣብነት ’ ውን ተገሊጹ ኣሎ ።
ስንክልና ዘለዎም መላግቦታት
ንዝኾነ nav ክፍሊ (tabs ወይ ከኒናታት) ፡ ንሓምላይ መላግቦታትን ዝኾነ hover effects.disabled
ን ወስኸሉ ።
ናይ ምትእስሳር ተግባር ኣይተጸልወን
እዚ ክፍሊ እዚ ንመልክዕ 's ጥራይ እዩ ዝቕይሮ <a>
እምበር ንተግባራውነቱ ኣይኮነን። ኣብዚ ንዘለዉ መላግቦታት ንምዕጻው ብሕታዊ ጃቫስክሪፕት ተጠቐም።
ንቑልቁል ዝወርድ ነገራት ምጥቃም
ቁሩብ ተወሳኺ ኤችቲኤምኤል ዘለዎም ንቑልቁል ዝወርድ ምልክታታትን ንቑልቁል ዝወርድ ጃቫስክሪፕት ፕላግ-ኢንን ወስኹ ።
ንቑልቁል ዝወርድ ትቦታት
ከኒና ምስ ንጣብ ንጣብ
ነባሪ ናቭባር
ናቭባር ንመተግበሪኻ ወይ መርበብ ሓበሬታኻ ከም ርእሲ ምድህሳስ ዘገልግሉ ምላሽ ዝህቡ ሜታ ኣካላት እዮም። ኣብ ተንቀሳቓሲ ርእይቶታት ተደፊኦም ይጅምሩ (እሞ ድማ ክቕየሩ ይኽእሉ) እሞ እቲ ዝርከብ ስፍሓት ቪውፖርት እናወሰኸ ምስ ከደ ኣግማድ ይኾኑ።
ምኽኑይ ዝኾኑ navbar nav መላግቦታት ኣብዚ እዋን እዚ ኣይድገፉን እዮም።
ምሉእ ትሕዝቶ ዘለዎ
ቡትስትራፕ ኣብ ናቭባርካ ዘሎ ትሕዝቶ ክንደይ ቦታ ከም ዘድልዮ ስለዘይፈልጥ፡ ትሕዝቶ ኣብ ካልኣይ መስርዕ ምጥቕላል ዝምልከት ጸገማት ከጋጥመካ ይኽእል እዩ። ነዚ ንምፍታሕ ድማ፤
- መጠን ወይ ስፍሓት ናይ ናቭባር ኣቑሑት ምጉዳል።
- ምላሽ ዝህቡ ናይ ዩቲሊቲ ክፍልታት ብምጥቃም ኣብ ዝተወሰኑ ናይ ስክሪን ዓቐናት ዝተወሰኑ ናይ ናቭባር ነገራት ሕባእ ።
- ናቭባርካ ኣብ መንጎ ዝተዓጽወን ኣግማድን ሞድ ዝቕይረሉ ነጥቢ ቀይሮ። ነቲ ተለዋዋጢ ኣመዓራርዮ
@grid-float-breakpoint
ወይ ናይ ገዛእ ርእስኻ ናይ ሚድያ ሕቶ ወስኸሉ።
ጃቫስክሪፕት ፕላግ-ኢን የድልዮ
ጃቫስክሪፕት እንተተሰናኺሉን እቲ ቪውፖርት ጸቢብ እንተኾይኑን እቲ ናቭባር ዝፈርስ እንተኾይኑ፡ ነቲ ናቭባር ምግፋሕን ኣብ ውሽጢ እቲ ትሕዝቶ ምርኣይን ዘይከኣል ክኸውን እዩ .navbar-collapse
።
እቲ ምላሽ ዝህብ navbar እቲ collapse plugin ኣብ ናትካ ስሪት Bootstrap ክካተት ይጠልብ።
ነቲ ዝፈረሰ ሞባይል navbar breakpoint ምቕያር
እቲ navbar ናብቲ ቀጥታዊ ተንቀሳቓሲ ትርኢትኡ ዝፈርስ እቲ ቪውፖርት ካብ ዝጸበበ ምስ ዝኸውን @grid-float-breakpoint
፣ እቲ ቪውፖርት እንተወሓደ @grid-float-breakpoint
ብስፍሓት ምስ ዝኸውን ድማ ናብቲ ልኡም ዘይተንቀሳቓሲ ቪውኡ ይሰፍሕ። ነዚ ተለዋዋጢ ኣብቲ Less source ኣስተኻኽሎ፡ እቲ navbar መዓስ ከም ዝፈርስ/ክሰፍሕ ንምቁጽጻር። እቲ ነባሪ ዋጋ 768px
(እቲ ዝነኣሰ "ንእሽቶ" ወይ "ጣብላ" ስክሪን) እ���።
navbars ተበጻሕቲ ምግባር
ሓደ ባእታ ምጥቃምካ ኣረጋግጽ <nav>
ወይ ድማ፡ ከም a ዝኣመሰለ ዝያዳ ሓፈሻዊ ባእታ እንተተጠቒምካ፡ ኣብ ነፍሲ ወከፍ ናቭባር <div>
a ወስኸሉ role="navigation"
፡ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት ከም ምልክት ዞባ ብግልጺ ከተለልዮ።
ምስሊ ምልክት ንግዲ
ነቲ ጽሑፍ ብሓደ ብምቕያር ነቲ ናይ navbar ምልክት ብናይ ገዛእ ርእስኻ ምስሊ ተክኦ <img>
። እቲ .navbar-brand
ናይ ገዛእ ርእሱ ፓዲንግን ቁመትን ስለዘለዎ፡ ከከም ምስልኻ ገለ CSS ክትሽፍኖ ከድልየካ ይኽእል እዩ።
ትሕዝቶ ቅጥዒ ኣብ ውሽጢ .navbar-form
ንግቡእ ቀጥታዊ ኣሰላልፋን ዝተዓጽወ ባህርን ኣብ ጸበብቲ መዘናግዒታት ኣቐምጦ። ኣብ ውሽጢ ትሕዝቶ ናቭባር ኣበይ ከም ዝነብር ንምውሳን ናይ ኣሰላልፋ ኣማራጺታት ተጠቐም።
ከም ሓደ heads up, .navbar-form
ዝበዝሕ ኮዱ ምስ .form-inline
via mixin ይካፈል። ገለ ቁጽጽር ቅጥዒ፡ ከም ናይ ምእታው ጉጅለታት፡ ኣብ ውሽጢ ናቭባር ብግቡእ ክረኣዩ ውሱናት ስፍሓት ክጠልቡ ይኽእሉ።
ነቲ .navbar-btn
ክፍሊ <button>
ኣብ a ዘይነብሩ ባእታታት <form>
ወስኾም ኣብቲ navbar ብቐጥታ ማእከል ምግባር።
ንዓውዲ ዝምልከት ኣጠቓቕማ
ከምቲ መደበኛ መጠወቒ ክፍልታት , ኣብን ባእታታትን .navbar-btn
ክጥቀም ይኽእል ። ይኹን እምበር፡ ክልቲኦም ወይ እቶም መደበኛ ክፍልታት መጠወቒ ኣብ ውሽጢ ዝርከቡ ባእታታት ክጥቀሙ የብሎምን ።<a>
<input>
.navbar-btn
<a>
.navbar-nav
ጽሑፍ
ንሕብረ ቃላት ኣብ ሓደ ባእታ ብ .navbar-text
፣ መብዛሕትኡ ግዜ ኣብ <p>
መለለዪ ንግቡእ መሪሕነትን ሕብርን ጠቕልል።
ዘይ-nav ሊንክታት
ኣብ ውሽጢ ስሩዕ ናይ ናቭባር ምድህሳስ ክፍሊ ዘይርከቡ መደበኛ መላግቦታት ዝጥቀሙ ሰባት፡ ነቲ .navbar-link
ክፍሊ ተጠቐም ንናይ ነባሪን ተገላባጥን ናይ ናቭባር ኣማራጺታት ግቡእ ሕብርታት ንምውሳኽ።
ኣሰላልፋ ኣካላት
ናይ nav መላግቦታት፣ ቅጥዕታት፣ መጠወቒታት ወይ ጽሑፍ ኣሰላልፍ፣ ነቲ .navbar-left
ወይ .navbar-right
ዩቲሊቲ ክፍልታት ተጠቒምካ። ክልቲኦም ክፍልታት ኣብቲ ዝተወሰነ ኣንፈት CSS ፍሎት ክውስኹ እዮም። ንኣብነት nav links ንምስምማዕ <ul>
፡ ኣብቲ ዝምልከቶ utility class ተግባራዊ ብምግባር ኣብ ፍሉይ ኣቐምጦም።
እዞም ክፍልታት እዚኦም mixin-ed ስሪት ናይ .pull-left
and .pull-right
እዮም፣ ግን ንቐሊል ኣተሓሕዛ ናይ navbar ኣካላት ኣብ መላእ ዓቐናት መሳርሒታት ናብ ሚድያ ሕቶታት ስፍሓት ኣለዎም።
ብዙሓት ኣካላት ብየማን ምምዕርራይ
ኣብዚ እዋን እዚ ናቭባር ምስ ብዙሓት .navbar-right
ክፍልታት ደረት ኣለዎም። .navbar-right
ትሕዝቶ ብግቡእ ቦታ ንምሃብ ኣብቲ ናይ መወዳእታ ባእታ ኣሉታዊ ወሰን ንጥቀም ። ነቲ ክፍሊ ዝጥቀሙ ብዙሓት ባእታታት ክህልዉ ከለዉ፡ እዞም ወሰን ከምቲ ዝተሓሰበሉ ኣይሰርሑን እዮም።
ነዚ ዳግማይ ክንርእዮ ኢና፡ ነቲ ክፍሊ ኣብ v4 ዳግማይ ክንጽሕፎ ምስ እንኽእል።
ናብ ላዕሊ ተቐሚጡ
.navbar-fixed-top
ሓደ .container
ወይ .container-fluid
ናብ ማእከልን ፓድ ናቭባር ትሕዝቶን ወስኹን ኣካትቱን ።
ናይ ኣካላት መሸፈኒ የድሊ
እቲ ጽኑዕ ናቭባር ንኻልእ ትሕዝቶኻ ክድብሶ እዩ፣ padding
ኣብ ላዕሊ ናይቲ <body>
. ናይ ገዛእ ርእስኹም ክብርታት ፈትኑ ወይ ኣብ ታሕቲ ዘሎ ቁንጣሮ ጽሑፍና ተጠቐሙ። ምኽሪ፦ ብነባሪ መልክዑ፡ እቲ navbar 50px ቁመት ኣለዎ።
ድሕሪ እቲ ቀንዲ Bootstrap CSS ነዚ ምሕዋስኩም ኣረጋግጹ ።
ናብ ታሕቲ ተቐሚጡ
.navbar-fixed-bottom
ሓደ .container
ወይ .container-fluid
ናብ ማእከልን ፓድ ናቭባር ትሕዝቶን ወስኹን ኣካትቱን ።
ናይ ኣካላት መሸፈኒ የድሊ
እቲ ጽኑዕ ናቭባር ንኻልእ ትሕዝቶኻ ክድብሶ እዩ፣ padding
ኣብ ታሕቲ ናይቲ <body>
. ናይ ገዛእ ርእስኹም ክብርታት ፈትኑ ወይ ኣብ ታሕቲ ዘሎ ቁንጣሮ ጽሑፍና ተጠቐሙ። ምኽሪ፦ ብነባሪ መልክዑ፡ እቲ navbar 50px ቁመት ኣለዎ።
ድሕሪ እቲ ቀንዲ Bootstrap CSS ነዚ ምሕዋስኩም ኣረጋግጹ ።
ስታትቲክ ላዕለዋይ ክፋል
ምሉእ ስፍሓት ዘለዎ ናቭባር ፍጠር እሞ ምስቲ ገጽ ዝሽክርከር ወይ ናብ ማእከል ብምውሳኽን .navbar-static-top
ብምሕዋስን ትሕዝቶ ናቭባር ፓድ ምግባርን።.container
.container-fluid
ዘይከምቲ .navbar-fixed-*
ክፍልታት፡ ኣብቲ body
.
ዝተገልበጠ ናቭባር
መልክዕ ናይቲ navbar ብምውሳኽ ኣዐርዮ .navbar-inverse
።
ኣብ ውሽጢ ሓደ ናይ ምድህሳስ ስርዓተ-መሰረት ናይቲ ናይ ሕጂ ገጽ ኣቀማምጣ ኣመልክት።
መፍለዪታት ብኣውቶማቲክ ኣብ CSS :before
ብመንገዲን content
.
ንመርበብ ሓበሬታኻ ወይ መተግበሪኻ ዝኸውን ናይ ገጽ መላግቦታት ምስቲ ብዙሕ ገጻት ዘለዎ ናይ ገጽ ገጽ ክፍሊ ኣቕርብ፣ ወይ ድማ እቲ ዝቐለለ ኣማራጺ ገጽ .
ብ Rdio ዝተደፋፍአ ቀሊል ገጽ ምግባር፣ ንኣፕስን ውጽኢት ምድላይን ብሉጽ። እቲ ዓቢ ብሎክ ክትሓልፎ ኣጸጋሚ፡ ብቐሊሉ ዝዓቢ፡ ዓበይቲ ናይ ጠውቂ ቦታታት ዝህብ እዩ።
ስንኩላን ንጡፋትን ኩነታት
ሊንክታት ንዝተፈላለየ ኩነታት ዝምጥን እዩ። .disabled
ንዘይጥወቕ መላግቦታትን .active
ናይ ሕጂ ገጽ ንምምልካትን ተጠቐም ።
ንጡፋት ወይ ዘይተዓጽዉ መልህቕ ብ ፡ ክትቅይሮም፡ ወይ <span>
ድማ ኣብ ጉዳይ ናይቶም ዝሓለፉ/ዝቕጽሉ ፍላጻታት ነቲ መልህቕ ክትገድፎ፡ ንዝተሓሰቡ ቅዲታት እናዓቀብካ ናይ ጠውቂ ተግባር ንምእላይ ንመክር።
ሳይዚንግ ምግባር
ፋንሲ ዝዓበየ ድዩ ዝነኣሰ ገጽ? ምውሳኽ .pagination-lg
ወይ .pagination-sm
ንተወሳኺ ዓቐናት።
ቅልጡፍ ቅድሚትን ዝቕጽልን መላግቦታት ንቐሊል ናይ ገጽ ኣተገባብራታት ምስ ብርሃን ምልክትን ቅዲታትን። ንቐለልቲ መርበባት ሓበሬታ ከም ብሎግ ወይ መጽሔት ብሉጽ እዩ።
ነባሪ ኣብነት
ብነባሪ መልክዑ፡ እቲ ፔጀር ንመላግቦታት የማእከሎም።
ዝተሰለፉ መላግቦታት
ከም ኣማራጺ ድማ ነፍሲ ወከፍ መላግቦ ናብ ጎድኒ ከተመዓራርዮ ትኽእል ኢኻ፤
ኣማራጺ ስንክልና ዘለዎ ኩነታት
.disabled
ፔጀር ሊንክታት እውን ካብቲ ገጽ ምግባር ዝመጽእ ሓፈሻዊ ዩቲሊቲ ክላስ ይጥቀሙ ።
ኣብነት
ኣብነት ኣርእስቲ ሓድሽ
ኣብነት ኣርእስቲ ሓድሽ
ኣብነት ኣርእስቲ ሓድሽ
ኣብነት ኣርእስቲ ሓድሽ
ኣብነት ኣርእስቲ ሓድሽ
ኣብነት ኣርእስቲ ሓድሽ
ዝርከቡ ፍልልያት
መልክዕ ናይ ሓደ ስያመ ንምቕያር ዝኾነ ካብዞም ኣብ ታሕቲ ዝተጠቕሱ ናይ መቐየሪ ክፍልታት ወስኹ።
ነባሪ
ቀዳማይ
ዓወት
ሓበሬታ
መጠንቀቕታ
ሓደጋ
ቶናት ምልክታት ኣለዎም?
ኣብ ውሽጢ ሓደ ጸቢብ መትሓዚ ዓሰርተታት ናይ ውሽጢ መስመር ስያመታት ምስ ዝህልወካ ናይ ምቕራብ ጸገማት ክለዓል ይኽእል፣ ነፍሲ ወከፎም ናይ ገዛእ ርእሶም inline-block
ባእታ (ከም ምልክት) ዝሓዙ እዮም። ነዚ ዝኸውን መንገዲ ምቕማጥ ’ ዩ display: inline-block;
። ንዓውደ-ጽሑፍን ኣብነትን #13219 ርአ ።
<span class="badge">
a to links, Bootstrap navs, ካልእን ብምውሳኽ ሓደስቲ ወይ ዘይተነበቡ ነገራት ብቐሊሉ ኣጉልሕ ።
ነብስኻ ምፍራስ
ሓደስቲ ወይ ዘይተነበቡ ነገራት ኣብ ዘይህልዉሉ እዋን :empty
፡ ኣብ ውሽጢ ዝኾነ ትሕዝቶ እንተዘይሃልዩ፡ ባጅ ብቐሊሉ ክዓጽዉ እዮም (ብመንገዲ መምረጺ CSS)።
ስግረ-ብራውዘር ምትእስሳር
ባጅ ኣብ ኢንተርነት ኤክስፕሎረር 8 ንመምረጺ ዝኸውን ደገፍ ስለ ዝጎደሎ ባዕሉ ኣይዓጽዎን እዮም :empty
።
ምስ ንጡፋት nav states ይላመድ
ኣብ ንጡፋት ግዝኣታት ኣብ ከኒና ምምራሕ ባጅ ንምቕማጥ ኣብ ውሽጢ ዝተሃንጹ ቅዲታት ተሓዊሶም ኣለዉ።
ኣብ መርበብ ሓበሬታኻ ቁልፊ ትሕዝቶ ንምርኣይ ብኣማራጺ ንኹሉ ቪውፖርት ከናውሕ ዝኽእል ቀሊልን ተዓጻጻፍን ኣካል።
ሰላም ዓለም!
እዚ ቀሊል ጅግና ኣሃዱ እዩ፣ ንፍሉይ ትሕዝቶ ወይ ሓበሬታ ተወሳኺ ኣቓልቦ ንምጽዋዕ ዝሕግዝ ቀሊል ጃምቦትሮን-ቅዲ ባእታ እዩ።
ተወሳኺ ፍለጡ
ነቲ ጃምቦትሮን ምሉእ ስፍሓት ንኽህልዎ፡ ከምኡ’ውን ብዘይ ክቡብ ኩርናዓት፡ ካብ ኩሉ s ወጻኢ ኣቐምጦ ኣብ ክንድኡ ድማ ውሽጢ .container
ወስኸሉ ።.container
h1
ንሓደ ኣብ ሓደ ገጽ ዝርከቡ ክፍልታት ትሕዝቶ ብግቡእ ንምውጻእን ንምክፋልን ዝሕግዝ ቀሊል ሸል ። ነቲ h1
's ነባሪ small
ባእታ ክጥቀመሉ ይኽእል እዩ፣ ከምኡውን መብዛሕትኦም ካልኦት ኣካላት (ምስ ተወሳኺ ቅዲታት)።
ንናይ ቡትስትራፕ ስርዓተ ሽቦ ብናይ ንእሽቶ ስእሊ ክፍሊ ኣናዊሕካ ብቐሊሉ ሽቦታት ምስልታት፡ ቪድዮታት፡ ጽሑፍን ካልእን ንምርኣይ።
ከም Pinterest ዝመስል ኣቀራርባ ዝተፈላለየ ቁመትን/ወይ ስፍሓትን ዘለዎም ንኣሽቱ ስእልታት ትደልዩ እንተኾይንኩም፡ ከም Masonry , Isotope , ወይ Salvattore ዝኣመሰለ ናይ ሳልሳይ ወገን ፕላግ-ኢን ክትጥቀሙ ከድልየኩም እዩ ።
ነባሪ ኣብነት
ብነባሪ መልክዑ፡ ንኣሽቱ ስእልታት ቡትስትራፕ፡ ዝተኣሳሰሩ ምስልታት ብውሑድ ዘድሊ ምልክት ንምርኣይ ዝተዳለዉ እዮም።
ብሕታዊ ትሕዝቶ
ቁሩብ ተወሳኺ ምልክት ብምግባር፡ ዝኾነ ዓይነት ትሕዝቶ ኤችቲኤምኤል ከም ኣርእስታት፡ ሕጡበ-ጽሑፋት፡ ወይ መጠወቒታት ኣብ ንኣሽቱ ስእልታት ምውሳኽ ይከኣል።
ንእሽቶ ስእሊ ምልክት
ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.
መጠወቒ መጠወቒ
ንእሽቶ ስእሊ ምልክት
ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.
መጠወቒ መጠወቒ
ንእሽቶ ስእሊ ምልክት
ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.
መጠወቒ መጠወቒ
ንልሙዳት ተግባራት ተጠቃሚ ምስ ብኣጻብዕ ዝቑጸሩ ዝርከቡን ተዓጻጻፍን ናይ መጠንቀቕታ መልእኽትታት ዓውደ-ጽሑፋዊ ግብረ-መልሲ መልእኽትታት ምቕራብ።
ኣብነታት
ዝኾነ ጽሑፍን ኣማራጺ ናይ ምብራር መጠወቒን ኣብን .alert
ሓደ ካብቶም ኣርባዕተ ዓውደ-ጽሑፋዊ ክፍልታት (ንኣብነት .alert-success
፡ ) ንመሰረታዊ መልእኽትታት መጠንቀቕታ ጠቕልል።
ነባሪ ክፍሊ የለን
መጠንቀቕታታት ነባሪ ክፍልታት የብሎምን፣ መሰረታዊን መቐየሪን ክፍልታት ጥራይ እዮም። ነባሪ ግራጭ መጠንቀቕታ ብዙሕ ትርጉም የብሉን፣ ስለዚ ብመንገዲ ዓውደ-ጽሑፍ ክፍሊ ሓደ ዓይነት ክትገልጽ ይግደድ። ካብ ዓወት፡ ሓበሬታ፡ መጠንቀቕታ፡ ወይ ሓደጋ ምረጽ።
ጽቡቕ ተሰሪሑ! ነዚ ኣገዳሲ ናይ መጠንቀቕታ መልእኽቲ ብዓወት ኣንቢብካዮ።
ርእሲ ንላዕሊ! እዚ መጠንቀቕታ ኣቓልቦኻ የድልዮ እዩ፡ ግን ልዕሊ ዓቐን ኣገዳሲ ኣይኮነን።
ምኸዳን! ዝሓሸ ንነብስኻ ምፍታሽ፡ ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ።
ኣየ ስናፕ! ገለ ገለ ነገራት ቀይርካ እንደገና ከተቕርብ ፈትን።
ካብ ስራሕ ዝእለ መጠንቀቕታታት
.alert-dismissible
ኣብ ዝኾነ መጠንቀቕታ ኣማራጺን ምዕጻውን መጠወቒ ብምውሳኽ ምህናጽ ።
ምኸዳን! ዝሓሸ ንነብስኻ ምፍታሽ፡ ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ።
ኣብ መጠንቀቕታታት ዝርከቡ መላግቦታት
.alert-link
ኣብ ውሽጢ ዝኾነ መጠንቀቕታ ብቕልጡፍ ዝሰማማዕ ሕብራዊ መላግቦታት ንምሃብ ነቲ ናይ ዩቲሊቲ ክፍሊ ተጠቐም ።
ብዛዕባ ምዕባለ ዋሕዚ ስራሕ ወይ ስጉምቲ ብቐሊል ግን ከኣ ተዓጻጻፊ ናይ ምዕባለ ምልክታት እዋናዊ ርእይቶ ምሃብ።
ስግረ-ብራውዘር ምትእስሳር
ፕሮግረስ ባር ገለ ካብ ውጽኢታቶም ንምዕዋት CSS3 መሰጋገሪታትን ኣኒሜሽንን ይጥቀሙ። እዞም ባህርያት ኣብ ኢንተርነት ኤክስፕሎረር 9ን ትሕቲኡን ወይ ኣብ ዝኣረጉ ስሪት ፋየርፎክስ ኣይድገፉን እዮም። ኦፔራ 12 ኣኒሜሽን ኣይድግፍን እዩ።
ትሕዝቶ ድሕነት ፖሊሲ (CSP) ምትእስሳር
መርበብ ሓበሬታኻ ዘይፈቅድ ፖሊሲ ድሕነት ትሕዝቶ (CSP) እንተሃልይዎ ፣ ሽዑ ከምቲ ኣብ ታሕቲ ኣብነታትና ዝተገልጸ ስፍሓት ባር ምዕባለ ንምቕማጥ ኣብ style-src 'unsafe-inline'
መስመር ዝርከቡ ባህርያት ክትጥቀም ኣይትኽእልን ኢኻ ። style
ምስ ጽኑዓት CSPs ዝሰማምዑ ስፍሓት ንምቕማጥ ኣማራጺ ሜላታት ንእሽቶ ብሕታዊ ጃቫስክሪፕት ምጥቃም (that sets element.style.width
) ወይ ብሕታዊ CSS ክፍልታት ምጥቃም የጠቓልል።
መሰረታዊ ኣብነት
ነባሪ ናይ ምዕባለ ባር።
ምስ ምልክት
ዝርአ ሚእታዊት ንምርኣይ ነቲ <span>
with class ካብ ውሽጢ progress bar ኣውጽእዎ ።.sr-only
እቲ ናይ ስያመ ጽሑፍ ዋላ ንትሑት ሚእታዊት ተነባቢ ኮይኑ ከም ዝጸንሕ ንምርግጋጽ፡ ኣብቲ min-width
ናይ ምዕባለ ባር a ምውሳኽ ኣብ ግምት ኣእቱ።
ዓውደ-ጽሑፋዊ ኣማራጺታት
ናይ ምዕባለ ባር ገለ ካብ ሓደ ዓይነት መጠወቒን ንዘይተለዋወጠ ቅዲታት ናይ መጠንቀቕታ ክፍልታትን ይጥቀሙ።
ስሪት ዘለዎ
ስሪት ዘለዎ ውጽኢት ንምፍጣር ግራድየንት ይጥቀም። ኣብ IE9ን ትሕቲኡን ኣይርከብን።
ተንቀሳቓሲ ስእሊ
ነቶም መስመራት ካብ የማን ናብ ጸጋም ህያው .active
ንምግባር ናብ ወስኹሉ ። .progress-bar-striped
ኣብ IE9ን ትሕቲኡን ኣይርከብን።
ተደራሪቡ ኣሎ።
ብዙሓት ባር ኣብ ሓደ ኣቐምጦም .progress
ንኽትድምር።
35% ምሉእ (ዓወት)
20% ምሉእ ( መጠንቀቕታ)
10% ምሉእ (ሓደጋ)
ዝተፈላለዩ ዓይነታት ባእታታት (ከም ርእይቶታት ብሎግ፡ ትዊት ወዘተ) ንምህናጽ ዝሕግዙ ኣብስትራክት ነገራት ቅዲታት፡ ጎኒ ጎኒ ጽሑፋዊ ትሕዝቶ ብጸጋም ወይ ብየማን ዝተሰለፈ ምስሊ ዘርእዩ።
እቲ ነባሪ ሚድያ ንሓደ ናይ ሚድያ ነገር (ስእልታት፡ ቪድዮ፡ ድምጺ) ብጸጋም ወይ የማን ናይ ሓደ ትሕዝቶ ብሎክ የቕርብ።
እቶም ክፍልታትን .pull-left
ከምኡ’ውን .pull-right
ኣለዉን ቅድሚ ሕጂ ከም ኣካል ናይቲ ሚድያ ክፍሊ ይጥቀሙ ነይሮምን፣ ግን ካብ v3.3.0 ንእቲ ኣጠቓቕማ ተኣልዮም ኣለዉ። ብግምት ምስን ማዕረ እዮም .media-left
፣ .media-right
ብዘይካ እቲ ድሕሪ እቲ ኣብ html .media-right
ክቕመጥ ዘለዎ ።.media-body
እቶም ምስልታት ወይ ካልእ መራኸቢ ብዙሃን ኣብ ላዕሊ፡ ማእከላይ ወይ ታሕቲ ክስለፉ ይኽእሉ። እቲ ነባሪ ኣብ ላዕሊ ዝተሰለፈ እዩ።
ቁሩብ ተወሳኺ ምልክት ብምግባር፡ ኣብ ውሽጢ ዝርዝር ሚድያ ክትጥቀም ትኽእል ኢኻ (ንፈትሊ ርእይቶታት ወይ ዝርዝር ጽሑፋት ጠቓሚ)።
ዝርዝር ጉጅለታት ቀለልቲ ዝርዝር ባእታታት ጥራይ ዘይኮነስ፡ ዝተሓላለኹ ምስ ብሕታዊ ትሕዝቶ ንምግላጽ ተዓጻጻፍን ሓያልን ባእታ እዩ።
መሰረታዊ ኣብነት
እቲ ኣዝዩ መሰረታዊ ዝኾነ ዝርዝር ጉጅለ ብቐሊሉ ዘይተሰርዐ ዝርዝር ምስ ዝርዝር ነገራት፣ ከምኡውን ግቡእ ክፍልታት እዩ። ኣብ ልዕሊኡ በቶም ዝስዕቡ ኣማራጺታት ምህናጽ፣ ወይ ከም ኣድላይነቱ ናይ ገዛእ ርእስኻ CSS።
- ክራስ ጁስቶ ኦዲዮ
- ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
- ሞርቢ ልዮ ሪሱስ
- ፖርታ ኣሲ ኮንሰክተቱር ኣሲ
- ቬስቲቡሉም ኣብ ኤሮስ
ባጅታት
ነቲ ናይ ባጅ ክፍሊ ኣብ ዝኾነ ናይ ዝርዝር ጉጅለ ኣቕሓ ወስኾ እሞ ብኣውቶማቲክ ኣብ የማን ክቕመጥ እዩ።
- 14ክራስ ጁስቶ ኦዲዮ
- 2.ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
- 1.ሞርቢ ልዮ ሪሱስ
ዝተኣሳሰሩ ነገራት
ኣብ ክንዲ ዝርዝር ነገራት መልህቕ መለለዪታት ብምጥቃም ዝርዝር ጉጅለ ነገራት ኣተሓሕዞም (እዚ ውን ኣብ <div>
ክንዲ ወላዲ ማለት እዩ <ul>
)። ኣብ ዙርያ ነፍሲ ወከፍ ባእታ ውልቀ ወለዲ ኣየድልን።
ናይ ዝርዝር ጉጅለ ነገራት ኣብ ክንዲ ናይ ዝርዝር ነገራት መጠወቒታት ክኾኑ ይኽእሉ እዮም (እዚ ውን ኣብ <div>
ክንዲ ወላዲ ማለት እዩ <ul>
)። ኣብ ዙርያ ነፍሲ ወከፍ ባእታ ውልቀ ወለዲ ኣየድልን። ኣብዚ እቶም ስታንዳርድ ክፍልታት ኣይትጠቐሙ ።.btn
ስንኩላን ዝኾኑ ነገራት
ስንክልና ዘለዎ ኮይኑ ንኽመስል .disabled
ናብ a ምውሳኽ ።.list-group-item
ዓውደ-ጽሑፋዊ ክፍልታት
ንኣቑሑት ቅዲ ዝርዝር ንምግባር ዓውደ-ጽሑፋዊ ክፍልታት ተጠቐም፣ ነባሪ ወይ ዝተኣሳሰሩ። መንግስቲ እውን የጠቓልል .active
።
- ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
- ክራስ ኮፍ ኣመት ኒብህ ሊበሮ
- ፖርታ ኣሲ ኮንሰክተቱር ኣሲ
- ቬስቲቡሉም ኣብ ኤሮስ
ብሕታዊ ትሕዝቶ
ዳርጋ ዝኾነ ኤችቲኤምኤል ኣብ ውሽጢ ምውሳኽ፣ ዋላ ንከምዚ ኣብ ታሕቲ ዘሎ ዝተኣሳሰሩ ናይ ዝርዝር ጉጅለታት።
ኩሉ ግዜ ኣድላዪ እኳ እንተዘይኮነ፡ ሓደ ሓደ ግዜ ናትካ DOM ኣብ ሳንዱቕ ከተቐምጦ የድልየካ። ነቶም ኩነታት፡ ነቲ ናይ ፓነል ክፍሊ ፈትኖ።
መሰረታዊ ኣብነት
ብነባሪ፡ ኩሉ እቲ .panel
ዝገብሮ ገለ መሰረታዊ ዶብን ፓዲንግን ገለ ትሕዝቶ ንምሓዝ ምትግባር እዩ።
ፓነል ምስ ኣርእስቲ
ብቐሊሉ ኣብ ፓነልካ ርእሲ መትሓዚ ብ .panel-heading
. ከምኡ ውን ዝኾነ <h1>
- <h6>
ምስ ሓደ .panel-title
ክፍሊ ቅድሚ ቅዲ ዝተገብረ ኣርእስቲ ንምውሳኽ ከተእቱ ትኽእል ኢኻ። ይኹን እምበር፡ ዓቐናት ቅርጺ <h1>
- <h6>
ብ .panel-heading
.
ንግቡእ ሕብሪ መላግቦ፡ መላግቦታት ኣብ ኣርእስታት ኣብ ውሽጢ ምቕማጥካ ኣረጋግጽ .panel-title
።
ርእሲ ፓነል ብዘይ ኣርእስቲ
ትሕዝቶ ፓነል
መጠወቒታት ወይ ካልኣዊ ጽሑፍ ኣብ .panel-footer
. ፓነል እግረ ጽሑፋት ኣብ ቅድሚት ክኾኑ ስለዘይተሓሰቡ፡ ዓውደ-ጽሑፋዊ ፍልልያት ክትጥቀም ከለኻ ሕብርታትን ዶባትን ከምዘይወርሱ ኣስተውዕል ።
ዓውደ-ጽሑፋዊ ኣማራጺታት
ከም ካልኦት ባእታታት፡ ዝኾነ ካብቶም ዓውደ-ጽሑፋዊ ኩነታት ክፍልታት ብምውሳኽ፡ ንሓደ ፓነል ንሓደ ፍሉይ ዓውዲ ዝያዳ ትርጉም ዘለዎ ምግባር ብቐሊሉ።
ምስ ጠረጴዛታት
ንዝኾነ ዘይተወሰነ .table
ኣብ ውሽጢ ሓደ ፓነል ንዝኾነ ስሉጥ ዲዛይን ወስኹሉ። እንተሃልዩ .panel-body
ንመፍለዪ ኣብ ላዕሊ ናይቲ ሰደቓ ተወሳኺ ዶብ ንውስኽ።
ርእሲ ፓነል
ገለ ነባሪ ትሕዝቶ ፓነል ኣብዚ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ። ኤኒያን ላሲንያ ቢበንደም ኑላ ሴድ ኮንሰክተተር። ኤንያን ዩ ልዮ ኳም። ፔለንተስክ ኦርናረ ሴም ላሲንያ ኳም ቬነናቲስ ቬስቲቡሉም። ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.
# |
ናይ መጀመርታ ሽም |
ናይ መወዳእታ ሽም |
ስም ተጠቃሚ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
ኣካል ፓነል እንተዘይሃልዩ፡ እቲ ኣካል ካብ ርእሲ ፓነል ናብ ሰደቓ ብዘይ ምቁራጽ ይንቀሳቐስ።
ርእሲ ፓነል
# |
ናይ መጀመርታ ሽም |
ናይ መወዳእታ ሽም |
ስም ተጠቃሚ |
1. |
ማርክ |
ኦቶ |
@mdo ዝብል ጽሑፍ ኣሎ። |
2. |
ያእቆብ |
ቶርንተን ዝበሃል ትካል |
@ረጒድ |
3. |
ላሪ |
እታ ዑፍ |
@twitter ዝብል ጽሑፍ ኣሎ። |
ምስ ዝርዝር ጉጅለታት
ኣብ ውሽጢ ዝኾነ ፓነል ምሉእ ስፍሓት ዘለዎም ናይ ዝርዝር ጉጅለታት ብቐሊሉ ኣካትት።
ርእሲ ፓነል
ገለ ነባሪ ትሕዝቶ ፓነል ኣብዚ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ። ኤኒያን ላሲንያ ቢበንደም ኑላ ሴድ ኮንሰክተተር። ኤንያን ዩ ልዮ ኳም። ፔለንተስክ ኦርናረ ሴም ላሲንያ ኳም ቬነናቲስ ቬስቲቡሉም። ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.
- ክራስ ጁስቶ ኦዲዮ
- ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
- ሞርቢ ልዮ ሪሱስ
- ፖርታ ኣሲ ኮንሰክተቱር ኣሲ
- ቬስቲቡሉም ኣብ ኤሮስ
ዳህሰስቲ ኣብ ዝኾነ መሳርሒ ብግቡእ ዝዓቢ ውሽጣዊ ሬሽዮ ብምፍጣር ኣብ ስፍሓት ናይቲ ዝሓዘ ብሎኮኦም ተመርኲሶም መለክዒታት ቪድዮ ወይ ስላይድ ሾው ክውስኑ ፍቐደሎም።
ሕግታት ብቐጥታ ኣብ <iframe>
፣ <embed>
፣ <video>
፣ ከምኡ እውን <object>
ባእታታት ይትግበሩ፤ .embed-responsive-item
ብኣማራጺ ንኻልኦት ባህርያት ቅዲ ክትመዓራረዮ ምስ እትደሊ ግሉጽ ዘርኢ ክፍሊ ተጠቐም ።
ፕሮ-ቲፕ! frameborder="0"
ኣብ s ናትካ ምእታው ኣየድልየካን እዩ <iframe>
ከምቲ ንሕና ንዓኻ ንዕኡ ዝሽርሽር።
ጽቡቕ ጌርካ ነባሪ
ነቲ ዒላ ከም ቀሊል ጽልዋ ኣብ ሓደ ባእታ ተጠቐመሉ ንውጽኢት ምትእትታው ክትህቦ።
ኣማራጺ ክፍልታት
ምቁጽጻር ፓዲንግን ክቡብ ኩርናዓትን ምስ ክልተ ኣማራጺ መቐየሪ ክፍልታት።