ታሪኽ

ኣብቲ ቀዳሞት መዓልታት ትዊተር፡ መሃንድሳት ዳርጋ ዝኾነ ዝፈልጥዎ ቤተ-መጻሕፍቲ፡ ንቕድሚት ዝምልከት ረቛሒታት ንምምላእ ይጥቀሙ ነይሮም። ቡትስትራፕ ኣብቲ ናይ ትዊተር ናይ መጀመርታ ሃክዊክ ንዝቐረቡ ብድሆታትን ምዕባለ ብቕልጡፍ ዝተቀላጠፈን ብድሆታት መልሲ ኮይኑ እዩ ጀሚሩ።

ብሓገዝን ግብረ መልስን ብዙሓት መሃንድሳት ትዊተር፡ ቡትስትራፕ መሰረታዊ ቅዲታት ጥራይ ዘይኮነ፡ ዝያዳ ውቁብን ነዊሕ ዝጸንሕን ናይ ቅድሚት ዲዛይን ቅዲታት ዘጠቓለለ ብዓቢኡ ዓብዩ።

ተወሳኺ ኣብ dev.twitter.com ኣንብብ ›

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

ቡትስትራፕ ኣብ ዓበይቲ ዘመናውያን መርበባት ሓበሬታ ከም ክሮም፡ ሳፋሪ፡ ኢንተርነት ኤክስፕሎረርን ፋየርፎክስን ተፈቲኑን ይድገፍን እዩ።

• ናይ መወዳእታ ሳፋሪ
• ናይ መወዳእታ ጉግል ክሮም
• ፋየርፎክስ 4+
• ኢንተርነት ኤክስፕሎረር 7+
• ኦፔራ 11

እንታይ ተሓዊስዎ ኣሎ።

ቡትስትራፕ ምስ ዝተጠርነፉ CSS፣ ዘይተጠርነፉን ኣብነታዊ ቅጥዕታትን ምሉእ ብምሉእ ይመጽእ እዩ።

• ኩሎም ኦርጅናል .less ፋይላት
• ምሉእ ብምሉእ ዝተጠርነፈን ዝተቐነሰን CSS
• ምሉእ ናይ ቅዲ መምርሒ ሰነድ
• ኣብነት ገጽ ቅጥዒ (ተወሳኺ ኣብ ቀረባ እዋን)

ነባሪ ሽቦ

ከም ኣካል ቡትስትራፕ ዝቐረበ ነባሪ ስርዓተ ሽቦ 940px ስፍሓት ዘለዎ 16 ዓምድታት ዘለዎ ሽቦ እዩ። መኣዛ ናይቲ ህቡብ 960 ግሪድ ስርዓት እዩ፡ ግን ብዘይ ተወሳኺ ወሰን/ፓዲንግ ኣብ ጸጋማይን የማናይን ሸነኽ።

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

ከምቲ ኣብዚ ንርእዮ ዘለና፡ መሰረታዊ ኣቀማምጣ ብኽልተ "ዓምድታት" ክፍጠር ይኽእል፡ ነፍሲ ወከፎም ንብዙሓት ካብቶም ከም ኣካል ስርዓተ ሽቦና ዝገለጽናዮም 16 መሰረታውያን ዓምድታት ዝሽፍኑ እዮም። ንተወሳኺ ፍልልያት ኣብ ታሕቲ ዘለዉ ኣብነታት ርአ።

<div ክፍሊ = "መስመር" > 
  <div class = "span6 ዓምድታት" > 
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "span10 ዓምድታት" > 
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ጽኑዕ ኣቀማምጣ

እቲ ነባሪን ቀሊልን 940px-ስፍሓት ዘለዎ፣ ማእከል ዝገበረ ኣቀማምጣ ዳርጋ ንዝኾነ መርበብ ሓበሬታ ወይ ገጽ ብሓደ ዝቐረበ <div.container>.

<ኣካል> ዝብል እዩ።
  <div class = "መትሓዚ" > 
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
</body> ዝብል ጽሑፍ ኣሎ።

ፈሳሲ ኣቀማምጣ

ኣማራጺ፡ ተዓጻጻፊ ፈሳሲ ገጽ ኣቃውማ ምስ min-ን max-ስፍሓትን ጸጋማይ ኢድ ጎድናዊ መስመርን። ንኣፕስን ዶክስን ብሉጽ እዩ።

<ኣካል> ዝብል እዩ።
  <div class = "መትሓዚ-ፈሳሲ" > 
    <div class = "ጎድናዊ መስመር" > 
      ...
    </div> ዝብል ጽሑፍ ኣሎ።
    <div class = "ትሕዝቶ" > ዝብል ጽሑፍ ኣሎ። 
      ...
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</body> ዝብል ጽሑፍ ኣሎ።

ኣርእስታት & ቅዳሕ

ንገጻት መርበብ ሓበሬታኻ ንምውዳብ ዝሕግዝ መደበኛ ስርዓተ-ጽሕፈት።

