ኣካላት

ዓሰርተታት ዳግማይ ክጥቀሙ ዝኽእሉ ኣካላት ኣብ ቡትስትራፕ ተሃኒጾም ንመጓዓዝያ፡ መጠንቀቕታታት፡ ፖፖቨርስን ካልእ ብዙሕን ይህቡ።

ናይ መጠወቒ ጉጅለታት

ብዙሓት መጠወቒታት ከም ሓደ ውሁድ ኣካል ንምጽንባር ናይ መጠወቒ ጉጅለታት ተጠቐም። ብተኸታታሊ <a>ወይ <button>ባእታታት ምህናጾም።

ብሉጻት ልምድታት

ንጉጅለታት መጠወቒን መሳርሒታትን ንምጥቃም እዞም ዝስዕቡ መምርሒታት ንመክር፤

  • ኩሉ ግዜ ኣብ ሓደ መጠወቒ ጉጅለ ሓደ ዓይነት ባእታ ተጠቐም፣ <a>ወይ <button>.
  • ኣብ ሓደ ናይ መጠወቒ ጉጅለ ዝተፈላለየ ሕብሪ ዘለዎም መጠወቒታት ኣይትሕወሱ።
  • ኣብ ርእሲ ወይ ኣብ ክንዲ ጽሑፍ ምልክታት ተጠቐም፣ ግን ኣድላዪ ኣብ ዝኾነሉ altን title ጽሑፍን ምሕዋስ ኣረጋግጽ።

ተዛመድቲ ናይ መጠወቒ ጉጅለታት ምስ ንቑልቁል ዝወርድ (ኣብ ታሕቲ ርአ) ብተናጸል ክጽውዑን ኩሉ ግዜ ንዝተሓሰበ ባህሪ ንምምልካት ንቑልቁል ዝወርድ ካሬት ከጠቓልሉን ይግባእ።

ነባሪ ኣብነት

እቲ ኤችቲኤምኤል ብመልህቕ መለለዪ መጠወቒታት ዝተሃንጸ መደበኛ ጉጅለ መጠወቒ ብኸመይ ከም ዝደሊ ኣብዚ ኣሎ፤

  1. <div ክፍሊ = "btn-ጉጅለ" >
  2. <መጠወቒ ክፍሊ = "btn" > 1 </መጠወቒ>
  3. <መጠወቒ ክፍሊ = "btn" > 2 </መጠወቒ>
  4. <መጠወቒ ክፍሊ = "btn" > 3 </መጠወቒ>
  5. </div> ዝብል ጽሑፍ ኣሎ።

ኣብነት መሳርሒ ባር

ስብስባት ናይ <div class="btn-group">ናብ ሓደ <div class="btn-toolbar">ንዝያዳ ዝተሓላለኹ ባእታታት ምውህሃድ።

  1. <div class = "btn-መሳርሒ ባር" >
  2. <div ክፍሊ = "btn-ጉጅለ" >
  3. ...
  4. </div> ዝብል ጽሑፍ ኣሎ።
  5. </div> ዝብል ጽሑፍ ኣሎ።

ሳጹን ምልክትን ሬድዮ መኣዛታትን

ጉጅለታት መጠወቒታት ከም ሬድዮታት እውን ክሰርሑ ይኽእሉ እዮም፣ ኣብኡ ሓደ መጠወቒ ጥራይ ንጡፍ ክኸውን ይኽእል፣ ወይ ድማ ዝኾነ ቁጽሪ መጠወቒታት ንጡፍ ክኸውን ዝኽእል ሳጹናት ምልክት። ንዕኡ ዝኸውን ናይ ጃቫስክሪፕት ዶክስ ርአ ።

ጃቫስክሪፕት ረኸቡ »

ኣብ ጉጅለታት መጠወቒታት ዝወድቁ

ርእሲ ንላዕሊ! ንቑልቁል ዝወርድ መጠወቒታት ንግቡእ ምቕራብ ብውልቂ ብናቶም .btn-groupኣብ ውሽጢ ሓደ ክጥቕለሉ ኣለዎም።.btn-toolbar

