ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ። ማሴናስ ፋውሲበስ ሞሊስ ኢንተርዱም ዝበሃል እዩ። ሞርቢ ልዮ ሪሱስ፡ ፖርታ ኤሲ ኮንሰክተቱር ኤሲ፡ ቬስቲቡሉም ኣብ ኤሮስ።
ቡትስትራፕ ካብ ትዊተር ዝመጸ መሳርሒ ኮይኑ፡ ምምዕባል ዌብኣፕን ሳይታትን ንምጅማር ዝተዳለወ እዩ።
ንታይፕግራፊ፡ ቅጥዕታት፡ መጠወቒታት፡ ሰደቓታት፡ ሽቦታት፡ ምድህሳስን ካልእን ዝኸውን መሰረታዊ CSSን HTMLን የጠቓልል።
Nerd alert: Bootstrap ብ Less ዝተሃንጸ ኮይኑ ዘመናዊ መርበባት ሓበሬታ ኣብ ግምት ብምእታው ካብ ኣፍደገ ወጺኡ ክሰርሕ ተባሂሉ ዝተሰርሐ እዩ።
ንዝቐልጠፈን ዝቐለለን ጅማሮ፡ ነዚ ቁንጣሮ ጽሑፍ ናብ መርበብ ሓበሬታኻ ቅዳሕ ጥራይ።
ኣድናቒ ሌስ ምጥቃም? ጸገም የለን፡ በቃ ነቲ ሬፖ ክሎን ብምግባር ነዞም መስመራት ወስኹሉ፤
ዳውንሎድ፣ ፎርክ፣ ስሓብ፣ ፋይል ጉዳያትን ካልእን ምስ ወግዓዊ Bootstrap repo ኣብ Github።
ኣብቲ ቀዳሞት መዓልታት ትዊተር፡ መሃንድሳት ዳርጋ ዝኾነ ዝፈልጥዎ ቤተ-መጻሕፍቲ፡ ንቕድሚት ዝምልከት ረቛሒታት ንምምላእ ይጥቀሙ ነይሮም። ቡትስትራፕ ኣብቲ ናይ ትዊተር ናይ መጀመርታ ሃክዊክ ንዝቐረቡ ብድሆታትን ምዕባለ ብቕልጡፍ ዝተቀላጠፈን ብድሆታት መልሲ ኮይኑ እዩ ጀሚሩ።
ብሓገዝን ግብረ መልስን ብዙሓት መሃንድሳት ትዊተር፡ ቡትስትራፕ መሰረታዊ ቅዲታት ጥራይ ዘይኮነ፡ ዝያዳ ውቁብን ነዊሕ ዝጸንሕን ናይ ቅድሚት ዲዛይን ቅዲታት ዘጠቓለለ ብዓቢኡ ዓብዩ።
ተወሳኺ ኣብ dev.twitter.com ኣንብብ ›
ቡትስትራፕ ኣብ ዓበይቲ ዘመናውያን መርበባት ሓበሬታ ከም ክሮም፡ ሳፋሪ፡ ኢንተርነት ኤክስፕሎረርን ፋየርፎክስን ተፈቲኑን ይድገፍን እዩ።
ቡትስትራፕ ምስ ዝተጠርነፉ CSS፣ ዘይተጠርነፉን ኣብነታዊ ቅጥዕታትን ምሉእ ብምሉእ ይመጽእ እዩ።
ከም ኣካል ቡትስትራፕ ዝቐርብ ነባሪ ስርዓተ ሽቦ 940px ስፍሓት ዘለዎ 16 ዓምድታት ዘለዎ ሽቦ እዩ። መኣዛ ናይቲ ህቡብ 960 ሽቦ ስርዓት እዩ፡ ግን ብዘይ ተወሳኺ ወሰን/ፓዲንግ ኣብ ጸጋማይን የማናይን ሸነኽ።
ከምቲ ኣብዚ ንርእዮ ዘለና፡ መሰረታዊ ኣቀማምጣ ብኽልተ "ዓምድታት" ክፍጠር ይኽእል፡ ነፍሲ ወከፎም ንብዙሓት ካብቶም ከም ኣካል ስርዓተ ሽቦና ዝገለጽናዮም 16 መሰረታውያን ዓምድታት ዝሽፍኑ እዮም። ንዝያዳ ፍልልያት ኣብ ታሕቲ ዘለዉ ኣብነታት ርአ።
- <div ክፍሊ="መስመር"> class = "መስመር" >
- <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> ዝብል ጽሑፍ ኣሎ።
ንገጻት መርበብ ሓበሬታኻ ንምውዳብ ዝሕግዝ መደበኛ ስርዓተ-ጽሕፈት።
ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.
ምጉላሕ፡ ኣድራሻታት፡ & ኣሕጽሮተ ቃላት ምጥቃም
<strong>
<em>
<address>
<abbr>
ናይ ሓደ ቃል ወይ ሓረግ ብተዛማዲ ምስቲ ኣብ ከባቢኡ ዘሎ ቅዳሕ ተወሳኺ ኣገዳስነት ወይ ምጉላሕ ንምምልካት ናይ ምጉላሕ መለለዪታት ( <strong>
ከምኡውን ) ክጥቀሙ ይግባእ። ንኣገዳስነትን ንውጥረት ምጉላሕን <em>
ተጠቐም ።<strong>
<em>
ፉስ ዳፒቡስ ፣ ቴሉስ ኣክ ከርሱስ ኮሞዶ ፣ ቶርቶር ማውሪስ ኮንዲመንቱም ኒብህ ፣ ኡት ፈርመንቱም ማሳ ጁስቶ ኮፍ ኣሜት ሪሱስ። ማሴናስ ፋውሲበስ ሞሊስ ኢንተርዱም ዝበሃል እዩ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ።
መተሓሳሰቢ ፡ ሕጂ ውን ኣብ HTML5 ምጥቃምን መለለዪታትን ጸገም የብሉን <b>
፡ ድሕሪ <i>
ሕጂ ግን ምስ ባህርያዊ ቅዲታት ኣይመጹን እዮም። <b>
ተወሳኺ ኣገዳስነት ከየመሓላልፍ ቃላት ወይ ሓረጋት ንምጉላሕ ዝዓለመ ክኸውን ከሎ <i>
፡ መብዛሕትኡ ግዜ ንድምጺ፡ ቴክኒካዊ ቃላት ወዘተ ዝኸውን እዩ።
እቲ <address>
ባእታ ንዝቐረበ ኣቦሓጎኡ፡ ወይ ንመላእ ኣካል ስራሕ ንዝግበር ርክብ ሓበሬታ ይጥቀመሉ። ከመይ ይመስል ኣብዚ ኣሎ፤
መተሓሳሰቢ ፡ ነፍሲ ወከፍ መስመር ኣብ ሓደ <address>
ብመስመር-ምብታኽ ( <br />
) ክውዳእ ኣለዎ ወይ ድማ ብደረጃ ብሎክ መለለዪ (ንኣብነት <p>
፡ ) ክጥቕለል ኣለዎ፡ ነቲ ትሕዝቶ ብግቡእ ንምውዳብ።
ንኣሕጽሮተ ቃላትን ኣሕጽሮተ ቃላትን፡ ነቲ <abbr>
መለለዪ ተጠቐም ( <acronym>
ኣብ HTML5 ተጠቂሙ ኣሎ )። ነቲ ናይ ሓጺር ጽሑፍ ቅጥዒ ኣብ ውሽጢ እቲ መለለዪ ኣቐምጦ እሞ ንሙሉእ ስም ኣርእስቲ ኣቐምጦ።
<blockquote>
<p>
<small>
ብሎክኮት ንምሕዋስ፡ ጠቕሊልካ <blockquote>
ምልክት <p>
ምግባር <small>
። <small>
ምንጪኻ ንምጥቃስ ነቲ ባእታ ተጠቐመሉ —
ቅድሚኡ ድማ em dash ክትረክብ ኢኻ።
ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ ፖሱረ ኤራት ሓደ ኣንቴ ቬነናቲስ ዳፒቡስ ፖሱረ ቬሊት ኣሊኬት።
ዶክተር ጁልየስ ሂበርት።
<ul>
<ul.unstyled>
<ol>
dl
<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. | ስቱ | ደንት ዝብል ጽሑፍ ኣሎ። | ኮድ |
መተሓሳሰቢ ፡ Zebra-striping ንኣረጊት መርበባት ሓበሬታ ከም IE8ን ትሕቲኡን ዘይርከብ ገስጋሲ ምምሕያሽ እዩ።
- <table class="ናይ ሓባር-ሰንጠረዥ ዜብራ-ስሪት ዘለዎ"> class = "ናይ ሓባር-ሰንጠረዥ ዜብራ-ስሪት ዘለዎ" >
- ...
- </table> ዝብል ጽሑፍ ኣሎ።
ነቲ ዝሓለፈ ኣብነት ብምውሳድ፡ ብመንገዲ jQuery ን Tablesorter plugin ን ናይ ምፍላይ ተግባር ብምሃብ፡ ጠቕሚ ናይ ሰደቓታትና ነመሓይሽ። ነቲ ምድላው ንምቕያር ናይ ዝኾነ ዓምዲ ርእሲ ጠውቕ።
# | ናይ መጀመርታ ሽም | ናይ መወዳእታ ሽም | ቋንቋ |
---|---|---|---|
1. | ናትካ | ሓደ | ኢንግሊሽ |
2. | ጆ | ሲክስፓክ | ኢንግሊሽ |
3. | ስቱ | ደንት ዝብል ጽሑፍ ኣሎ። | ኮድ |
- <ስክሪፕት src="js/jquery/jquery.tablesorter.min.js"></ስክሪፕት> ዝብል ጽሑፍ ኣሎ። src = "js/jquery/jquery.ሰንጠረዥ መፍለዪ.ደቒቕ.js" ></script>
- <ስክሪፕት > ዝብል ጽሑፍ ኣሎ።
- $ ( ተግባር () { .
- $ ( "ሰንጠረዥ#ኣብነት ሰሌዳ ምድላው" ). tablesorter ({ ዝርዝር ምድላው : [[ 1 , 0 ]] });
- });
- </script> ዝብል ጽሑፍ ኣሎ።
- <table class = "ናይ ሓባር-ሰንጠረዥ ዜብራ-ስሪት ዘለዎ" >
- ...
- </table> ዝብል ጽሑፍ ኣሎ።
ኩሎም ቅጥዕታት ብዝነበብን ብዝዓቢን መንገዲ ንምቕራብ ነባሪ ቅዲታት ይወሃቦም። ቅዲታት ንጽሑፍ ምእታው፣ ዝርዝር ምምራጽ፣ ናይ ጽሑፍ ቦታታት፣ ናይ ሬድዮ መጠወቒታትን ናይ ምልክት ሳጹናትን፣ ከምኡውን መጠወቒታት ይቐርቡ።
ኣብ ናይ ቅጥዒኻ ኤችቲኤምኤል ወስኸሉ .form-stacked
እሞ ኣብ ክንዲ ኣብ ጸጋሞም ኣብ ልዕሊ ዓውድታቶም ስያመታት ክህልዉኻ እዮም። እዚ ቅጥዕታትካ ሓጸርቲ እንተኾይኖም ወይ ንዝኸበዱ ቅጥዕታት ክልተ ዓምድታት እታዎታት እንተሃልዮምኻ ጽቡቕ ይሰርሕ።
ከም ውዕል፡ መጠወቒታት ንተግባራት ክጥቀሙ እንከለዉ፡ መላግቦታት ድማ ንነገራት ይጥቀሙ። ንኣብነት "Download" ዝብል መጠወቒ ክኸውን ይኽእል እዩ "ናይ ቀረባ እዋን ንጥፈታት" ድማ መላግቦ ክኸውን ይኽእል።
ኩሎም መጠወቒታት ብነባሪ ናብ ፍኹስ ዝበለ ግራጭ ቅዲ፣ ግን ሰማያዊ .primary
ክፍሊ ኣሎ። ተወሳኺ፡ ናይ ገዛእ ርእስኻ ቅዲታት ምጥቕላል ቀሊል peasy እዩ።
ቅዲታት መጠወቒ ምስ ዝተተግበረ ኣብ ዝኾነ ነገር ክትግበር ትኽእል ኢኻ .btn
። ብተለምዶ ነዚኦም ኣብ <a>
, , ጥራይ ክትትግብርዎምን ባእታታት <button>
ምረጽን ። <input>
ከመይ ይመስል ኣብዚ ኣሎ፤
ዓበይቲ ወይ ዝነኣሱ መጠወቒታት ትፈትዉ? ኣብኡ ኣለካ!
ንጡፋት ዘይኮኑ ወይ ብሓደ ምኽንያት ወይ ብኻልእ ምኽንያት ብኣፕ ዝተሰናኸሉ መጠወቒታት፡ ነቲ ዝተሰናኸለ ኩነታት ተጠቐም። ንሱ .disabled
ድማ ንመላግቦታትን ንባእታታትን :disabled
እዩ <button>
።
ንሓደ ተግባር ውድቀት፣ ክህሉ ዝኽእል ውድቀት ወይ ዕዉትነት ንምጉላሕ ዝሕግዙ ናይ ሓደ መስመር መልእኽትታት። ብፍላይ ንቅጥዕታት ጠቓሚ እዩ።
ቁሩብ መብርሂ ንዘድልዮም መልእኽትታት፡ ናይ ሕጡበ ጽሑፍ ቅዲ መጠንቀቕታታት ኣለዉና። እዚኦም ንነዊሕ ናይ ጌጋ መልእኽትታት ንምፍንጃል፡ ንሓደ ተጠቃሚ ብዛዕባ ሓደ ኣብ ምጽባይ ዝርከብ ስጉምቲ ንምጥንቃቕ፡ ወይ ኣብቲ ገጽ ንዝያዳ ምጉላሕ ሓበሬታ ጥራይ ንምቕራብ ፍጹማት እዮም።
ሞዳላት-ዝርርባት ወይ ብርሃን ሳጹናት-ኣብቲ ድሕረ ባይታ ዓውደ-ጽሑፍ ምዕቃብ ኣገዳሲ ዝኾነሉ ኩነታት ንዓውደ-ጽሑፋዊ ተግባራት ብሉጻት እዮም።
ሓደ ረቂቕ ኣካል...
ትዊፕሲ ንዝተደናገረ ተጠቃሚ ንምሕጋዝን ናብ ቅኑዕ ኣንፈት ንምምልካትን ሱፐር ጠቐምቲ እዮም።
ሎረም ኢፕሱም ዶላር ኮፍ ኣሜት ኢሎ ጌጋ ኢፕሱም ቨሪታቲስ ኣውት ኢስተ ፐርስፒሻቲስ ኢስተ ቮሉፕታስ ናቱስ ኢሎ ኳሲ ኦዲት ኣውት ናቱስ ኮንሰኩንቱር ኮንሰኩንቱር፣ ኣውት ናቱስ ኢሎ ቮሉፕታተም ኦዲት ፐርስፒሻቲስ ላውዳንቲየም ረም ዶሎረምክ ቶታም ቮሉፕታስ. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, ቶታም ዶሎረምከ ኡንደ ሱንት ሴድ ዲክታ ኳይ ኣኩሳንቲየም ፉጊት ቮሉፕታስ ኒሞ ቮሉፕታስ ቮሉፕታተም ረም ኳይ ኣውቶ ቨርታቲስ ንእሽቶ ኳሲ።
ንኣቀማምጣ ከይጸለወ ንሓደ ገጽ ንኡስ ጽሑፍ ሓበሬታ ንምሃብ ፖፖቨርስ ተጠቐም።
ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ። ማሴናስ ፋውሲበስ ሞሊስ ኢንተርዱም ዝበሃል እዩ። ሞርቢ ልዮ ሪሱስ፡ ፖርታ ኤሲ ኮንሰክተቱር ኤሲ፡ ቬስቲቡሉም ኣብ ኤሮስ።
ቡትስትራፕ ብ Preboot ዝተሃንጸ ኮይኑ፡ ምስኡ ተተሓሒዙ ንኽጥቀመሉ ዝግበኦ ክፉት ምንጪ ዘለዎ ፓክ ሚክሲንን ተለዋዋጥን እዩ። ዝተሃንጸ ኮይኑ፡ ምስ Less ኮይኑ፡ ንዝቐልጠፈን ዝቐለለን ምዕባለ መርበብ ሓበሬታ ዝኸውን CSS preprocessor እዩ።
ኣብ Bootstrap Preboot ከመይ ጌርና ከም እንጥቀመሉን ኣብ ዝቕጽል ፕሮጀክትካ Less ክትሰርሕ እንተመሪጽካ ብኸመይ ክትጥቀመሉ ከም እትኽእልን ርአ።
ነዚ ኣማራጺ ተጠቒምካ ናይ Bootstrap Less variables, mixins, ከምኡ ውን ኣብ CSS ብመንገዲ javascript ኣብ መርበብ ሓበሬታኻ ምሉእ ብምሉእ ክትጥቀመሉ ትኽእል።
- <link rel = "ቅዲ ጽሑፍ/ውሑድ" href = "ውሑድ/ቡትስትራፕ.ውሑድ" ሚድያ = "ኩሉ" />
- <script 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 ;
- } ።
- } ።
- #ግራድየንት {
- . 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 ) + ( @ግሪድጉተርስፍሓት * ( @ዓምዲOffset - 1 )) ! ኣገዳሲ ;
- } ።