ምሉእ ናይ ታይፕግራፊክ ሽቦ ኣብ ክልተ Less ተለዋዋጢ ኣብ preboot.less ፋይልና ዝተመርኮሰ እዩ: @basefontከምኡውን @baseline. እቲ ቀዳማይ ኣብ ምሉእ ዝጥቀመሉ መሰረታዊ ቅርጺ-ዓቐን ኮይኑ እቲ ካልኣይ ድማ መሰረታዊ መስመር-ቁመት እዩ።

ነቶም ተለዋዋጢ ረቛሒታት፡ ገለ ሒሳብ ድማ ንጥቀመሎም፡ ናይ ኩሉ ዓይነትናን ካልእን ወሰን፡ ፓዲንግን መስመር-ቁመትን ንፈጥር።

h1. ርእሲ 1

h2. ርእሲ 2

h3. ርእሲ 3

h4. ርእሲ 4

h5. ርእሲ 5

h6. ርእሲ 6

ኣብነት ሕጡበ ጽሑፍ

ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፐርቱረንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

ኣብነት ኣርእስቲ ንኡስ ኣርእስቲ ኣለዎ...

Misc. ባእታታት

ምጉላሕ፡ ኣድራሻታት፡ & ኣሕጽሮተ ቃላት ምጥቃም

<strong> <em> <address> <abbr>

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

ናይ ሓደ ቃል ወይ ሓረግ ብተዛማዲ ምስቲ ኣብ ከባቢኡ ዘሎ ቅዳሕ ተወሳኺ ኣገዳስነት ወይ ምጉላሕ ንምምልካት ናይ ምጉላሕ መለለዪታት ( <strong>ከምኡውን ) ክጥቀሙ ይግባእ። ንኣገዳስነትን ንውጥረት ምጉላሕን <em>ተጠቐም ።<strong><em>

ኣብ ሓደ ሕጡበ ጽሑፍ ምጉላሕ

ፉስ ዳፒቡስ ፣ ቴሉስ ኣክ ከርሱስ ኮሞዶ ፣ ቶርቶር ማውሪስ ኮንዲመንቱም ኒብህ ፣ ኡት ፈርመንቱም ማሳ ጁስቶ ኮፍ ኣሜት ሪሱስ። ማሴናስ ፋውሲበስ ሞሊስ ኢንተርዱም ዝበሃል እዩ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ።

መተሓሳሰቢ ፡ ሕጂ’ውን ኣብ HTML5 ምጥቃምን መለለዪታትን ጸገም የብሉን <b>፡ ብቕደም <i>ተኸተል ድማ ብድሙቕን ሰያፍን ቅዲ ክህልዎም የብሉን (ዋላ’ኳ ዝያዳ ትርጉማዊ ባእታ እንተሃልዩ፡ ተጠቐመሉ)። <b>ተወሳኺ ኣገዳስነት ከየመሓላልፍ ቃላት ወይ ሓረጋት ንምጉላሕ ዝዓለመ ክኸውን ከሎ <i>፡ መብዛሕትኡ ግዜ ንድምጺ፡ ቴክኒካዊ ቃላት ወዘተ ዝኸውን እዩ።

ኣድራሻታት

እቲ <address>ባእታ ንዝቐረበ ኣቦሓጎኡ፡ ወይ ንመላእ ኣካል ስራሕ ንዝግበር ርክብ ሓበሬታ ይጥቀመሉ። ከመይ ይመስል ኣብዚ ኣሎ፤

ትዊተር፡ ኢንክ
795 ፎልሶም ኣቨ፡ ሱት 600
ሳን ፍራንሲስኮ፡ ሲኤ 94107
ፒ ፡ (123) 456-7890

መተሓሳሰቢ ፡ ነፍሲ ወከፍ መስመር ኣብ ሓደ <address>ብመስመር-ምብታኽ ( <br />) ክውዳእ ኣለዎ ወይ ድማ ብደረጃ ብሎክ መለለዪ (ንኣብነት <p>፡ ) ክጥቕለል ኣለዎ፡ ነቲ ትሕዝቶ ብግቡእ ንምውዳብ።

ኣሕጽሮተ ቃላት

ንኣሕጽሮተ ቃላትን ኣሕጽሮተ ቃላትን፡ ነቲ <abbr>መለለዪ ተጠቐም ( <acronym>ኣብ HTML5 ተኣልዩ ኣሎ )። ነቲ ናይ ሓጺር ጽሑፍ ቅጥዒ ኣብ ውሽጢ እቲ መለለዪ ኣቐምጦ እሞ ንሙሉእ ስም ኣርእስቲ ኣቐምጦ።

ብሎክኮትስ

<blockquote> <p> <small>

ከመይ ጌርካ ትጠቅስ

ብሎክኮት ንምሕዋስ፡ ጠቕሊልካ <blockquote>ምልክት <p>ምግባር <small>። <small>ምንጪኻ ንምጥቃስ ነቲ ባእታ ተጠቐመሉ —ቅድሚኡ ድማ em dash ክትረክብ ኢኻ።

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ ፖሱረ ኤራት ሓደ ኣንቴ ቬነናቲስ ዳፒቡስ ፖሱረ ቬሊት ኣሊኬት።

ዶክተር ጁልየስ ሂበርት።

ዘይተኣዘዘ<ul>

• ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
• ኮንሰክተተር ኣዲፒሲንግ ኤሊት
• ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
• ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
• ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
  • ፋሰለስ ኢያኩሊስ ነከ ዝበሃል እዩ።
  • ፑሩስ ሶዳለስ ኡልትሪሲስ
  • ቬስቲቡሉም ላኦሪት ፖርቲቶር ሴም
  • ኣክ ትሪስቲክ ሊበሮ ቮሉትፓት ኣብ
• ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
• ኤንየን ኮፍ ኣመት ኤራት ኑንክ
• ኤጌት ፖርቲቶር ሎረም

ቅዲ ዘይብሉ<ul.unstyled>

• ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
• ኮንሰክተተር ኣዲፒሲንግ ኤሊት
• ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
• ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
• ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
  • ፋሰለስ ኢያኩሊስ ነከ ዝበሃል እዩ።
  • ፑሩስ ሶዳለስ ኡልትሪሲስ
  • ቬስቲቡሉም ላኦሪት ፖርቲቶር ሴም
  • ኣክ ትሪስቲክ ሊበሮ ቮሉትፓት ኣብ
• ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
• ኤንየን ኮፍ ኣመት ኤራት ኑንክ
• ኤጌት ፖርቲቶር ሎረም

ተኣዚዙ<ol>

1. ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት።
2. ኮንሰክተተር ኣዲፒሲንግ ኤሊት
3. ምሉእ ቁጽሪ ሞለስቲ ሎረም ኣብ ማሳ
4. ፋሲሊሲስ ኣብ ፕሪቲየም ኒስል ኣሊኬት
5. ኑላ ቮሉትፓት ኣሊኳም ቬሊት።
6. ፋውሲቡስ ፖርታ ላከስ ፍሪንጊላ ቬል
7. ኤንየን ኮፍ ኣመት ኤራት ኑንክ
8. ኤጌት ፖርቲቶር ሎረም

መግለፂdl

መግለጺ ዝርዝር

ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።

ዩይስሞድ

ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.

Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.

ማሌሱዋዳ ፖርታ

ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።

ጠረጴዛታት ምህናጽ

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

ጠረጴዛታት ብሉጻት እዮም- ንብዙሕ ነገራት። ዓበይቲ ሰደቓታት ግን ጠቐምቲ፣ ስኬላብልን ተነባብን (ብደረጃ ኮድ) ንኽኾኑ ቁሩብ ናይ ምልክት ፍቕሪ የድልዮም። ገለ ንምሕጋዝ ዝሕግዙ ምኽርታት ኣብዚ ኣለዉ።

ኩሉ ግዜ ርእስታት ዓምድታትካ <thead>ብኸምዚ ዝኣመሰለ ደረጃ ጠቕልሎ <thead>> <tr>> <th>።

ምስ ርእሲ ዓምድታት ዝመሳሰል፡ ኩሉ ትሕዝቶ ኣካላት ሰደቓኻ ኣብ ሓደ ክጥቕለል ኣለዎ <tbody>ስለዚ ስርዓተ-መሰረትካ <tbody>> <tr>> <td>ይኸውን።

ኣብነት፡ ነባሪ ቅዲታት ሰደቓ

ኩሎም ሰደቓታት ብተነባብነት ንምርግጋጽን ኣቃውማ ንምዕቃብን ብኣውቶማቲክ ኣገደስቲ ዶባት ጥራይ ዘለዎም ቅዲ ክግበሩ እዮም። ተወሳኺ ክፍልታት ወይ ባህርያት ምውሳኽ ኣየድልን።

#	ናይ መጀመርታ ሽም	ናይ መወዳእታ ሽም	ቋንቋ
1.	ንእሽተይ	ሓደ	ኢንግሊሽ
2.	ጆ	ሲክስፓክ	ኢንግሊሽ
3.	ስቱ	ደንት ዝብል ጽሑፍ ኣሎ።	ኮድ

<ሰንጠረዥ>
  ...
</table> ዝብል ጽሑፍ ኣሎ።

ኣብነት፡ ዜብራ-ስሪት ዘለዎ

ዜብራ-ስትሪፒንግ ብምውሳኽ ምስ ሰደቓታትካ ቁሩብ ፋንሲ ውሰድ- .zebra-stripedክላስ ጥራይ ወስኸሉ።

#	ናይ መጀመርታ ሽም	ናይ መወዳእታ ሽም	ቋንቋ
1.	ንእሽተይ	ሓደ	ኢንግሊሽ
2.	ጆ	ሲክስፓክ	ኢንግሊሽ
3.	ስቱ	ደንት ዝብል ጽሑፍ ኣሎ።	ኮድ

መተሓሳሰቢ ፡ Zebra-striping ንኣረጊት መርበባት ሓበሬታ ከም IE8ን ትሕቲኡን ዘይርከብ ገስጋሲ ምምሕያሽ እዩ።

<ሰንጠረዥ ክፍሊ = "ዜብራ-ስሪፕድ" > 
...
</table> ዝብል ጽሑፍ ኣሎ።

ኣብነት፡ ዜብራ-ስትሪፕድ w/ TableSorter.js