መጠወቒ ንቑልቁል ዝወርድ

ሓፈሻዊ ትሕዝቶን ኣብነታትን

ዝኾነ መጠወቒ ተጠቒምካ ንሓደ ንቑልቁል ዝወርድ ዝርዝር ኣብ ውሽጢ a ብምቕማጥን .btn-groupግቡእ ምልክት ምልክት ብምሃብን ተጠቐም።

ኣብነት ምልክት ምግባር

ልክዕ ከም ናይ መጠወቒ ጉጅለ፡ ናትና ምልክት ስሩዕ ምልክት መጠወቒ ይጥቀም፡ ግን ከኣ ብኣጻብዕ ዝቑጸሩ ተወሳኺታት ነቲ ቅዲ ንምጽራይን ናይ Bootstrap ንቑልቁል ዝወርድ jQuery ፕላግ-ኢን ንምድጋፍን እዩ።

  1. <div ክፍሊ = "btn-ጉጅለ" >
  2. <a class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" href = "#" >
  3. ተግባር
  4. <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ።
  5. </a>
  6. <ul class = "ንቑልቁል ዝወርድ ዝርዝር" >
  7. <!-- ንቑልቁል ዝወርድ ዝርዝር መላግቦታት -->
  8. </ul> ዝብል ጽሑፍ ኣሎ።
  9. </div> ዝብል ጽሑፍ ኣሎ።

ምስ ኩሉ ዓቐን መጠወቒታት ይሰርሕ

ንቑልቁል ዝወርድ መጠወቒ ብዝኾነ ዓቐን ይሰርሑ። ናትካ መጠወቒ ዓቐን ናብ .btn-large, .btn-small, ወይ .btn-mini.

ጃቫስክሪፕት የድልዮ

ንቑልቁል ዝወርድ መጠወቒ ንኽሰርሕ Bootstrap ዝብል ንቑልቁል ዝወርድ ፕላግ-ኢን የድልዮ።

ኣብ ገለ ኣጋጣሚታት-ከም ሞባይል-ንቑልቁል ዝወርድ ምልክታታት ካብቲ ቪውፖርት ወጻኢ ክዝርጋሕ እዩ። ነቲ ኣሰላልፋ ብኢድካ ወይ ብብሕታዊ ጃቫስክሪፕት ክትፈትሖ ኣለካ።


ስፕሊት መጠወቒ ንቑልቁል ዝወርድ

ሓፈሻዊ ትሕዝቶን ኣብነታትን

ኣብቲ ናይ መጠወቒ ጉጅለ ቅዲታትን ምልክትን ብምህናጽ፡ ብቐሊሉ ናይ ምፍንጫል መጠወቒ ክንፈጥር ንኽእል። ዝተመቕሉ መጠወቒታት ብጸጋም መደበኛ ተግባርን ብየማን ድማ ንቑልቁል ዝወርድ ምቕያርን ምስ ዓውደ-ጽሑፋዊ መላግቦታት ኣለዎም።

ዓቐናት

ነቶም ተወሳኺ ናይ መጠወቒ ክፍልታት .btn-mini, .btn-small, ወይ ንመዐቀኒ ተጠቐም .btn-large

  1. <div ክፍሊ = "btn-ጉጅለ" >
  2. ...
  3. <ul class = "ንቑልቁል ዝወርድ ዝርዝር ስሕበት-የማን" >
  4. <!-- ንቑልቁል ዝወርድ ዝርዝር መላግቦታት -->
  5. </ul> ዝብል ጽሑፍ ኣሎ።
  6. </div> ዝብል ጽሑፍ ኣሎ።

ኣብነት ምልክት ምግባር

