ነባሪ ሽቦ

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

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

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

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

ጽኑዕ ኣቀማምጣ

መሰረታዊ 940px ስፍሓት ዘለዎ፣ ማእከል ዝገበረ ኣቀማምጣ መትሓዚ ዳርጋ ንዝኾነ መርበብ ሓበሬታ ወይ ገጽ።

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

ፈሳሲ ኣቀማምጣ

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

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

ኣርእስታትን ቅዳሕን

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

h1. ርእሲ 1

h2. ርእሲ 2

h3. ርእሲ 3

h4. ርእሲ 4

h5. ርእሲ 5

h6. ርእሲ 6

ኣብነት ሕጡበ ጽሑፍ

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

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

<strong>ንኡሳን ኣርእስታት እውን ምስቲ and ክትውስኽ ትኽእል ኢኻ ።<em>

ዝተፈላለየ. ባእታታት

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

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

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

ኣብ መንጎ ሓደ ቃል ወይ ሓረግን ኣብ ከባቢኡ ዘሎ ቅዳሕን ስእላዊ ፍልልይ ንምውሳኽ ናይ ምጉላሕ መለለዪታት ( <strong>ከምኡውን <em>) ክጥቀሙ ይግባእ። <strong>ንጽሩይ ናይ ቀደም ኣቓልቦን <em>ንስሉጥ ኣቓልቦን ኣርእስትታትን ተጠቐም ።

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

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

ኣድራሻታት

እቲ addressባእታ ንኣድራሻታት እዩ ዝውዕል-ገሚትካዮ! ከመይ ይመስል ኣብዚ ኣሎ፤

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

መተሓሳሰቢ ፡ ነፍሲ ወከፍ መስመር ኣብ ሓደ addressብመስመር-ምብታኽ ( <br />) ክውዳእ ኣለዎ፡ ነቲ ትሕዝቶ ኣብ ሓቀኛ ህይወት ብዘይ ዝኾነ ቅዲታት ኣብ ግብሪ ከም ዝንበብ ብግቡእ ንምውዳብ።

ኣሕጽሮተ ቃላት

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

ብሎክኮትስ

<blockquote> <p> <cite>

blockquoteኣብ ዙርያኻን paragraphመለለዪታትን ምጥቕላል ርግጸኛ ኩን cite። ምንጪ ክትጠቅስ ከለኻ ነቲ citeባእታ ተጠቐም። እቲ CSS ንሓደ ስም ብኣውቶማቲክ ብ em ዳሽ (—) ክቕድም እዩ።

ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፣ ኮንሰክተቱር ኣዲፒሲሲንግ ኤሊት፣ ሴድ ዶ ኢዩስሞድ ቴምፖር ኢንሲዲዱንት ኡት ላቦረ ኤት ዶሎር ማግና ኣሊክዋ...

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

ዘይተኣዘዘ<ul>

• ጀረሚ ቢክስቢ
• ሮበርት ደዙረ
• ጆሽ ዋሽንግተን
• ኣንቶን ካፕረሲ
• ደቂ ጋንታይ
  • ጆርጅ ካስታንዛ
  • ጀሪ ሳይንፈልድ
  • ኮስሞ ክራመር
  • ኢሌን ቤኒስ
  • ኒውማን
• ዮሃንስ ያእቆብ
• ፖል ፒርስ
• ኬቪን ጋርኔት።

ቅዲ ዘይብሉ<ul.unstyled>

• ጀረሚ ቢክስቢ
• ሮበርት ደዙረ
• ጆሽ ዋሽንግተን
• ኣንቶን ካፕረሲ
• ደቂ ጋንታይ
  • ጆርጅ ካስታንዛ
  • ጀሪ ሳይንፈልድ
  • ኮስሞ ክራመር
  • ኢሌን ቤኒስ
  • ኒውማን
• ዮሃንስ ያእቆብ
• ፖል ፒርስ
• ኬቪን ጋርኔት።

ተኣዚዙ<ol>

1. ጀረሚ ቢክስቢ
2. ሮበርት ደዙረ
3. ጆሽ ዋሽንግተን
4. ኣንቶን ካፕረሲ
5. ደቂ ጋንታይ
   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።

ልክዕ ከምቲ ናይ ዓምዲ ኣርእስታት፡ ኩሉ ናይ ሰደቓኻ ኣካል ትሕዝቶ ብ a ክጥቕለል ኣለዎ tbodyስለዚ ናትካ ስርዓተ-መሰረት tbody> tr> tdይኸውን።

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

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

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

<ሰንጠረዥ ክፍሊ="ናይ ሓባር-ሰንጠረዥ"> class = "ናይ ሓባር-ሰንጠረዥ" >
  ...