ነቲ ዝሓለፈ ኣብነት ብምውሳድ፡ ብመንገዲ jQuery ን Tablesorter plugin ን ናይ ምፍላይ ተግባር ብምሃብ፡ ጠቕሚ ናይ ሰደቓታትና ነመሓይሽ። ነቲ ምድላው ንምቕያር ናይ ዝኾነ ዓምዲ ርእሲ ጠውቕ።

#	ናይ መጀመርታ ሽም	ናይ መወዳእታ ሽም	ቋንቋ
1.	ናትካ	ሓደ	ኢንግሊሽ
2.	ጆ	ሲክስፓክ	ኢንግሊሽ
3.	ስቱ	ደንት ዝብል ጽሑፍ ኣሎ።	ኮድ

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> ዝብል ጽሑፍ ኣሎ። 
<ስክሪፕት > ዝብል ጽሑፍ ኣሎ። 
  $ ( ተግባር () { . 
    $ ( "ሰንጠረዥ#ኣብነት ሰሌዳ ምድላው" ). tablesorter ({ ዝርዝር ምድላው : [[ 1 , 0 ]] });  
  });
</script> ዝብል ጽሑፍ ኣሎ።
<ሰንጠረዥ ክፍሊ = "ዜብራ-ስሪፕድ" > 
  ...
</table> ዝብል ጽሑፍ ኣሎ።

ነባሪ ቅዲታት

ኩሎም ቅጥዕታት ብዝነበብን ብዝዓቢን መንገዲ ንምቕራብ ነባሪ ቅዲታት ይወሃቦም። ቅዲታት ንጽሑፍ ምእታው፣ ዝርዝር ምምራጽ፣ ናይ ጽሑፍ ቦታታት፣ ናይ ሬድዮ መጠወቒታትን ናይ ምልክት ሳጹናትን፣ ከምኡውን መጠወቒታት ይቐርቡ።

ኣብነት ቅጥዒ ኣፈ ታሪኽ

X-ዓቢ እታወታት

ምረፅ

1. 2. 3. 4. 5.

ምረፅ

1. 2. 3. 4. 5.

ዘይእረም እታወታት

ገለ ዋጋ ኣብዚ

ስንኩል ምእታው

X-ዓቢ እታወታት

ንእሽቶ ቁንጣሮ ጽሑፍ ሓገዝ

ኣብነት ቅጥዒ ኣፈ ታሪኽ

ቅድሚኡ ዝተጻሕፈ ጽሑፍ

@

ቅድሚኡ ዝነበረ ሳጹን ምልክት

ተወሰኸ ሳጹን ምልክት

ፋይል ምእታው

ኣብነት ቅጥዒ ኣፈ ታሪኽ

ዝርዝር ኣማራጺታት

• ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን።
• ኣማራጺ ክልተ እውን ምፍታሽን ኣብ ውጽኢት ቅጥዒ ምእታውን ይከኣል
• ኣማራጺ ሰለስተ-እወ ገሚትካዮ-ኣብ ውጽኢት ቅጥዒ እውን ክምርመርን ክካተትን ይኽእል እዩ።
• ኣማራጺ ኣርባዕተ ተሰናኺሉ ስለዘሎ ምፍታሽ ኣይከኣልን።

መተሓሳሰቢ ፡ ስያመታት ንኹሎም ኣማራጺታት ንኣዝዩ ዝዓበየ ናይ ጠውቂ ቦታታትን ዝያዳ ኣብ ጥቕሚ ዝውዕል ቅጥዕን ይኸብብዎም።

ዕለት ደረጃ

ናብ ኩሉ ሰዓታት ከም ፓሲፊክ ስታንዳርድ ሰዓት (GMT -08:00) ይርአ።

Textarea ዝብል ጽሑፍ ኣሎ።

ኣድላዪ እንተኾይኑ ነቲ ኣብ ላዕሊ ዘሎ ዓውዲ ንምግላጽ ናይ ሓገዝ ጽሑፍ ምዕጋት።

ዝርዝር ኣማራጺታት

• ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን።
• ኣማራጺ ክልተ እውን ምፍታሽን ኣብ ውጽኢት ቅጥዒ ምእታውን ይከኣል

ለውጢ ምዕቃብ  ሰርዝ

ዝተደራረቡ ቅጥዕታት

ኣብ ናይ ቅጥዒኻ ኤችቲኤምኤል ወስኸሉ .form-stackedእሞ ኣብ ክንዲ ኣብ ጸጋሞም ኣብ ልዕሊ ዓውድታቶም ስያመታት ክህልዉኻ እዮም። እዚ ቅጥዕታትካ ሓጸርቲ እንተኾይኖም ወይ ንዝኸበዱ ቅጥዕታት ክልተ ዓምድታት እታዎታት እንተሃልዮምኻ ጽቡቕ ይሰርሕ።

ኣብነት ቅጥዒ ኣፈ ታሪኽ

X-ዓቢ እታወታት

ምረፅ

1. 2. 3. 4. 5.

ኣብነት ቅጥዒ ኣፈ ታሪኽ

X-ዓቢ እታወታት

ንእሽቶ ቁንጣሮ ጽሑፍ ሓገዝ