ከም ፍሉይ ንቑልቁል ዝወርድ መበገሲ ዝሰርሕ ካልኣይ ናይ መጠወቒ ተግባር ንምሃብ ኣብ ንቡር መጠወቒታት ነስፍሕ።

  1. <div ክፍሊ = "btn-ጉጅለ" >
  2. <button class = "btn" > ተግባር </button> ዝብል ጽሑፍ ኣሎ።
  3. <button class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" >
  4. <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ።
  5. </መጠወቒ>
  6. <ul class = "ንቑልቁል ዝወርድ ዝርዝር" >
  7. <!-- ንቑልቁል ዝወርድ ዝርዝር መላግቦታት -->
  8. </ul> ዝብል ጽሑፍ ኣሎ።
  9. </div> ዝብል ጽሑፍ ኣሎ።

ምውዳቕ ምልክታታት

ንቑልቁል ዝወርድ ምልክታታት ውን ካብቲ ናይ ቀረባ ወላዲ ሓደ ክፍሊ ብምውሳኽ ካብ ታሕቲ ንላዕሊ ምቕያር ይከኣል .dropdown-menu። ኣንፈት ናይቲ .caretክግልብጦን ነቲ ዝርዝር ንባዕሉ ዳግማይ ኣቐሚጡ ኣብ ክንዲ ካብ ላዕሊ ንታሕቲ ካብ ታሕቲ ንላዕሊ ክኸይድ እዩ።

  1. <div class = "btn-ጉጅለ ምውራድ" >
  2. <button class = "btn" > ምውራድ </መጠወቒ>
  3. <button class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" >
  4. <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ።
  5. </መጠወቒ>
  6. <ul class = "ንቑልቁል ዝወርድ ዝርዝር" >
  7. <!-- ንቑልቁል ዝወርድ ዝርዝር መላግቦታት -->
  8. </ul> ዝብል ጽሑፍ ኣሎ።
  9. </div> ዝብል ጽሑፍ ኣሎ።

ብዙሕ-ኮን-ገጻት ገጽ ምግባር

መዓስ ክትጥቀመሉ ኣለካ

ኣዝዩ ቀሊልን ውሑድ ቅዲ ዘለዎን ገጽ ብ Rdio ዝተደፋፍአ፣ ንኣፕታትን ውጽኢት ምድላይን ብሉጽ። እቲ ዓቢ ብሎክ ክትሓልፎ ኣጸጋሚ፡ ብቐሊሉ ዝዓቢ፡ ዓበይቲ ናይ ጠውቂ ቦታታት ዝህብ እዩ።

ስቴትful ናይ ገጽ መላግቦታት

ሊንክታት ንዓኻ ዝምጥን ኮይኑ ኣብ ሓያሎ ኩነታት ምስ ትኽክለኛ ክፍሊ ዝሰርሑ እዮም። .disabledንዘይጥወቕ መላግቦታትን .activeንናይ ሕጂ ገጽን።

ተዓጻጻፊ ኣሰላልፋ

ኣሰላልፋ ናይ ገጻት መላግቦታት ንምቕያር ካብ ክልተ ኣማራጺ ክፍልታት ሓደ ወስኽ፦ .pagination-centeredከምኡውን .pagination-right.

ኣብነታት

እቲ ነባሪ ገጽ ምሃብ ክፍሊ ተዓጻጻፊ ኮይኑ ብብዙሕ ፍልልያት ይሰርሕ።

ምልክት ምግባር

ኣብ ሓደ <div>ተጠቕሊሉ ፣ ገጽ ምግባር <ul>.

  1. <div class = "ገጽ ምጽሓፍ" >
  2. <ul> ዝብል ጽሑፍ ኣሎ።
  3. <li><a href = "#" > ቅድሚት </a></li>
  4. <li class = "ንጡፍ" > ዝብል ጽሑፍ ኣሎ።
  5. <a href = "#" > 1 </a> ዝብል ጽሑፍ ኣሎ።
  6. </li> ዝብል ጽሑፍ ኣሎ።
  7. <li><a href = "#" > 2 </a></li> ዝብል ጽሑፍ ኣሎ።
  8. <li><a href = "#" > 3 </a></li> ዝብል ጽሑፍ ኣሎ።
  9. <li><a href = "#" > 4 ​​</a></li> ዝብል ጽሑፍ ኣሎ።
  10. <li><a href = "#" > ዝቕጽል </a></li>
  11. </ul> ዝብል ጽሑፍ ኣሎ።
  12. </div> ዝብል ጽሑፍ ኣሎ።