</table> ዝብል ጽሑፍ ኣሎ።

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

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

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

<table class="ናይ ሓባር-ሰንጠረዥ ዜብራ-ስሪት ዘለዎ"> class = "ናይ ሓባር-ሰንጠረዥ ዜብራ-ስሪት ዘለዎ" >
...
</table> ዝብል ጽሑፍ ኣሎ።

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

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

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

<ስክሪፕት ዓይነት="ጽሑፍ/ጃቫስክሪፕት" src="js/jquery/jquery.tablesorter.min.js"></ስክሪፕት> type = "ጽሑፍ/ጃቫስክሪፕት" src = "js/jquery/jquery.tablesorter.min.js" ></ስክሪፕት> 
< ዓይነት ስክሪፕት = "ጽሑፍ/ጃቫስክሪፕት" > 
  $ ( ሰነድ ). ድሉው ( ተግባር () { . 
    $ ( "ሰንጠረዥ#ኣብነት ሰሌዳ ምድላው" ). tablesorter ( { ዝርዝር ምድላው : [[ 1 , 0 ]]} );   
  });
</script> ዝብል ጽሑፍ ኣሎ።
<table class = "ናይ ሓባር-ሰንጠረዥ ዜብራ-ስሪት ዘለዎ" > 
  ...
</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.

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

ዝርዝር ኣማራጺታት

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

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

ለውጢ ምዕቃብ ሰርዝ

መጠወቒታት

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

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

ኣብነት መጠወቒታት

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

ተለዋዋጢ ዓቐናት

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

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

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

ሊንክታት

መጠወቒታት

እንታይ እዩ

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

ብዓይነት ዝዳሎ

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

ድሮፕዳውንድስ ሓዊሱ

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

ትቦታትን ከኒናን

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

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

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

<ul class="tabs"> ዝብል ጽሑፍ ኣሎ። 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="ከኒናታት"> ዝብል ምዃኑ ይፍለጥ 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="ገጽነት"> ዝብል ጽሑፍ ኣሎ። 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> ዝብል ጽሑፍ ኣሎ።

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

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

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

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

ሞዳላት

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

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

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

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

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

ከመይ ጌርና ንጥቀመሉ

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

<link rel="ቅዲ ጽሑፍ/ውሑድ" ዓይነት="ጽሑፍ/css" href="ውሑድ/ቦትስትራፕ.ውሑድ" ሚድያ="ኩሉ" /> rel = "ቅዲ ጽሑፍ/ውሑድ" ዓይነት = "ጽሑፍ/css" href = "ውሑድ/ቦትስትራፕ.ውሑድ" ሚድያ = "ኩሉ" />    
< ዓይነት ስክሪፕት = "ጽሑፍ/ጃቫስክሪፕት" src = "js/less-1.0.41.min.js" ></script>  

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

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

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

ተለዋዋጢ ሕብሪ

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

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

ርእይቶ ምሃብ

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    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(ጀምርሕብሪ='%d', መወዳእታሕብሪ='%d', ዓይነት ምዕባለ=1)" , @መጀመርታሕብሪ , @መወዳእታ ሕብሪ ); // IE8+ ዝብል እዩ።  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(ጀማሪሕብሪ='%d', መወዳእታሕብሪ='%d', ዓይነት ምዕባለ=1)" , @መጀመርታሕብሪ , @መወዳእታ ሕብሪ )); // IE6 & IE7 ዝብል ጽሑፍ ኣሎ። 
    ድሕረ ባይታ - ምስሊ : መስመራዊ - ምዕባለ ( ጸጋም , @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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(ጀምርሕብሪ='%d', መወዳእታሕብሪ='%d', ዓይነት ምዕባለ=0)" , @መጀመርታሕብሪ , @መወዳእታ ሕብሪ ); // IE8+ ዝብል እዩ።  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(ጀምርሕብሪ='%d', መወዳእታሕብሪ='%d', ዓይነት ምዕባለ=0)" , @መጀመርታሕብሪ , @መወዳእታ ሕብሪ )); // IE6 & IE7 ዝብል ጽሑፍ ኣሎ። 
    ድሕረ ባይታ - ምስሊ : መስመራዊ - ምዕባለ ( @startColor , @endColor ); // እቲ ደረጃ  
  } ።
  . ኣንፈታዊ ( @startColor : #555, @መወዳእታሕብሪ: #333, @deg: 45deg) { 
    ...
  } ።
  . ቀጥታዊ - ​​ሰለስተ - ሕብርታት ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  } ።
} ።

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

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

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