ዝርዝር ኣማራጺታት

• ሓደ ኣማራጺ እዚን እቲን እዩ-ንምንታይ ብሉጽ ምዃኑ ርግጸኛ ኩን።
• ኣማራጺ ክልተ እውን ምፍታሽን ኣብ ውጽኢት ቅጥዒ ምእታውን ይከኣል

መተሓሳሰቢ ፡ ስያመታት ንኹሎም ኣማራጺታት ንኣዝዩ ዝዓበየ ናይ ጠውቂ ቦታታትን ዝያዳ ኣብ ጥቕሚ ዝውዕል ቅጥዕን ይኸብብዎም።

ለውጢ ምዕቃብ  ሰርዝ

መጠወቒታት

ከም ውዕል፡ መጠወቒታት ንተግባራት ክጥቀሙ እንከለዉ፡ መላግቦታት ድማ ንነገራት ይጥቀሙ። ንኣብነት "Download" ዝብል መጠወቒ ክኸውን ይኽእል እዩ "ናይ ቀረባ እዋን ንጥፈታት" ድማ መላግቦ ክኸውን ይኽእል።

ኩሎም መጠወቒታት ብነባሪ ናብ ፍኹስ ዝበለ ግራጭ ቅዲ፣ ግን ብርክት ዝበሉ ተግባራዊ ክፍልታት ንዝተፈላለዩ ሕብራዊ ቅዲታት ክትግበሩ ይኽእሉ። እዞም ክፍልታት እዚኣቶም ሰማያዊ .primaryክፍሊ፡ ፍኹስ ዝበለ ሰማያዊ .infoክፍሊ፡ ቀጠልያ .successክፍሊ፡ ቀይሕ .dangerክፍሊ የጠቓልሉ። ተወሳኺ፡ ናይ ገዛእ ርእስኻ ቅዲታት ምጥቕላል ቀሊል peasy እዩ።

ኣብነት መጠወቒታት

ቅዲታት መጠወቒ ምስ ዝተተግበረ ኣብ ዝኾነ ነገር ክትግበር ትኽእል ኢኻ .btn። ብተለምዶ ነዚኦም ኣብ <a>, , ጥራይ ክትትግብርዎምን ባእታታት <button>ምረጽን ። <input>ከመይ ይመስል ኣብዚ ኣሎ፤

ተለዋዋጢ ዓቐናት

ዓበይቲ ወይ ዝነኣሱ መጠወቒታት ትፈትዉ? ኣብኡ ኣለካ!

ስንክልና ዘለዎ ኩነታት

ንጡፋት ዘይኮኑ ወይ ብሓደ ምኽንያት ወይ ብኻልእ ምኽንያት ብኣፕ ዝተሰናኸሉ መጠወቒታት፡ ነቲ ዝተሰናኸለ ኩነታት ተጠቐም። ንሱ .disabledድማ ንመላግቦታትን ንባእታታትን :disabledእዩ <button>።

ሊንክታት

መጠወቒታት

እንታይ እዩ

ናትና ላዕለዋይ ባር፡ ናይ ሓደ መርበብ ሓበሬታ ኣርማ ወይ ስም፡ ቀዳማይ ምድህሳስን ቅጥዒ ምድላይን ዝሓዘ ጽኑዕ ባር እዩ።

ብዓይነት ዝዳሎ

ኩሎም ኣብ ውሽጢ ዘለዉ ባእታታት፡ ከምኡ’ውን ምሉእ ላዕለዋይ ባር ከምኡ’ውን፡ ኣማራጺ እዮም። ኣርማ/ስም፡ nav፡ ምድላይን ካልኣዊ navን ከተካትት ትኽእል ኢኻ-ወይ ዝኾነ ውህደት ናይዚ።

ድሮፕዳውንድስ ሓዊሱ

ከም ኣካል ናይቲ ቀንዲ ምድህሳስ፡ ኣብ ናቭካ ንቑልቁል ዝወርድ ነገራት ናይ ምውሳኽ ዓቕሚ ኣካቲትናዮ ኣለና። ከመይ ከም ዝስራሕ ንምርኣይ ኣብ ላዕሊ ዘሎ ካልኣዊ nav (ብየማን ዝተሰለፈ) ርአ።

ትቦታትን ከኒናን

ቀሊል ካልኣይ ደረጃ ምድህሳስ ብ <ul>. ኣብ መንጎ ትቦታት ወይ ከኒናታት ዝምልከቶ ክፍሊ ብምውሳኽ ምልውዋጥ።

ንንኡሳን ክፍልታት ትሕዝቶ ከም ገጻት ቅጥዕታት ኣካውንትናን ኣብ መንጎ ገጻት ተመሳሳሊ ትሕዝቶ ንምቕያር ናይ ተጠቃሚ ግዜ መስመራትን ብሉጽ። ብታብ ወይ ከኒና ቅዲ ይርከብ።

• ገዛ
• መግለፂ
• መልእኽትታት
• ቅጥዕታት
• መርከቢ