Pager ንቕልጡፍ ዝሓለፈን ዝቕጽልን ሊንክታት

ብዛዕባ ፔጀር

እቲ ናይ ፔጀር ክፍሊ ንቐሊል ናይ ገጽ ኣተገባብራታት ምስ ብርሃን ምልክትን ካብኡ ዝቐለለ ቅዲታትን ዝኸውን ስብስብ መላግቦታት እዩ። ንቐለልቲ መርበባት ሓበሬታ ከም ብሎግ ወይ መጽሔት ብሉጽ እዩ።

ኣማራጺ ስንክልና ዘለዎ ኩነታት

ፔጀር ሊንክታት እውን ካብቲ ገጻት ዝመጽእ ሓፈሻዊ .disabledክፍሊ ይጥቀሙ።

ነባሪ ኣብነት

ብነባሪ መልክዑ፡ እቲ ፔጀር ንመላግቦታት የማእከሎም።

  1. <ul class = "ፔገር" > ዝብል ጽሑፍ ኣሎ።
  2. <li> ዝብል ጽሑፍ ኣሎ።
  3. <a href = "#" > ዝሓለፈ </a>
  4. </li> ዝብል ጽሑፍ ኣሎ።
  5. <li> ዝብል ጽሑፍ ኣሎ።
  6. <a href = "#" > ዝቕጽል </a>
  7. </li> ዝብል ጽሑፍ ኣሎ።
  8. </ul> ዝብል ጽሑፍ ኣሎ።

ዝተሰለፉ መላግቦታት

ከም ኣማራጺ ድማ ነፍሲ ወከፍ መላግቦ ናብ ጎድኒ ከተመዓራርዮ ትኽእል ኢኻ፤

  1. <ul class = "ፔገር" > ዝብል ጽሑፍ ኣሎ።
  2. <li class = "ቅድሚ ሕጂ ዝነበረ" >
  3. <a href = "#" > ዝኣረገ </a>
  4. </li> ዝብል ጽሑፍ ኣሎ።
  5. <li class = "ዝቕጽል" >
  6. <a href = "#" > ሓድሽ → </a>
  7. </li> ዝብል ጽሑፍ ኣሎ።
  8. </ul> ዝብል ጽሑፍ ኣሎ።
ስያመታት ምልክት ምግባር
ትሑዝ <span class="label">Default</span>
ዓወት <span class="label label-success">Success</span>
ምኸዳን <span class="label label-warning">Warning</span>
ጠቃሚ <span class="label label-important">Important</span>
ሓበሬታ <span class="label label-info">Info</span>
ተገላባጢ <span class="label label-inverse">Inverse</span>

ብዝዕባ

ባጅ ንገለ ዓይነት መርኣዪ ወይ ቁጽሪ ንምግላጽ ንኣሽቱን ቀለልትን ባእታታት እዮም። መብዛሕትኡ ግዜ ኣብ ከም Mail.app ዝኣመሰሉ ናይ ኢመይል ዓማዊል ወይ ኣብ ሞባይል ኣፕታት ንመፍለጢታት ምድፋእ ይርከቡ።

ዝርከቡ ክፍልታት

ሽም ኣብነት ምልክት ምግባር
ትሑዝ 1. <span class="badge">1</span>
ዓወት 2. <span class="badge badge-success">2</span>
ምኸዳን 4. <span class="badge badge-warning">4</span>
ጠቃሚ 6. <span class="badge badge-important">6</span>
ሓበሬታ 8. <span class="badge badge-info">8</span>
ተገላባጢ 10. <span class="badge badge-inverse">10</span>

ጅግና ኣሃዱ

ቡትስትራፕ ኣብ መርበብ ሓበሬታኻ ትሕዝቶ ንምርኣይ ጅግና ኣሃዱ ዝበሃል ቀሊልን ተዓጻጻፍን ኣካል ይህብ። ኣብ ዕዳጋን ትሕዝቶ ዝበዝሖም መርበባት ሓበሬታን ጽቡቕ ይሰርሕ።

