Sourceቅጥዕታት
ኣብነታትን መምርሒታት ኣጠቓቕማን ቅዲታት ምቁጽጻር ቅጥዒ፡ ኣማራጺታት ኣቀማምጣን ዝተፈላለዩ ቅጥዕታት ንምፍጣር ብሕታዊ ባእታታትን።
ናይ Bootstrap ቅጥዒ ቁጽጽር ኣብ ናትና Rebooted ቅጥዒ ቅዲታት ምስ ክፍልታት ይሰፍሕ። ነዞም ክፍልታት ተጠቐመሎም ኣብቲ ብዓይነት ዝተዳለወ ምርኢታቶም ንምምራጽ ንዝያዳ ቅኑዕ ኣቀራርባ ኣብ መላእ ኣሰጋገርትን መሳርሕታትን።
type
ኣብ ኩሎም እታዎታት (ንኣብነት email
፡ ንኣድራሻ ኢመይል ወይ ንቁጽራዊ ሓበሬታ) ግቡእ ባህሪ ምጥቃምካ ኣረጋግጽ number
፡ ንሓደስቲ ናይ ምእታው ቁጽጽር ከም ናይ ኢመይል ምርግጋጽ፡ ቁጽሪ ምምራጽን ካልእን ንምጥቃም።
ቅዲታት ቅጥዒ ቡትስትራፕ ንምግላጽ ቅልጡፍ ኣብነት ኣብዚ ኣሎ። ንሰነዳት ብዛዕባ ዘድልዩ ክፍልታት፡ ኣቀማምጣ ቅጥዒን ካልእን ምንባብ ቀጽል።
ናይ ጽሑፍ ቅርጺ መቆጻጸሪታት-ከም <input>
s, <select>
s, ከምኡውን <textarea>
s-ምስ .form-control
ክፍሊ ቅዲ ኣለዎም። ንሓፈሻዊ መልክዕ፡ ፎኮስ ኩነታት፡ ዓቐንን ካልእን ዝሕግዙ ቅዲታት ተኻቲቶም ኣለዉ።
ንዝያዳ ቅዲ s ብሕታዊ ቅጥዕታትና ምድህሳስኩም ኣረጋግጹ ።<select>
ንኣእትዎታት ፋይል፡ ነቲ .form-control
ን .form-control-file
.
ከምን ዝኣመሰሉ ክፍልታት ብምጥቃም ቁመት .form-control-lg
ኣቐምጥ .form-control-sm
።
readonly
ናይቲ እታው ዋጋ ምምሕያሽ ንምክልኻል ኣብ ሓደ እታው ቡልያን ባህሪ ምውሳኽ ። ንንባብ ጥራይ ዝኸውን እታዎታት ቀለልቲ ይመስሉ (ልክዕ ከምቲ ዝተሰናኸሉ እታዎታት)፣ ግን ነቲ መደበኛ መመልከቲ ይዕቅብዎ።
<input readonly>
ኣብ ቅጥዒኻ ዝርከቡ ባእታታት ከም ስሩዕ ጽሑፍ ቅዲ ክህልዎም እንተደሊኻ ፡ ነቲ .form-control-plaintext
ክፍሊ ተጠቒምካ ነቲ ነባሪ ቅዲ ዓውዲ ቅጥዒ ምእላይን ቅኑዕ ወሰንን ምዕቃብን ምዕቃብን።
ብምጥቃም ብኣግማድ ዝሽከሉ ናይ ደረጃ እታዎታት ኣቐምጥ .form-control-range
።
ነባሪ ሳጹናት ምልክትን ሬድዮታትን ብሓገዝ .form-check
, ንኽልቲኦም ዓይነታት ምእታው ዝኸውን ሓደ ክፍሊ ንኣቀማምጣን ባህርን ናይ HTML ባእታታቶም ዘመሓይሽ ይመሓየሹ ። ሳጹናት ምልክት ኣብ ሓደ ዝርዝር ሓደ ወይ ሓያሎ ኣማራጺታት ንምምራጽ ክኸውን ከሎ፡ ሬድዮታት ድማ ካብ ብዙሓት ሓደ ኣማራጺ ንምምራጽ ዝሕግዙ እዮም።
ዝተሰናኸሉ ሳጹናት ምልክትን ሬድዮታትን ይድገፉ እዮም፣ ግን not-allowed
ኣብ ምዝዋር ናይቲ ወላዲ መመልከቲ ንምሃብ፣ ነቲ ባህሪ ኣብቲ <label>
ምውሳኽ ከድልየካ እዩ ። እቲ ዝተሰናኸለ ባህሪ ናይቲ ምእታው ኩነታት ንምምልካት ዝሕግዝ ፍኹስ ዝበለ ሕብሪ ክጥቀም እዩ።disabled
.form-check-input
ሳጹናት ምልክትን ሬድዮታትን ዝጥቀሙሉ ብኤችቲኤምኤል ዝተመርኮሰ ቅጥዒ ምጽዳቕ ንምድጋፍን ጽፉፍን ተበጻሕን ስያመታት ንምሃብን ዝተሃንጹ እዮም። ከምኡ ስለዝኾነ ድማ፡ ናትና <input>
sን <label>
sን ኣንጻር ሓደ <input>
ኣብ ውሽጢ a <label>
. እዚ ቁሩብ ዝያዳ ቃላት ዝመልኦ እዩ ምኽንያቱ ክትገልጾን ባህርያትን ክትገልጾ ኣለካ id
ነቲ and for
ንምትእስሳር .<input>
<label>
ብነባሪ መልክዑ፡ ዝኾነ ቁጽሪ ናይቶም ናይ ቀረባ ሓው ዝኾኑ ሳጹናት ምልክትን ሬድዮታትን ብቐጥታ ክድምርን ብግቡእ ክፈላለዩን እዮም .form-check
።
.form-check-inline
ሳጹናት ምልክት ወይ ሬድዮታት ኣብ ሓደ ኣግማድ መስርዕ ኣብ ዝኾነ ብምውሳኽ ምጉጅጃል .form-check
።
ኣብ ውሽጢ ዝኾነ ናይ ስያመ ጽሑፍ ዘይብሎም .position-static
እታዎታት ወስኹ ። .form-check
ሕጂ’ውን ንሓጋዚ ቴክኖሎጂታት ገለ ዓይነት ምልክት ምሃብ ኣይትረስዕ (ንኣብነት ምጥቃም aria-label
).
Bootstrap ስለ display: block
ዝሰርሕን width: 100%
ዳርጋ ኣብ ኩሉ ናይ ቅጥዒ ቁጽጽርናን፡ ቅጥዕታት ብነባሪ ብቐጥታ ክድምር እዩ። ነዚ ኣቀማምጣ ብመሰረት ነፍሲ ወከፍ ቅጥዒ ንምቕያር ተወሳኺ ክፍልታት ክጥቀሙ ይኽእሉ።
እቲ .form-group
ክፍሊ ገለ ቅርጺ ኣብ ቅጥዕታት ንምውሳኽ ዝቐለለ መንገዲ እዩ። ንሱ ድማ ብግቡእ ምጉጅጃል ስያመታት፣ ቁጽጽር፣ ኣማራጺ ሓገዝ ጽሑፍን ቅጥዒ ምጽዳቕ መልእኽቲን ዘተባብዕ ተዓጻጻፊ ክፍሊ ይህብ። ብነባሪ it only applies , ግን ከም ኣድላይነቱ margin-bottom
ተወሳኺ ቅዲታት ይወስድ ። ምስ s ፡ s ወይ ዳርጋ ምስ ዝኾነ ካልእ ባእታ .form-inline
ተጠቐመሉ ።<fieldset>
<div>
ዝያዳ ዝተሓላለኹ ቅጥዕታት ናትና ግሪድ ክፍልታት ተጠቒምካ ክህነጹ ይኽእሉ። ነዚኦም ንብዙሓት ዓምድታት፣ ዝተፈላለዩ ስፍሓትታትን ተወሳኺ ናይ ኣሰላልፋ ኣማራጺታትን ዝጠልቡ ኣቀማምጣ ቅጥዒ ተጠቐመሎም።
.row
ብተወሳኺ ን , ለውጢ ናይቲ መደበኛ መስርዕ ሽቦና ክትቅይር ትኽእል ኢኻ .form-row
እዚ ድማ ነቶም ነባሪ ዓምዲ ጐዳጉዲ ንዝተጠርነፉን ዝያዳ ውሱናትን ኣቀማምጣታት ዝሽርሽር እዩ።
ዝያዳ ዝተሓላለኹ ኣቀማምጣታት እውን ብስርዓት ሽቦ ክፈጥሩ ይኽእሉ እዮም።
.row
ነቲ ክፍሊ ንጉጅለታት ብምውሳኽን ነቶም .col-*-*
ክፍልታት ብምጥቃም ስፍሓት ናይ ስያመታትካን ቁጽጽራትካን ብምግላጽን ምስቲ ሽቦ ኣግማድ ቅጥዕታት ፍጠር። ርግጸኛ ኩን ኣብ s .col-form-label
ናትካ <label>
እውን ምውሳኽ ምእንቲ ንሳቶም ብቐጥታ ማእከል ምስቶም ተዛመድቲ ቅጥዒ ቁጽጽራቶም።
ኣብ ገለ እዋን፡ ምናልባት ነቲ ዘድልየካ ፍጹም ኣሰላልፋ ንምፍጣር፡ ማርጅን ወይ ፓዲንግ ዩቲሊቲስ ክትጥቀም የድልየካ ይኸውን። ንኣብነት padding-top
፡ ነቲ ናይ ጽሑፍ መበገሲ መስመር ብዝበለጸ ንምስላፍ፡ ነቲ ኣብቲ ዝተደራረበ ናይ ሬድዮ እታዎታት ስያመና ኣወጊድናዮ ኣለና።
ንዓቐንን ብትኽክል ንምክትታል .col-form-label-sm
ወይ .col-form-label-lg
ናብ <label>
s ወይ s ምጥቃምካ ኣረጋግጽ ።<legend>
.form-control-lg
.form-control-sm
.col
ከምቲ ኣብ ዝሓለፉ ኣብነታት ዝተገልጸ፡ ስርዓት ሽቦና ዝኾነ ቁጽሪ s ኣብ ውሽጢ a .row
ወይ ከተቐምጥ የኽእለካ .form-row
። ነቲ ዘሎ ስፍሓት ብማዕረ ኣብ መንጎኦም ክመቕልዎ እዮም። ብተወሳኺ ንኡስ ስብስብ ዓምድታትካ ክትመርጽ ትኽእል ኢኻ ውሑድ ወይ ውሑድ ቦታ ክትወስድ፣ እቶም ዝተረፉ .col
s ድማ ነቶም ዝተረፉ ብማዕረ ይመቕሉ፣ ምስ ፍሉያት ዓምድታት ክፍልታት ከም .col-7
.
እዚ ኣብ ታሕቲ ዘሎ ኣብነት flexbox ዩቲሊቲ ብምጥቃም ትሕዝቶታት ብቐጥታ ማእከል ብምግባር ዓምድታትካ ክንዲ ዘድሊ ቦታ ጥራይ ንኽወስዱ .col
ይቕየር ። .col-auto
ብኻልእ ኣዘራርባ፡ እቲ ዓምዲ ኣብ ትሕዝቶኡ ተመርኲሱ ንርእሱ ዓቐን ይገብሮ።
ድሕሪኡ ንሱ ዳግማይ ብዓቐን-ፍሉይ ዓምዲ ክፍልታት ዳግማይ ክትሓዋወሶ ትኽእል ኢኻ።
ከምኡ ውን ብርግጽ ብሕታዊ ቅጥዒ ቁጽጽር ይድገፍ።
ነቲ .form-inline
ክፍሊ ተጠቒምካ ተኸታታሊ ስያመታት፣ ቅጥዒ ቁጽጽርን መጠወቒታትን ኣብ ሓደ ኣግማድ መስርዕ ንምርኣይ ተጠቐም። ኣብ ውሽጢ መስመር ቅጥዕታት ዝርከቡ ቁጽጽር ቅጥዒ ካብቲ ነባሪ ኩነታቶም ቁሩብ ይፈላለዩ።
- ቁጽጽራት , ዝኾነ HTML ጻዕዳ ቦታ ዘፍርስን ምስ ርሕቀትን ፍሌክስቦክስ ዩቲሊቲታትን ናይ
display: flex
ኣሰላልፋ ቁጽጽር ክትህብ ዘኽእለካ እዩ ።
- ቁጽጽርን ምእታው ጉጅለታትን
width: auto
ነቲ ናይ ቡትስትራፕ ነባሪ ንምግዳፍ ይቕበሉ width: 100%
።
- ቁጽጽር ኣብ ሞባይል መሳርሒታት ጸቢብ ቪውፖርት ንምሕሳብ ብውሑዱ 576px ስፍሓት ዘለዎም ቪውፖርት ጥራይ እዮም ኣብ መስመር ዝረኣዩ ።
ስፍሓትን ኣሰላልፋን ናይ ውልቀ ቅጥዒ ቁጽጽር ምስ ናይ ርሕቀት መገልገሊታት ብኢድካ ክትኣልዮ ከድልየካ ይኽእል እዩ (ከምቲ ኣብ ታሕቲ ዘሎ)። ኣብ መወዳእታ <label>
፡ ዋላ’ውን ካብ ዘይ-ስክሪንሪደር በጻሕቲ ምስ ክትሓብኦ እንተድኣ ኣድልዩካ፡ ኩሉ ግዜ ምስ ነፍሲ ወከፍ ቅጥዒ ምቁጽጻር ምሕዋስካ ኣረጋግጽ .sr-only
።
ብሕታዊ ቅጥዒ ቁጽጽርን ምምራጽን እውን ይድገፍ እዩ።
ኣማራጺታት ናይ ሕቡእ ስያመታት
ከም ስክሪን ሪደር ዝኣመሰሉ ሓገዝቲ ቴክኖሎጂታት ንነፍሲ ወከፍ እታዎት ምልክት እንተዘይኣእቲኻዮም ኣብ ቅጥዕታትካ ጸገም ክህልዎም እዩ። .sr-only
ነዞም ኣብ ውሽጢ መስመር ዝርከቡ ቅጥዕታት፡ ነቲ ክፍሊ ተጠቒምካ ነቶም ስያመታት ክትሓብኦም ትኽእል ኢኻ ። ንሓገዝቲ ቴክኖሎጂታት ምልክት ንምሃብ ተወሳኺ ኣማራጺ ሜላታት ኣሎ፡ ከም aria-label
, aria-labelledby
ወይ title
ባህሪ። ካብዚኦም ዝኾነ እንተዘይሃልዩ፡ ሓገዝቲ ቴክኖሎጂታት ነቲ ባህሪ ምጥቃም ክጥቀሙ ይኽእሉ እዮም ፡ እንተሃልዮም፡ ግን ከም መተካእታ ካልኦት ኣገባባት ምልክት placeholder
ምጥቃም ከምዘይምከር ኣስተውዕል ።placeholder
ብደረጃ ብሎክ ሓገዝ ጽሑፍ ኣብ ቅጥዕታት (ቅድሚ ሕጂ ኣብ v3 .form-text
ከም ዝፍለጥ ) ተጠቒምካ ምፍጣር ይከኣል። .help-block
ናይ ውሽጢ መስመር ሓገዝ ጽሑፍ ዝኾነ ናይ ውሽጢ መስመር HTML ባእታን ዩቲሊቲ ክፍልታትን ከም .text-muted
.
ናይ ሓገዝ ጽሑፍ ምስ ቁጽጽር ቅጥዒ ምትእስሳር
ናይ ሓገዝ ጽሑፍ ምስቲ ምስቲ ባህሪ ምጥቃም ዝዛመድ ናይ ቅጥዒ ምቁጽጻር ብግልጺ ክተሓሓዝ ኣለዎ aria-describedby
። እዚ ድማ ሓገዝቲ ቴክኖሎጂታት-ከም ስክሪን ሪደርስ-እቲ ተጠቃሚ ኣብቲ ቁጽጽር ኣብ ዘተኩረሉ ወይ ምስ ኣተወ ነዚ ናይ ሓገዝ ጽሑፍ ከም ዘበስሩ ከረጋግጽ እዩ።
ኣብ ትሕቲ እታዎታት ዘሎ ናይ ሓገዝ ጽሑፍ ብ .form-text
. እዚ ክፍሊ display: block
ካብቶም ኣብ ላዕሊ ዘለዉ እታዎታት ንቐሊል ርሕቀት ገለ ላዕለዋይ ወሰን ዘጠቓልልን ዝውስኽን እዩ።
ፓስዎርድካ ካብ 8-20 ፊደላት ንውሓት ዘለዎ፣ ፊደላትን ቁጽርታትን ዝሓዘ ክኸውን ኣለዎ፣ ከምኡ’ውን ነጥቢ፣ ፍሉያት ፊደላት ወይ ኢሞጂ ክህልዎ የብሉን።
ኣብ መስመር ዘሎ ጽሑፍ ዝኾነ ልሙድ ናይ ውሽጢ መስመር HTML ባእታ (a <small>
, <span>
, ወይ ካልእ ይኹን) ብዘይካ ዩቲሊቲ ክፍሊ ንላዕሊ ካልእ ክጥቀም ይኽእል።
ኣብ ሓደ እታው ቡልያን ባህሪ ምውሳኽ disabled
ተጠቃሚ ምትእስሳር ንምክልኻልን ቀሊል ንኽመስልን።
ንኹሉ ኣብ ውሽጢ ዘሎ ቁጽጽር ንምስንኻል ነቲ disabled
ባህሪ ናብ a ወስኸሉ ።<fieldset>
መጠንቀቕታ ምስ መልህቕ
ብነባሪ፡ ዳህሰስቲ ንኹሎም ኣብ ውሽጢ a ዝርከቡ ተወላዲ ቅጥዒ ቁጽጽር ( <input>
፡ ከምኡ’ውን ባእታታት) ከም ዝተሰናኸሉ ክሕዝዎም እዮም፡ እዚ ድማ ንኽልቲኦም ናይ ቁልፊ ሰሌዳን ማውስን ምትእስሳር ኣብኦም ክኽልክሉ እዮም <select>
። ይኹን እምበር፡ ቅጥዕኻ ባእታታት እውን ዘጠቓለለ እንተኾይኑ፡ እዚኦም ቅዲ ናይ . ከምቲ ኣብቲ ብዛዕባ ዝተሰናኸለ ኩነታት መጠወቒታት ዝብል ክፋል (ብፍላይ ድማ ኣብቲ ንኡስ ክፍሊ ንመልህቕ ባእታታት) ዝተገልጸ፡ እዚ ናይ CSS ባህሪ ገና ደረጃ ዘለዎ ኣይኮነን ኣብ ኢንተርነት ኤክስፕሎረር 10 ምሉእ ብምሉእ ኣይድገፍን እዩ፡ ከምኡ’ውን ተጠቀምቲ ሰሌዳ ቁልፊ ከይከውን ኣይክኽልክሎምን እዩ። ነዞም መላግቦታት ከተኩር ወይ ከንቀሳቕሶም ዝኽእል ምዃኑ’ዩ። ስለዚ ውሑስ ንምዃን፡ ከምዚ ዝኣመሰለ መላግቦታት ንምዕጻው ብሕታዊ ጃቫስክሪፕት ተጠቐም።<button>
<fieldset disabled>
<a ... class="btn btn-*">
pointer-events: none
ስግረ-ብራውዘር ምትእስሳር
ቡትስትራፕ ነዞም ቅዲታት ኣብ ኩሎም ዳህሰስቲ ክጥቀመሎም እንከሎ፡ ኢንተርነት ኤክስፕሎረር 11ን ትሕቲኡን ግን ነቲ disabled
ባህሪ ኣብ ሓደ <fieldset>
. ኣብዞም ዳህሰስቲ ንዘሎ ስብስብ ዓውዲ ንምስንኻል ብሕታዊ ጃቫስክሪፕት ተጠቐም።
ንተጠቀምትኻ ብኤችቲኤምኤል5 ቅጥዒ ምጽዳቕ ዋጋ ዘለዎ፣ ተግባራዊ ዝኾነ ግብረ መልሲ ምሃብ– ኣብ ኩሎም ዝድገፉ ኣሰጋገርትና ዝርከብ . ካብቲ ናይ መርበብ ሓበሬታ ነባሪ ናይ ምጽዳቕ ግብረ መልሲ ምረጽ፣ ወይ ድማ ብሕታዊ መልእኽትታት ምስቲ ኣብ ውሽጢ ዝተሃንጸ ክፍልታትናን ጀማሪ ጃቫስክሪፕትናን ተግባራዊ።
ኣብዚ እዋን’ዚ ብሕታዊ ቅዲታት ምጽዳቕ ክትጥቀሙ ንመክር፣ ምኽንያቱ ተወላዲ መርበብ ሓበሬታ ነባሪ መልእኽትታት ምጽዳቕ ኣብ ኩሎም መርበብ ሓበሬታታት (ብዓቢኡ፡ Chrome ኣብ ዴስክቶፕን ሞባይልን) ብቐጻሊ ንሓጋዚ ቴክኖሎጂታት ስለዘይቃልዑ።
ቅጥዒ ምጽዳቕ ምስ ቡትስትራፕ ብኸመይ ከም ዝሰርሕ ኣብዚ ኣሎ፤
- ናይ HTML ቅጥዒ ምጽዳቕ ብመንገዲ ናይ CSS ክልተ ናይ ሓሶት ክፍልታት ይትግበር፣
:invalid
ከምኡውን :valid
. <input>
ን ፣ <select>
፣ ከምኡውን <textarea>
ባእታታት ይምልከት ።
- ቡትስትራፕ ነቲ
:invalid
and :valid
ቅዲታት ናብ ወላዲ .was-validated
ክፍሊ ይሽፍኖ፣ መብዛሕትኡ ግዜ ኣብቲ <form>
. እንተዘይኮይኑ ዝኾነ ዋጋ ዘይብሉ ዘድሊ ዓውዲ ኣብ ጽዕነት ገጽ ከም ዘይሕጋዊ ኮይኑ ይረአ። በዚ መንገዲ እዚ፡ መዓስ ከም እተነቓቕሖም ክትመርጽ ትኽእል ኢኻ (ብተለምዶ ድሕሪ ቅጥዒ ምቕራብ ምፍታን)።
- መልክዕ ናይቲ ቅጥዒ ዳግማይ ንምትዕርራይ (ንኣብነት፡ ኣብ ጉዳይ ዳይናሚክ ቅጥዒ ምቕራብ AJAX ብምጥቃም)፡ ነቲ
.was-validated
ክፍሊ ካብቲ <form>
ዳግማይ ድሕሪ ምቕራብ ኣውጽእዎ።
- ከም ምምላስ፣
.is-invalid
ከምኡውን ክፍልታት ኣብ ክንዲ እቶም ናይ ሓሶት ክፍልታት ንናይ ኣገልጋሊ ወገን ምጽዳቕ.is-valid
ክጥቀሙ ይኽእሉ . ናይ ወላዲ ክፍሊ ኣየድልዮምን እዩ ።.was-validated
<label>
ብሰንኪ ደረታት ኣብ ከመይ ከም ዝሰርሕ CSS ፡ ብዘይ ሓገዝ ብሕታዊ ጃቫስክሪፕት ኣብ DOM ቅድሚ ቅጥዒ ቁጽጽር ዝመጽእ ቅዲታት (ኣብዚ እዋን) ክንትግብሮ ኣይንኽእልን ኢና ።
- ኩሎም ዘመናውያን ዳህሰስቲ ነቲ ናይ ምድራት ምጽዳቕ ኤፒኣይ ይድግፉ ፣ እዚ ድማ ንመቆጻጸሪ ቅጥዒ ንምርግጋጽ ዝሕግዝ ተኸታታሊ ሜላታት ጃቫስክሪፕት እዩ።
- መልእኽትታት ግብረ መልሲ ነቲ ናይ መርበብ ሓበሬታ ነባሪ ነገራት (ንነፍሲ ወከፍ መርበብ ሓበሬታ ዝተፈላለየ፡ ብመንገዲ CSS ድማ ቅዲ ዘይብሉ) ወይ ድማ ነቲ ብሕታዊ ቅዲታት ግብረ መልሲና ምስ ተወሳኺ HTMLን CSSን ክጥቀሙ ይኽእሉ።
setCustomValidity
ብሕታዊ ናይ ቅኑዕነት መልእኽትታት ምስ ኣብ ጃቫስክሪፕት ክትህብ ትኽእል ኢኻ ።
ነዚ ኣብ ግምት ብምእታው፡ ነዞም ዝስዕቡ ዲሞታት ንናይ ብሕታዊ ቅዲታት ምጽራይ ቅጥዒና፡ ኣማራጺ ናይ ኣገልጋሊ ጎኒ ክፍልታትን ነባሪ ናይ መርበብ ሓበሬታን ኣብ ግምት ኣእትዉ።
novalidate
ንብሕታዊ ናይ Bootstrap ቅጥዒ ምጽዳቕ መልእኽትታት፡ ነቲ ቡልያን ባህሪ ኣብቲ ናትካ ክትውስኾ ከድልየካ እዩ <form>
። እዚ ነቲ ናይ መርበብ ሓበሬታ ነባሪ ናይ ግብረ መልሲ መሳርሒታት ምኽርታት የሰናኽሎ፣ ግን ሕጂ’ውን ናብቶም ኣብ ጃቫስክሪፕት ዘለዉ ናይ ቅጥዒ ምጽዳቕ ኤፒኣይታት መእተዊ ይህብ። ኣብ ታሕቲ ዘሎ ቅጥዒ ከተቕርቡ ፈትኑ፤ ጃቫስክሪፕትና ነቲ submit ዝብል መጠወቒ ዓጊቱ ግብረ መልሲ ክህበኩም እዩ።
ከተቕርብ ኣብ እትፍትነሉ እዋን ፡ ኣብ ቁጽጽር ቅጥዕኻ ዝትግበሩን ቅዲታትን :invalid
ክትዕዘብ ኢኻ ።:valid
ብሕታዊ ናይ ምጽዳቕ ግብረ መልሲ መልእኽትታት ወይ ናይ ቅጥዒ ባህርያት ንምቕያር ጃቫስክሪፕት ምጽሓፍ ተገዳስነት የብልካን? ኩሉ ጽቡቕ፡ ናይ መርበብ ሓበሬታ ነባሪ ክትጥቀም ትኽእል ኢኻ። ኣብ ታሕቲ ዘሎ ቅጥዒ ከ��ቕርቡ ፈትኑ። ከከም መርበብ ሓበሬታኻን ኦኤስካን ቁሩብ ዝተፈልየ ቅዲ ግብረ መልሲ ክትሪኢ ኢኻ።
እዞም ቅዲታት ግብረ መልሲ ብሲኤስኤስ ቅዲ ክግበሩ ዘይክእሉ እኳ እንተኾኑ፡ ሕጂ’ውን ነቲ ጽሑፍ ግብረ መልሲ ብመንገዲ ጃቫስክሪፕት ክትቅይሮ ትኽእል ኢኻ።
ብወገን ዓሚል ምጽራይ ክትጥቀም ንመክር፣ ግን ብወገን ኣገልጋሊ ኣብ ዘድልየካ እዋን፣ ዘይሕጋዊን ቅኑዕን ናይ ቅጥዒ ዓውድታት ብን ክትሕብር ትኽእል .is-invalid
ኢኻ .is-valid
። ኣስተውዕል .invalid-feedback
ምስዞም ክፍልታት እውን ይድገፍ እዩ።
ኣብነት ቅጥዕታትና ኣብ ላዕሊ ተወላዲ ጽሑፋዊ <input>
s የርእዩ፣ ግን ቅዲታት ምጽራይ ቅጥዒ ንናይ ብሕታዊ ቅጥዒ ቁጽጽርና እውን ይርከቡ፣ ንሳቶም እውን።
ናትካ ቅጥዒ ኣቀማምጣ እንተፈቒዱሉ፡ ነቶም .{valid|invalid}-feedback
ክፍልታት ብክፍልታት ክትቅይሮም ትኽእል ኢኻ .{valid|invalid}-tooltip
፡ ኣብ ቅዲ ዘለዎ መሳርሒ ምኽሪ ናይ ምጽዳቕ ግብረ መልሲ ንምርኣይ። position: relative
ንመሳርሒ ምኽሪ ኣቀማምጣ ዝኸውን ወላዲ ኣብ ልዕሊኡ ምህላውካ ኣረጋግጽ ። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ናይ ዓምዲ ክፍልታትና ድሮ እዚ ኣለዎም፡ ፕሮጀክትካ ግን ኣማራጺ ምድላው ከድልዮ ይኽእል እዩ።
ንዝያዳ ምምዕርራይን ስግረ-መርበብ ቅኑዕነትን፡ ምሉእ ብምሉእ ብሕታዊ ቅጥዒ ባእታታትና ተጠቐም ነባሪ መርበብ ሓበሬታ ንምትካእ። ኣብ ልዕሊ ትርጉማውን ተበጻሕን ምልክት ዝተሃንጹ ስለዝኾኑ፡ ንዝኾነ ነባሪ ምቁጽጻር ቅጥዒ ጽኑዓት መተካእታ እዮም።
ነፍሲ ወከፍ ሳጹን ምልክትን ሬድዮን ብሕታዊ ቁጽጽርና ንምፍጣር <div>
ምስ ሓደ ሓው ብሓደ ተጠቕሊሉ ነቲ ምስኡ ዘሎ ጽሑፍ ድማ a ተጠቕሊሉ ኣሎ። ብመዋቕራዊ መዳይ እዚ ከምቲ ናትና ነባሪ ኣገባብ እዩ .<span>
<label>
.form-check
~
ንኹለን ግዝኣታትና ዝኸውን ናይ ሓው መምረጺ ( ) ንጥቀመሉ <input>
-ከም :checked
—ንብሕታዊ ቅጥዒ መመልከቲና ብግቡእ ቅዲ ንምግባር። ምስቲ ክፍሊ ምስ እንውሃሃድ፡ ንነፍሲ ወከፍ ኣቕሓ ዝኸውን ጽሑፍ ኣብቲ 's state .custom-control-label
ተመርኲስና ቅዲ ክንገብር እውን ንኽእል ኢና ።<input>
ነቲ ነባሪ <input>
ምስ ንሓብኦን ነቲ opacity
ንጥቀመሉን .custom-control-label
ኣብ ቦታኡ ሓድሽ ብሕታዊ ቅጥዒ መመልከቲ ብ ::before
and ::after
. እቲ ዘሕዝን ግን ካብ just the ብሕታዊ ክንሃንጽ ኣይንኽእልን ኢና <input>
ምኽንያቱ CSS's content
ኣብቲ ባእታ ስለዘይሰርሕ።
ኣብቲ ዝተፈተሹ ኩነታት ፡ ካብ Open Iconic ዝመጹ base64 ዝተሰረቱ SVG ምልክታት ንጥቀም ። እዚ ድማ ኣብ መላእ ዳህሰስቲን መሳርሕታትን ንቅዲን ኣቀማምጣን ዝበለጸ ቁጽጽር ይህበና።
ብሕታዊ ሳጹናት ምልክት ብኢድ ብመንገዲ ጃቫስክሪፕት ክቕመጥ ከሎ እውን ነቲ ናይ ሓሶት ክፍሊ ክጥቀሙሉ ይኽእሉ እዮም :indeterminate
(ንዕኡ ዝገልጾ ዝርከብ ናይ ኤችቲኤምኤል ባህሪ የለን)።
jQuery ትጥቀም እንተኾንካ ከምዚ ዓይነት ነገር እኹል ክኸውን ኣለዎ፤
ብሕታዊ ሳጹናት ምልክትን ሬድዮታትን እውን ክስረዙ ይኽእሉ እዮም። disabled
ነቲ ቡልያን ባህሪ ናብቲ ምውሳኽ <input>
እሞ እቲ ብሕታዊ መመልከቲን መግለጺ ስያመን ብኣውቶማቲክ ቅዲ ክኸውን እዩ።
ብሕታዊ <select>
ምልክታታት ብሕታዊ ክፍሊ ጥራይ እዩ ዘድልዮም፣ .custom-select
ነቶም ብሕታዊ ቅዲታት ንምብጋስ። ብሕታዊ ቅዲታት ኣብቲ ናይ መጀመርታ መልክዕ ናይቲ 's ዝተሓጽሩ ኮይኖም ብሰንኪ ድሩትነት መርበብ ሓበሬታ <select>
ነቲ s ክቕይርዎ ኣይክእሉን እዮም ።<option>
ብተወሳኺ ካብ ንኣሽቱን ዓበይትን ብሕታዊ ምርጫታት ምስ ተመሳሳሊ ዓቐን ዘለዎም ናይ ጽሑፍ እታዎታትና ንኽሰማምዑ ክትመርጹ ትኽእሉ ኢኹም።
እቲ multiple
ባህሪ እውን ይድገፍ እዩ፤
ከምቲ size
ባህሪ ዘለዎ፤
ብሕታዊ <input type="range">
ቁጽጽር ብ ፍጠር .custom-range
. እቲ ትራክ (ድሕረ ባይታ)ን ኣጻብዕቲ ኢድን (እቲ ዋጋ) ክልቲኦም ኣብ መላእ መርበብ ሓበሬታታት ሓደ ዓይነት ንኽረኣዩ ቅዲ ኣለዎም። IEን Firefoxን ጥራይ ትራክኦም ካብ ጸጋማይ ወይ የማናይ ሸነኽ ኣጻብዕቲ ኢድ “ምምላእ” ከም መሳርሒ ምዕባለ ብዓይኒ ንምምልካት ስለ ዝድግፉ፡ ኣብዚ እዋን’ዚ ኣይንድግፎን ኢና።
min
ደረጃ እታዎታት ንን max
— 0
ከምኡውን 100
, ብቕደም ተኸተል ስዉር ክብርታት ኣለዎም ። ነቶም min
and max
ባህርያት ዝጥቀሙ ሓደስቲ ክብርታት ክትገልጽ ትኽእል ኢኻ።
ብነባሪ፡ ደረጃ ምእታው ናብ ምሉእ ቁጽሪ ክብርታት “ስናፕ” ይገብር። ነዚ ንምቕያር step
፡ ዋጋ ክትገልጽ ትኽእል ኢኻ። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ንብዝሒ ስጉምትታት ብዕጽፊ ንውስኾ step="0.5"
፡ .
እቲ ፋይል ምእታው ካብቲ ዕስለ እቲ ዝያዳ gnarly ኮይኑ ምስ ተግባራዊ Choose file... ከምኡ’ውን ዝተመርጸ ፋይል ስም ጽሑፍ ክትተሓሓዞም እንተደሊኻ ተወሳኺ ጃቫስክሪፕት ይሓትት ።
<input>
ነቲ ነባሪ ፋይል ብመንገዲ ንሓብኦ ኣብ opacity
ክንድኡ ድማ ነቲ <label>
. እቲ መጠወቒ ብ ::after
. ኣብ መወዳእታ ፡ ንከባቢ ዘለዎ ትሕዝቶ ግቡእ ርሕቀት ንምርካብ a width
and height
on the ንእውጅ።<input>
እቲ ናይ :lang()
ሓሶት ክፍሊ ነቲ “Browse” ዝብል ጽሑፍ ናብ ካልእ ቋንቋታት ንምትርጓም ንምፍቃድ ይጥቀመሉ። ኣብቲ ናይ Sass ተለዋዋጢ ኣታዊታት $custom-file-text
ምስቲ ዝምልከቶ ናይ ቋንቋ መለለዪን ከባብያዊ ሕብረ ቃላትን ምግዳፍ ወይ ምውሳኽ። እቶም ናይ እንግሊዝኛ ሕብረ ቃላት ብተመሳሳሊ መንገዲ ክመዓራረዩ ይኽእሉ እዮም። ንኣብነት፡ ሓደ ሰብ ትርጉም ስጳኛ ብኸመይ ክውስኸሉ ከም ዝኽእል እንሆ (ኮድ ቋንቋ ስጳኛ es
)፦
ኣብዚ lang(es)
ንስጳንኛ ትርጉም ዝኸውን ብሕታዊ ፋይል ምእታው ብተግባር ኣሎ፤
ቅኑዕ ጽሑፍ ንኽርአ ቋንቋ ናይቲ ሰነድካ (ወይ ንኡስ ገረብኡ) ብትኽክል ከተቐምጦ ከድልየካ እዩ። እዚ ኣብቲ ባእታ ዘሎ lang
ባህሪ ወይ ድማ HTTP header , ካብ ካልኦት ሜላታት ተጠቒምካ ክግበር ይከኣል ።<html>
Content-Language