<ul class = "ታብስ" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ንጡፍ" ><a href = "#" > ገዛ </a></li>  
  <li><a href = "#" > ፕሮፋይል </a></li> 
  <li><a href = "#" > መልእኽትታት </a></li> 
  <li><a href = "#" > ቅጥዕታት </a></li> 
  <li><a href = "#" > ርክብ </a></li> 
</ul> ዝብል ጽሑፍ ኣሎ።

• ገዛ
• መግለፂ
• መልእኽትታት
• ቅጥዕታት
• መርከቢ

<ul class = "ከኒናታት" > 
  <li class = "ንጡፍ" ><a href = "#" > ገዛ </a></li>  
  <li><a href = "#" > ፕሮፋይል </a></li> 
  <li><a href = "#" > መልእኽትታት </a></li> 
  <li><a href = "#" > ቅጥዕታት </a></li> 
  <li><a href = "#" > ርክብ </a></li> 
</ul> ዝብል ጽሑፍ ኣሎ።

ገጽ ምሃብ

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

<div class = "ገጽ ምጽሓፍ" > 
  <ul> ዝብል ጽሑፍ ኣሎ።
    <li class = "ቅድሚ ሕጂ ተሰናኺሉ" ><a href = "#" > ← ዝሓለፈ </a></li>  
    <li class = "ንጡፍ" ><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 class = "ዝቕጽል" ><a href = "#" > ዝቕጽል → </a></li> ዝብል ጽሑፍ ኣሎ።  
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

መሰረታዊ መጠንቀቕታታት

div.alert-message

ንሓደ ተግባር ውድቀት፣ ክህሉ ዝኽእል ውድቀት ወይ ዕዉትነት ንምጉላሕ ዝሕግዙ ናይ ሓደ መስመር መልእኽትታት። ብፍላይ ንቅጥዕታት ጠቓሚ እዩ።

መልእኽትታት ምዕጋት።

div.alert-message.block-message

ቁሩብ መብርሂ ንዘድልዮም መልእኽትታት፡ ናይ ሕጡበ ጽሑፍ ቅዲ መጠንቀቕታታት ኣለዉና። እዚኦም ንነዊሕ ናይ ጌጋ መልእኽትታት ንምፍንጃል፡ ንሓደ ተጠቃሚ ብዛዕባ ሓደ ኣብ ምጽባይ ዝርከብ ስጉምቲ ንምጥንቃቕ፡ ወይ ኣብቲ ገጽ ንዝያዳ ምጉላሕ ሓበሬታ ጥራይ ንምቕራብ ፍጹማት እዮም።

ሞዳላት

ሞዳላት-ዝርርባት ወይ ብርሃን ሳጹናት-ኣብቲ ድሕረ ባይታ ዓውደ-ጽሑፍ ምዕቃብ ኣገዳሲ ዝኾነሉ ኩነታት ንዓውደ-ጽሑፋዊ ተግባራት ብሉጻት እዮም።

መሳርሒታት ምኽርታት

ትዊፕሲ ንዝተደናገረ ተጠቃሚ ንምሕጋዝን ናብ ቅኑዕ ኣንፈት ንምምልካትን ሱፐር ጠቐምቲ እዮም።

ፖፖቨርስ ዝበሃል እዩ።

ንኣቀማምጣ ከይጸለወ ንሓደ ገጽ ንኡስ ጽሑፍ ሓበሬታ ንምሃብ ፖፖቨርስ ተጠቐም።

ቡትስትራፕ ብ Preboot ዝተሃንጸ ኮይኑ፡ ምስ Less ተተሓሒዙ ንኽጥቀመሉ ዝሕግዝ ክፉት ምንጪ ዘለዎ ፓክ ናይ ሚክሲንን ተለዋዋጥን ኮይኑ፡ ንዝቐልጠፈን ዝቐለለን ምዕባለ መርበብ ሓበሬታ ዝኸውን CSS preprocessor እዩ።

ኣብ Bootstrap Preboot ከመይ ጌርና ከም እንጥቀመሉን ኣብ ዝቕጽል ፕሮጀክትካ Less ክትሰርሕ እንተመሪጽካ ብኸመይ ክትጥቀመሉ ከም እትኽእልን ርአ።

ከመይ ጌርና ንጥቀመሉ

ነዚ ኣማራጺ ተጠቒምካ ናይ Bootstrap Less variables, mixins, ከምኡ ውን ኣብ CSS ብመንገዲ javascript ኣብ መርበብ ሓበሬታኻ ምሉእ ብምሉእ ክትጥቀመሉ ትኽእል።

<link rel = "ቅዲ ጽሑፍ/ውሑድ" href = "ውሑድ/ቡትስትራፕ.ውሑድ" ሚድያ = "ኩሉ" />    
<script src = "js/less-1.1.3.min.js" ></script> ዝብል ጽሑፍ ኣሎ። 

ናይ .js ፍታሕ ኣይስምዓካን ድዩ? ኮድካ ከተዋፍር ከለኻ ነቲ Less Mac ዝብል ኣፕ ፈትኖ ወይ ድማ Node.js ተጠቐም ንምጥርናፍ።

እንታይ ተሓዊስዎ ኣሎ።