ምልክት ምግባር

ትሕዝቶኻ ብላይክ ጠቕልሎ divስለዚ፤

  1. <div class = "ጅግና-ኣሃዱ" >
  2. <h1> ርእሲ </h1>
  3. <p> ምልክት ምልክት </p>
  4. <p> ዝብል ጽሑፍ ኣሎ።
  5. <a class = "btn btn-መባእታዊ btn-ዓቢ" >
  6. ተወሳኺ ፍለጡ
  7. </a>
  8. </p> ዝብል ጽሑፍ ኣሎ።
  9. </div> ዝብል ጽሑፍ ኣሎ።

ሰላም ዓለም!

እዚ ቀሊል ጅግና ኣሃዱ እዩ፣ ንፍሉይ ትሕዝቶ ወይ ሓበሬታ ተወሳኺ ኣቓልቦ ንምጽዋዕ ዝሕግዝ ቀሊል ጃምቦትሮን-ቅዲ ባእታ እዩ።

ተወሳኺ ፍለጡ

ርእሲ ገጽ

h1ንሓደ ኣብ ሓደ ገጽ ዝርከቡ ክፍልታት ትሕዝቶ ብግቡእ ንምውጻእን ንምክፋልን ዝሕግዝ ቀሊል ሸል ። ነቲ h1's default small, element ከምኡ ውን መብዛሕትኦም ካልኦት ኣካላት (ምስ ተወሳኺ ቅዲታት) ክጥቀመሉ ይኽእል።

  1. <div class = "ገጽ-ርእሲ" >
  2. <h1> ኣብነት ርእሲ ገጽ </h1>
  3. </div> ዝብል ጽሑፍ ኣሎ።

ነባሪ ንኣሽቱ ስእልታት

ብነባሪ መልክዑ፡ ንኣሽቱ ስእልታት ቡትስትራፕ፡ ዝተኣሳሰሩ ምስልታት ብውሑድ ዘድሊ ምልክት ንምርኣይ ዝተዳለዉ እዮም።

ኣዝዩ ንዓኻ ዝምጥን እዩ።

ቁሩብ ተወሳኺ ምልክት ብምግባር፡ ዝኾነ ዓይነት ትሕዝቶ ኤችቲኤምኤል ከም ኣርእስታት፡ ሕጡበ-ጽሑፋት፡ ወይ መጠወቒታት ኣብ ንኣሽቱ ስእልታት ምውሳኽ ይከኣል።

  • ንእሽቶ ስእሊ ምልክት

    ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

    ተግባር ተግባር

  • ንእሽቶ ስእሊ ምልክት

    ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

    ተግባር ተግባር

ንምንታይ ንኣሽቱ ስእልታት ንጥቀም

ንኣሽቱ ስእልታት (ቅድሚ ሕጂ .media-gridክሳብ v1.4) ንሽቦታት ስእልታት ወይ ቪድዮታት፡ ውጽኢት ምድላይ ምስሊ፡ ፍርያት ችርቻሮ፡ ፖርትፎሊዮታትን ካልእ ብዙሕን ብሉጻት እዮም። ሊንክ ወይ ስታትቲክ ትሕዝቶ ክኾኑ ይኽእሉ።

ቀሊልን ተዓጻጻፍን ምልክት ምግባር

ንእሽቶ ስእሊ ምልክት ምግባር ቀሊል እዩ-a ulምስ ዝኾነ ቁጽሪ liባእታታት ጥራይ እዩ ዘድሊ። ብተወሳኺ ልዕሊ ዓቐን ተዓጻጻፊ እዩ፣ ዝኾነ ዓይነት ትሕዝቶ ምስ ቁሩብ ዝያዳ ምልክት ጥራይ ትሕዝቶኻ ንምጥቕላል የኽእል።

ዓቐናት ዓምድታት ሽቦ ይጥቀም

ኣብ መወዳእታ፡ እቲ ናይ ንኣሽቱ ስእልታት ክፍሊ ፡ ንመቆጻጸሪ መለክዒታት ንኣሽቱ ስእልታት ፡ ዝጸንሑ ናይ ሽቦ ስርዓት ክፍልታት ይጥቀም-ከም .span2ወይ ።.span3

እቲ ምልክት ምግባር

ከምቲ ኣቐዲሙ ዝተገልጸ፡ ንንኣሽቱ ስእልታት ዘድሊ ምልክት ቀሊልን ቅኑዕን እዩ። ንዝተኣሳሰሩ ምስልታት ዝኸውን ነባሪ ኣወዳድባ ኣብዚ ንርአ :

  1. <ul class = "ንኣሽቱ ስእልታት" >
  2. <li ክፍሊ = "span3" >
  3. <a href = "#" ክፍሊ = "ንእሽቶ ስእሊ" >
  4. <img src = "https://placehold.it/260x180" alt = "" > ዝብል ጽሑፍ ኣሎ።
  5. </a>
  6. </li> ዝብል ጽሑፍ ኣሎ።
  7. ...
  8. </ul> ዝብል ጽሑፍ ኣሎ።

ንብሕታዊ ትሕዝቶ ኤችቲኤምኤል ኣብ ንኣሽቱ ስእልታት፡ እቲ ምልክት ቁሩብ ይቕየር። ኣብ ዝኾነ ቦታ ብሎክ ደረጃ ትሕዝቶ ንምፍቃድ፡ ነቲ <a><div>like so ንቕይሮ፤

  1. <ul class = "ንኣሽቱ ስእልታት" >
  2. <li ክፍሊ = "span3" >
  3. <div class = "ንእሽቶ ስእሊ" >
  4. <img src = "https://placehold.it/260x180" alt = "" > ዝብል ጽሑፍ ኣሎ።
  5. <h5> ምልክት ንእሽቶ ስእሊ </h5>
  6. <p> ንእሽቶ ስእሊ ጽሑፍ ልክዕ ኣብዚ... </p>
  7. </div> ዝብል ጽሑፍ ኣሎ።
  8. </li> ዝብል ጽሑፍ ኣሎ።
  9. ...
  10. </ul> ዝብል ጽሑፍ ኣሎ።

ተወሳኺ ኣብነታት

ኩሎም ኣማራጺታትካ ምስ ዝተፈላለዩ ንዓኻ ዝቐርቡ ናይ ሽቦ ክፍልታት ዳህሰሶም። ዝተፈላለዩ ዓቐናት እውን ክትሓዋውሱን ከተመዓራርዩን ትኽእሉ ኢኹም።

ቀለልቲ ነባሪ ነገራት

ዳግማይ ዝተጻሕፈ መሰረታዊ ክፍሊ

ብ Bootstrap 2፡ ነቲ መሰረታዊ ክፍሊ ኣቃሊልናዮ ኣለና፡ ኣብ .alertክንዲ .alert-message. ነቲ ዝተሓተ ዝድለ ምልክት እውን ኣጉዲልናዮ ኣለና-ኣይፋልን <p>ብነባሪ የድሊ፣ እቲ ደጋዊ ጥራይ <div>.

ሓደ ናይ መጠንቀቕታ መልእኽቲ

ንዝያዳ ነዊሕ ዝጸንሕ ኣካል ምስ ውሑድ ኮድ፡ ነቲ ፍልልይ ዝፈጥር መልክዕ ናይ ብሎክ መጠንቀቕታታት፡ ምስ ዝያዳ መሸፈኒ ዝመጹ መልእኽትታትን ብተለምዶ ዝያዳ ጽሑፍን ኣወጊድናዮ ኣለና። እቲ ክፍሊ ’ ውን ናብ .alert-block.


ምስ ጃቫስክሪፕት ጽቡቕ ይኸይድ

Bootstrap ንመልእኽትታት መጠንቀቕታ ዝድግፍ ብሉጽ jQuery ፕላግ-ኢን ሒዙ ይመጽእ፣ እዚ ድማ ምብራር ቅልጡፍን ቀሊልን ይገብሮ።