ገለ ካብቲ ድምቀት ናይቲ ኣብ ትዊተር ቡትስትራፕ ከም ኣካል ቡትስትራፕ ተኻቲቱ ዘሎ እነሆ። ተወሳኺ ንምውራድን ንምፍላጥን ናብ መርበብ ሓበሬታ Bootstrap ወይ ገጽ ፕሮጀክት Github ኣቕንዑ።

ተለዋዋጢ ረቛሒታት

ኣብ Less ዝርከቡ ተለዋዋጢ ረቛሒታት ንናይ CSS ሕማም ርእሲ ነጻ ንምዕቃብን ንምዕራፍን ፍጹማት እዮም። ናይ ሕብራዊ ዋጋ ወይ ብተደጋጋሚ እትጥቀመሉ ዋጋ ክትቅይር ምስ እትደሊ ኣብ ሓደ ቦታ ኣዘምኖ እሞ ተሰሪዕካ ኣለኻ።

// መላግቦታት
@linkColor : #8b59c2 ዝብል ጽሑፍ ኣሎ ።         
@linkColorHover : ምጽላም (     @linkColor , 10 ); 
 
// ግራጭ
@ጸሊም : #000፤             
@grayDark :           ምብራህ ( @ጸሊም , 25 %)፤ 
@ግራጭ :               ምብራህ ( @ጸሊም , 50 %)፤ 
@grayLight :          ምብራህ ( @ጸሊም , 70 %)፤ 
@grayLighter :        ምብራህ ( @ጸሊም , 90 %)፤ 
@ጻዕዳ : #fff፤             
 
// ሕብርታት ላህጃ
@ሰማያዊ : #08b5fb ፤              
@ቀጠልያ : #46a546 ፤             
@ቀይሕ : #9d261d ፤               
@ብጫ : #ffc40d ፤            
@ኣራንሺ : #f89406 ፤            
@ሮዛ : #c3325f ፤              
@ሓምላይ : #7a43b6 ፤            
 
// መበገሲ ሽቦ
@ መሰረት ቅርጺ : 13px ;          
@ መበገሲ መስመር : 18px ;          

ርእይቶ ምሃብ

Less ብዘይካ ንቡር /* ... */ስነ-ቓል CSS ካልእ ቅዲ ርእይቶ ምሃብ እውን ይህብ።

// እዚ ርእይቶ እዩ።
/* እዚ ውን ርእይቶ እዩ */

ሚክሲን ንላዕሊ ዋዙ

ሚክሲን ብመሰረቱ ንሲኤስኤስ ዝኸውን ዘጠቓልል ወይ ከፊላዊ ኮይኑ፡ ንሓደ ብሎክ ኮድ ናብ ሓደ ከተዋሃህዶ የኽእለካ። ንሸያጢ ቅድመ-ጥብቆ ዘለዎም ባህርያት ከም box-shadow, መስቀላዊ-መርበብ ምዕባለታት, ቅርጺ ፊደላት, ካልእን ብሉጻት እዮም። ኣብ ታሕቲ ንኣብነት ናይቶም ምስ Bootstrap ዝተሓወሱ mixins ኣለዉ።

ቁጽሪ ቅርጺ ፊደላት

#ጽሑፍ {
  . ኣቋራጭ ( @ክብደት : ንቡር , @ዓቐን : 14px , @lineHeight : 20px ) {     
    ቅርጺ - ዓቐን : @ ዓቐን ; 
    ቅርጺ - ክብደት : @ ክብደት ; 
    መስመር - ቁመት : @lineHeight ; 
  } ።
  . sans - serif ( @ክብደት : ንቡር , @ዓቐን : 14px , @lineHeight : 20px ) {     
    font - family : "ሄልቨቲካ ኖይ" , ሄልቨቲካ , ኣርያል , sans - serif ;   
    ቅርጺ - ዓቐን : @ ዓቐን ; 
    ቅርጺ - ክብደት : @ ክብደት ; 
    መስመር - ቁመት : @lineHeight ; 
  } ።
  . serif ( @ክብደት : ንቡር , @ዓቐን : 14px , @lineHeight : 20px ) {     
    font - family : "ጆርጅያ" , ታይምስ ኒው ሮማን , ታይምስ , sans - serif ;     
    ቅርጺ - ዓቐን : @ ዓቐን ; 
    ቅርጺ - ክብደት : @ ክብደት ; 
    መስመር - ቁመት : @lineHeight ; 
  } ።
  . ሞኖስፔስ ( @ክብደት : ንቡር , @ዓቐን : 12px , @lineHeight : 20px ) {     
    font - family : "ሞናኮ" , መልእኽተኛ ሓድሽ , ሞኖስፔስ ;   
    ቅርጺ - ዓቐን : @ ዓቐን ; 
    ቅርጺ - ክብደት : @ ክብደት ; 
    መስመር - ቁመት : @lineHeight ; 
  } ።
} ።

ምዕባለታት (gradients)