እቲ ፕላግ-ኢን ረኸብ »

ኣብነት መጠንቀቕታታት

መልእኽትኻን ኣማራጺ ናይ ምዕጻው ምልክትን ኣብ div ብቐሊል ክፍሊ ጠቕልሎ።

ምኸዳን! Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ።
  1. <div class = "መጠንቀቕታ" >
  2. <button class = "ዕጾ" data-dismiss = "መጠንቀቕታ" > × </መጠወቒ>
  3. <strong> መጠንቀቕታ! </strong> Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ።
  4. </div> ዝብል ጽሑፍ ኣሎ።

ርእሲ ንላዕሊ! መሳርሒታት iOS href="#"ንመውጽኢ መጠንቀቕታታት ሓደ የድልዮም። ንዕኡን ንናይ መልህቕ ምዕጻው ምልክታት ዝኸውን ናይ ዳታ ባህሪን ምሕዋስካ ኣረጋግጽ። ከም ኣማራጺ፡ ንሓደ ባእታ ምስቲ ናይ ዳታ ባህሪ ክትጥቀም ትኽእል ኢኻ <button>፡ እዚ ድማ ንሕና ንዶክስና ክንገብሮ መሪጽና ኣለና። ፡ ክትጥቀም <button>ከለኻ፡ ከተካትት ኣለካ type="button"ወይ ቅጥዕታትካ ከየቕርቡ ይኽእሉ እዮም።

ነቲ መደበኛ ናይ መጠንቀቕታ መልእኽቲ ብኽልተ ኣማራጺ ክፍልታት ብቐሊሉ ኣናውሖ: .alert-blockንዝያዳ ናይ ምዕሻግን ናይ ጽሑፍ ቁጽጽርን ከምኡውን .alert-headingንዝመሳሰል ኣርእስቲ።

ምኸዳን!

Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ። ፕራሰንት ኮሞዶ ቁርሱስ ማግና፡ ቬል ስሰለሪስክ ኒስል ኮንሰክተተርን.

  1. <div class = "ጥንቃቐ መጠንቀቕታ-ዕግት" >
  2. <a class = "ዕጾ" data-dismiss = "ጥንቃቐ" href = "#" > × </a>
  3. <h4 class = "ኣርእስቲ መጠንቀቕታ" > መጠንቀቕታ! </h4> ዝብል ጽሑፍ ኣሎ።
  4. Best check yo self, ንስኻ ኣይኮንካን...
  5. </div> ዝብል ጽሑፍ ኣሎ።

ዓውደ-ጽሑፋዊ ኣማራጺታት ናይ ሓደ መጠንቀቕታ ትርጉም ንምቕያር ኣማራጺ ክፍልታት ምውሳኽ

ጌጋ ወይ ሓደጋ

ኣየ ስናፕ! ገለ ገለ ነገራት ቀይርካ እንደገና ከተቕርብ ፈትን።
  1. <div class = "ጥንቃቐ መጠንቀቕታ-ጌጋ" >
  2. ...
  3. </div> ዝብል ጽሑፍ ኣሎ።

ዓወት

ጽቡቕ ተሰሪሑ! ነዚ ኣገዳሲ ናይ መጠንቀቕታ መልእኽቲ ብዓወት ኣንቢብካዮ።
  1. <div class = "ጥንቃቐ መጠንቀቕታ-ዓወት" >
  2. ...
  3. </div> ዝብል ጽሑፍ ኣሎ።

ሓበሬታ

ርእሲ ንላዕሊ! እዚ መጠንቀቕታ ኣቓልቦኻ የድልዮ እዩ፡ ግን ልዕሊ ዓቐን ኣገዳሲ ኣይኮነን።
  1. <div class = "ጥንቃቐ መጠንቀቕታ-ሓበሬታ" >
  2. ...
  3. </div> ዝብል ጽሑፍ ኣሎ።

ኣብነታትን ምልክት ምግባርን።

መሰረታዊ

ነባሪ ናይ ምዕባለ ባር ምስ ቀጥታዊ ምዕባለ።

  1. <div class = "ገስጋስ" >
  2. <div ክፍሊ = "ባር"።
  3. style = " ስፍሓት : 60 %፤ " ></div>
  4. </div> ዝብል ጽሑፍ ኣሎ።

ስሪት ዘለዎ

ስሪትድ ኤፍክት ንምፍጣር ግራድየንት ይጥቀም (IE የለን)።

  1. <div class = "ገስጋስ ምዕባለ-ስሪት ዘለዎ" >
  2. <div ክፍሊ = "ባር"።
  3. style = " ስፍሓት : 20 %፤ " ></div>
  4. </div> ዝብል ጽሑፍ ኣሎ።

ተንቀሳቓሲ ስእሊ

ነቲ ስሪት ዘለዎ ኣብነት ወሲዱ ህያው ይገብሮ (IE የለን)።

  1. <div class = "ገስጋስ ምዕባለ-ስሪት ዘለዎ።"
  2. ንጡፍ" >
  3. <div ክፍሊ = "ባር"።
  4. ቅዲ = " ስፍሓት : 40 %፤ " ></div>
  5. </div> ዝብል ጽሑፍ ኣሎ።

ኣማራጺታትን ደገፍ መርበብ ሓበሬታን።

ተወሳኺ ሕብርታት

ናይ ምዕባለ ባር ገለ ካብ ሓደ ዓይነት መጠወቒን ንዘይተለዋወጠ ቅዲታት ናይ መጠንቀቕታ ክፍልታትን ይጥቀሙ።

ስሪት ዘለዎም ባር

ምስቶም ጽኑዓት ሕብርታት ዝመሳሰሉ ዝተፈላለዩ ስሪት ዘለዎም ናይ ምዕባለ ባር ኣለዉና።

ባህርያት

ፕሮግረስ ባርስ CSS3 መሰጋገሪታት ይጥቀሙ፣ ስለዚ ብመንገዲ ጃቫስክሪፕት ኣቢሉ ስፍሓት ብዳይናሚክ እንተ ኣስተኻኺልካዮ፣ ብዘይ ገለ ጸገም ዓቐን ክቕይር እዩ።

.activeነቲ ክፍሊ እንተተጠቒምካሉ ፡ ናይ .progress-stripedምዕባለ ባርካ ነቶም መስመራት ካብ ጸጋም ናብ የማን ህያው ክገብሩሎም እዮም።

ናይ መርበብ ሓበሬታ ደገፍ

ፕሮግረስ ባር ንኹሉ ውጽኢታቶም ንምዕዋት CSS3 gradients, transitions, and animations ይጥቀሙ። እዞም ባህርያት ኣብ IE7-9 ወይ ዝኣረጉ ስሪት ፋየርፎክስ ኣይድገፉን እዮም።

Operaን IEን ኣብዚ እዋን እዚ ኣኒሜሽን ኣይድግፉን እዮም።

ዌልስ ዝበሃል ትካል

ነቲ ዒላ ከም ቀሊል ጽልዋ ኣብ ሓደ ባእታ ተጠቐመሉ ንውጽኢት ምትእትታው ክትህቦ።

ርኣዩኒ ኣብ ዒላ ኣለኹ!
  1. <div class = "ጽቡቕ" > ዝብል ጽሑፍ ኣሎ።
  2. ...
  3. </div> ዝብል ጽሑፍ ኣሎ።

ምልክት ምዕጻው

ከም ሞዳላትን መጠንቀቕታታትን ዝኣመሰሉ ትሕዝቶታት ንምንጻግ ነቲ ሓፈሻዊ ናይ ምዕጻው ምልክት ተጠቐም።

  1. <button class = "ዕጾ" > × </መጠወቒ>

መሳርሒታት iOS ንኣንከር ክትጥቀም እንተደሊኻ ንፍጻመታት ጠውቂ href="#" የድልዮም።

  1. <a class = "ዕጾ" href = "#" > &ግዜታት; </a>