#ግራድየንት {
  . horizontal ( @startColor : #555, @መወዳእታ ሕብሪ: #333) { 
    ድሕረ ባይታ - ሕብሪ : @endColor ; 
    ድሕረ ባይታ - ምድግጋም : ምድጋም - x ;
    ድሕረ ባይታ - ምስሊ : - khtml - ምዕባለ ( መስመራዊ , ጸጋማይ ላዕሊ , የማናይ ላዕሊ , ካብ ( @startColor ), ናብ ( @endColor )); // ኮንከሮር   
    ድሕረ ባይታ - ምስሊ : - moz - መስመራዊ - ምዕባለ ( ጸጋም , @startColor , @endColor ); // ኤፍ ኤፍ 3.6+    
    ድሕረ ባይታ - ምስሊ : - ms - መስመራዊ - ምዕባለ ( ጸጋም , @startColor , @endColor ); // IE10 ዝብል ጽሑፍ ኣሎ።    
    ድሕረ ባይታ - ምስሊ : - ዌብኪት - ምዕባለ ( መስመራዊ , ጸጋማይ ላዕሊ , የማናይ ላዕሊ , ሕብሪ - ደው ምባል ( 0 %, @startColor ), ሕብሪ - ደው ምባል ( 100 %, @endColor )); // ሳፋሪ 4+፣ ክሮም 2+    
    ድሕረ ባይታ - ምስሊ : - ዌብኪት - መስመራዊ - ምዕባለ ( ጸጋም , @startColor , @endColor ); // ሳፋሪ 5.1+፣ ክሮም 10+    
    ድሕረ ባይታ - ምስሊ : - o - መስመራዊ - ምዕባለ ( ጸጋም , @startColor , @endColor ); // ኦፔራ 11.10    
    ድሕረ ባይታ - ምስሊ : መስመራዊ - ምዕባለ ( ጸጋም , @startColor , @endColor ); // ለ ስታንዳርድ   
  } ።
  . ቀጥታዊ ( @startColor : #555, @መወዳእታሕብሪ: #333) { 
    ድሕረ ባይታ - ሕብሪ : @endColor ; 
    ድሕረ ባይታ - ምድግጋም : ምድጋም - x ;
    ድሕረ ባይታ - ምስሊ : - khtml - ምዕባለ ( መስመራዊ , ጸጋማይ ላዕሊ , ጸጋማይ ታሕቲ , ካብ ( @startColor ), ናብ ( @endColor )); // ኮንከሮር   
    ድሕረ ባይታ - ምስሊ : - moz - መስመራዊ - ምዕባለ ( @startColor , @endColor ); // ኤፍ ኤፍ 3.6+   
    ድሕረ ባይታ - ምስሊ : - ms - መስመራዊ - ምዕባለ ( @startColor , @endColor ); // IE10 ዝብል ጽሑፍ ኣሎ።   
    ድሕረ ባይታ - ምስሊ : - ዌብኪት - ምዕባለ ( መስመራዊ , ጸጋማይ ላዕሊ , ጸጋማይ ታሕቲ , ሕብሪ - ደው ምባል ( 0 %, @startColor ), ሕብሪ - ደው ምባል ( 100 %, @endColor )); // ሳፋሪ 4+፣ ክሮም 2+    
    ድሕረ ባይታ - ምስሊ : - ዌብኪት - መስመራዊ - ምዕባለ ( @startColor , @endColor ); // ሳፋሪ 5.1+፣ ክሮም 10+   
    ድሕረ ባይታ - ምስሊ : - o - መስመራዊ - ምዕባለ ( @startColor , @endColor ); // ኦፔራ 11.10   
    ድሕረ ባይታ - ምስሊ : መስመራዊ - ምዕባለ ( @startColor , @endColor ); // እቲ ደረጃ  
  } ።
  . ኣንፈታዊ ( @startColor : #555, @መወዳእታሕብሪ: #333, @deg: 45deg) { 
    ...
  } ።
  . ቀጥታዊ - ​​ሰለስተ - ሕብርታት ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  } ።
} ።

ስርሒታትን ስርዓት ሽቦን

ፋንሲ ውሰድ እሞ ገለ ሒሳብ ፈጺምካ ከምዚ ኣብ ታሕቲ ዘሎ ተዓጻጻፍን ሓያልን ሚክሲን ክትፈጥር።

// ግሪዲቱድ
@gridዓምድታት : 16 ;       
@gridዓምዲ ስፍሓት : 40px ;   
@ግሪድጉተርስፍሓት : 20px ;   
@siteWidth : ( @ዓምድታት ሽቦ * @ስፍሓት ዓምዲ ሽቦ ) + ( @ስፍሓት ሽቦ ጓተር * ( @ዓምድታት ሽቦ - 1 ));                 
 
// ስርዓት ሽቦ
. መትሓዚ { .
  ስፍሓት : @ስፍሓት ሳይት ; 
  margin : 0 ኣውቶማቲክ ;  
  . ንጹር ምእራም ();
} ።
. ዓምድታት ( @columnSpan : 1 ) { .  
  width : ( @ስፍሓት ዓምዲ ሽቦ * @ ዓምዲ ስፍሓት ) + ( @ስፍሓት ሽቦ ጓተር * ( @ ዓምዲ ስፍሓት - 1 ));         
} ።
. offset ( @ዓምዲኦፍሴት : 1 ) { .  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @ዓምዲOffset - 1 )) + @ተወሳኺ ቦታ ;           
} ።