ኣብ ልዕሊ
ፀጋም
ትኽክል
ትሕቲ
ቡትስትራፕ

ቡትስትራፕ፡ ካብ ትዊተር

ቡትስትራፕ ካብ ትዊተር ዝመጸ መሳርሒ ኮይኑ፡ ምምዕባል ዌብኣፕን ሳይታትን ንምጅማር ዝተዳለወ እዩ።
ንታይፕግራፊ፡ ቅጥዕታት፡ መጠወቒታት፡ ሰደቓታት፡ ሽቦታት፡ ምድህሳስን ካልእን ዝኸውን መሰረታዊ CSSን HTMLን የጠቓልል።

Nerd alert: Bootstrap ብ Less ዝተሃንጸ ኮይኑ ዘመናዊ መርበባት ሓበሬታ ኣብ ግምት ብምእታው ካብ ኣፍደገ ወጺኡ ክሰርሕ ተባሂሉ ዝተሰርሐ እዩ።

ንሲኤስኤስ ሆትሊንክ ግበርዎ።

ንዝቐልጠፈን ዝቐለለን ጅማሮ፡ ነዚ ቁንጣሮ ጽሑፍ ናብ መርበብ ሓበሬታኻ ቅዳሕ ጥራይ።

ምስ Less ተጠቐመሉ።

ኣድናቒ ሌስ ምጥቃም? ጸገም የለን፡ በቃ ነቲ ሬፖ ክሎን ብምግባር ነዞም መስመራት ወስኹሉ፤

ኣብ GitHub ፎርክ ምግባር

ዳውንሎድ፣ ፎርክ፣ ስሓብ፣ ፋይል ጉዳያትን ካልእን ምስ ወግዓዊ Bootstrap repo ኣብ Github።

ቡትስትራፕ ኣብ GitHub »

ኣብዚ ሕዚ እዋን v1.3.0

ብዛዕባ ቡትስትራፕ ሓጺር ታሪኽ፡ ደገፍ መርበብ ሓበሬታን ካልእን

ታሪኽ

መሃንድሳት ትዊተር ብታሪኽ ዳርጋ ዝኾነ ዝፈልጥዎ ቤተ-መጻሕፍቲ ንቕድሚት ዝምልከት ረቛሒታት ንምምላእ ተጠቒሞም እዮም። ቡትስትራፕ ንዝቐረቡ ብድሆታት መልሲ ኮይኑ እዩ ጀሚሩ። ብሓገዝ ብዙሓት ኣዝዮም ዘደንቑ ሰባት፡ ቡትስትራፕ ብዓቢኡ ዓብዩ።

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

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

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

ኣብ ክሮም፡ ሳፋሪ፡ ኢንተርነት ኤክስፕሎረርን ፋየርፎክስን ተፈቲኑን ተደጊፉን።
  • ናይ መወዳእታ ሳፋሪ
  • ናይ መወዳእታ ጉግል ክሮም
  • ፋየርፎክስ 4+
  • ኢንተርነት ኤክስፕሎረር 7+
  • ኦፔራ 11

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

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

ቅልጡፍ ምጅማር ኣብነታት

ገለ ቅልጡፍ ቅጥዕታት የድልዩኻ? ነዞም ኣዋሃሂድናዮም ዘለና መሰረታዊ ኣብነታት ርኣዩ፤

  • ቀሊል ሰለስተ ዓምዲ ዘለዎ ኣቀማምጣ ምስ ጅግና ኣሃዱ
  • ፈሳሲ ኣቀማምጣ ምስ ስታትቲክ ጎድናዊ ባር
  • ንኣፕስ ዝኸውን ቀሊል ተንጠልጢሉ ዝስራሕ መትሓዚ

ስርዓት ሽቦ ነቲ ስታንዳርድ 940px ሮክ ወይ ናትካ ምጥዋይ

ነባሪ ሽቦ

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

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

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

  1. <div ክፍሊ = "መስመር" > 
  2.   <div ክፍሊ = "span6" > ዝብል ጽሑፍ ኣሎ። 
  3.     ...
  4.   </div> ዝብል ጽሑፍ ኣሎ።
  5.   <div ክፍሊ = "span10" > ዝብል ጽሑፍ ኣሎ። 
  6.     ...
  7.   </div> ዝብል ጽሑፍ ኣሎ።
  8. </div> ዝብል ጽሑፍ ኣሎ።
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
2.
2.
2.
2.
2.
2.
2.
2.
3.
3.
3.
3.
3.
1.
4.
4.
4.
4.
1/3 ዝብል እዩ።
1/3 ዝብል እዩ።
1/3 ዝብል እዩ።
1/3 ዝብል እዩ።
2/3
4.
6.
6.
8.
8.
5.
11.
16.

ምትዕርራይ ዓምድታት

4.
8 ኦፍሴት 4
1/3 ኦፍሴት 2/3s
4 ኦፍሴት 4
4 ኦፍሴት 4
5 ኦፍሴት 3
5 ኦፍሴት 3
10 ኦፍሴት 6

ዓምድታት ምድቃል

.rowኣብ ውሽጢ ሓደ ዝጸንሐ ዓምዲ ብምፍጣር ግድን እንተኾይኑ ትሕዝቶኻ ሰፈር ።

ኣብነት ናይ ዝተሰፍሩ ዓምድታት

ደረጃ 1 ናይ ዓምዲ
ደረጃ 2
ደረጃ 2 
  1. <div ክፍሊ = "መስመር" > 
  2.   <div ክፍሊ = "span12" > ዝብል ጽሑፍ ኣሎ። 
  3.     ደረጃ 1 ናይ ዓምዲ
  4.     <div ክፍሊ = "መስመር" > 
  5.       <div ክፍሊ = "span6" > ዝብል ጽሑፍ ኣሎ። 
  6.         ደረጃ 2
  7.       </div> ዝብል ጽሑፍ ኣሎ።
  8.       <div ክፍሊ = "span6" > ዝብል ጽሑፍ ኣሎ። 
  9.         ደረጃ 2
  10.       </div> ዝብል ጽሑፍ ኣሎ።
  11.     </div> ዝብል ጽሑፍ ኣሎ።
  12.   </div> ዝብል ጽሑፍ ኣሎ።
  13. </div> ዝብል ጽሑፍ ኣሎ።

ናይ ባዕልኻ ሽቦ ምጥቕላል

ኣብ Bootstrap ዝተሃንጹ ንኣጻብዕ ዝቑጸሩ ተለዋዋጢ ረቛሒታት እዮም ነቲ ነባሪ 940px ሽቦ ስርዓት ንምምዕርራይ። ቁሩብ ምምዕርራይ ብምግባር፡ ንዓቐን ዓምድታት፡ ጐዳጉዶምን ዝነብሩሉ መትሓዚን ክትቅይሮ ትኽእል ኢኻ።

ኣብ ውሽጢ ሽቦ

እቶም ንስርዓት ሽቦ ንምቕያር ዘድልዩ ተለዋዋጢ ረቛሒታት ኣብዚ እዋን ኩሎም ኣብ variables.less.

ተለዋዋጢ ዝኾነ ነባሪ ዋጋ መግለፂ
@gridColumns 16. ኣብ ውሽጢ ሽቦ ዝርከቡ ዓምድታት ብዝሒ
@gridColumnWidth 40px ዝብል እዩ። ስፍሓት ነፍሲ ወከፍ ዓምዲ ኣብ ውሽጢ ሽቦ
@gridGutterWidth 20px ዝብል እዩ። ኣብ መንጎ ነፍሲ ወከፍ ዓምዲ ዘሎ ኣሉታዊ ቦታ
@siteWidth ዝተሓሰበ ድምር ናይ ኩሎም ዓምድታትን ጐዳጉዲን። ገለ መሰረታዊ ምትእስሳር ንጥቀም ንብዝሒ ዓምድታትን ጓተርን ንቖጽርን ስፍሓት ናይቲ .fixed-container()ሚክሲን ንሰርዕን።

ሕጂ ንዓኻ ዝምጥን ንምግባር

ነቲ ሽቦ ምቕያር ማለት ነቶም ሰለስተ @grid-*ተለዋዋጢ ረቛሒታት ምቕያርን ነቶም Less ፋይላት ዳግማይ ምጥርናፍን ማለት እዩ።

ቡትስትራፕ ክሳብ 24 ዓምድታት ዘለዎ ስርዓተ ሽቦ ንምሕላው ዝተዓጠቐ ኮይኑ ይመጽእ፤ እቲ ነባሪ 16 ጥራይ እዩ።ናይ ሽቦ ተለዋዋጢታትካ ብኸመይ ናብ 24 ዓምድታት ዘለዎ ሽቦ ዝተመጣጠኑ ምመሰሉ እንሆ።

  1. @gridዓምድታት : 24 ;       
  2. @gridዓምዲ ስፍሓት : 20px ;   
  3. @ግሪድጉተርስፍሓት : 20px ;

ዳግማይ ምስ ተጠርነፍካ፡ ክትቅመጥ ኢኻ!

ኣቀማምጣታት መሰረታዊ ቅጥዕታት ንገጻት መርበብ ሓበሬታ ንምፍጣር

ጽኑዕ ኣቀማምጣ

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

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

ፈሳሲ ኣቀማምጣ

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

  1. <ኣካል> ዝብል እዩ።
  2.   <div class = "መትሓዚ-ፈሳሲ" > 
  3.     <div class = "ጎድናዊ መስመር" > 
  4.       ...
  5.     </div> ዝብል ጽሑፍ ኣሎ።
  6.     <div class = "ትሕዝቶ" > ዝብል ጽሑፍ ኣሎ። 
  7.       ...
  8.     </div> ዝብል ጽሑፍ ኣሎ።
  9.   </div> ዝብል ጽሑፍ ኣሎ።
  10. </body> ዝብል ጽሑፍ ኣሎ።

ታይፖግራፊ ኣርእስታት፣ ሕጡበ-ጽሑፋት፣ ዝርዝርን ካልኦት ኣብ መስመር ዝርከቡ ዓይነት ባእታታትን

ኣርእስታት & ቅዳሕ

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

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

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

h1. ርእሲ 1

h2. ርእሲ 2

h3. ርእሲ 3

h4. ርእሲ 4

h5. ርእሲ 5
h6. ርእሲ 6

ኣብነት ሕጡበ ጽሑፍ

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

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

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

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

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

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

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

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

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

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

ኣድራሻታት

እቲ <address>ባእታ ንዝቐረበ ኣቦሓጎኡ፡ ወይ ንመላእ ኣካል ስራሕ ንዝግበር ርክብ ሓበሬታ ይጥቀመሉ። ብኸመይ ኣብ ጥቕሚ ክውዕል ከም ዝኽእል ክልተ ኣብነታት እነሆ፤

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

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

ኣሕጽሮተ ቃላት

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

ብሎክኮትስ

<blockquote> <p> <small>

ከመይ ጌርካ ትጠቅስ

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

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

ዶክተር ጁልየስ ሂበርት። 
  1. <ብሎክquote> ዝብል ጽሑፍ ኣሎ።
  2.   <p> ሎረም ኢፕሱም ዶሎር ኮፍ ኣሜት፡ consectetur adipiscing elit. ምሉእ ቁጽሪ ፖሱረ ኤራት ሓደ ኣንቴ ቬነናቲስ ዳፒቡስ ፖሱረ ቬሊት ኣሊኬት። </p> ዝብል ጽሑፍ ኣሎ።
  3.   <ንእሽቶ> ዶክተር ጁልየስ ሂበርት </small>
  4. </blockquote> ዝብል ጽሑፍ ኣሎ።

ዝርዝራት

ዘይተኣዘዘ<ul>

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

ቅዲ ዘይብሉ<ul.unstyled>

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

ተኣዚዙ<ol>

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

መግለፂdl

መግለጺ ዝርዝር
ዝርዝር መግለጺ ቃላት ንምግላጽ ፍጹም እዩ።
ዩይስሞድ
ቬስቲቡሉም ኢድ ሊጉላ ፖርታ ፌሊስ ዩስሞድ ሴምፐር ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት.
Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus.
ማሌሱዋዳ ፖርታ
ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ።

ኮድ

<code> <pre>

ኮድካ ብኽልተ ቀለልቲ መለለዪታት ብቅዲ ፒምፕ ግበሮ። ብመንገዲ ጃቫስክሪፕት ዝያዳ ምድናቕ ንምርካብ፡ ናይ Google ኮድ prettify ቤተ-መጻሕፍቲ ኣውርድ እሞ ተዳሊኻ ኣለኻ።

ኮድ ምቕራብ

ኮድ፡ ብሎኮታት ናይ ወይ ጥራይ ቁንጣሮ ኣብ መስመር፡ ኣብ ቅኑዕ መለለዪ ብምጥቕላል ጥራይ ምስ ቅዲ ክረአ ይኽእል። ንብዙሓት መስመራት ዝሽፍን ብሎኮታት ኮድ፡ ነቲ <pre>ባእታ ተጠቐም። ንናይ ውሽጢ መስመር ኮድ፡ ነቲ <code>ባእታ ተጠቐም።

ባእታ ውፅኢት
<code> <html>ኣብ ከምዚ ዝበለ መስመር ጽሑፍ፡ እቲ ዝተጠቕለለ ኮድካ ነዚ ባእታ ክመስል እዩ ።
<pre> 
<div> ዝብል ጽሑፍ ኣሎ።
  <h1>ኣርእስቲ</h1>
  <p>ገለ ልክዕ ኣብዚ...</p>
</div> ዝብል ጽሑፍ ኣሎ።

መተሓሳሰቢ<pre> ፡ ኣብ ውሽጢ መለለዪታት ኮድ ብዝተኻእለ መጠን ናብ ጸጋም ቀረባ ምቕማጥካ ኣረጋግጽ ፤ ንኹሎም ትቦታት ከቕርቦም እዩ።
<pre class="prettyprint">

google-code-prettify ቤተ-መጻሕፍቲ ብምጥቃም፡ ብሎኮታት ኮድካ ቁሩብ ዝተፈልየ ስእላዊ ቅዲን ኣውቶማቲክ ስነ-ቓል ምድማቕን ይረኽቡ።

<div> <h1> ርእሲ </h1> <p> ገለ ልክዕ ኣብዚ... </p> </div>

google-code-prettify ኣውርድ እሞ ከመይ ጌርካ ከም እትጥቀመሉ readme ርአ።

ኣብ ውሽጢ መስመር ዝርከቡ ስያመታት

<span class="label">

ኣብ ጽሑፍ ኣካላትካ ንዝኾነ ሓረግ ኣቓልቦ ስኣሎ ወይ ባንዴራ ግበሮ።

ዝኾነ ነገር ስያመ ምሃብ

ሓደ ካብቶም ፋንሳዊ ሓድሽ! ወይ ኮድ ክትጽሕፍ ከለኻ ኣገደስቲ ባንዴራታት? ጽቡቕ ሕጂ ኣለዉኻ። ብነባሪ ዝተሓወሶ ኣብዚ ኣሎ፤

መፍለዪ ውፅኢት
<span class="label">Default</span> ትሑዝ
<span class="label success">New</span> ሓድሽ
<span class="label warning">Warning</span> ምኸዳን
<span class="label important">Important</span> ጠቃሚ
<span class="label notice">Notice</span> ኣፍልጦ

ሚድያ ምስልታትን ቪድዮታትን ምርኣይ

ሚድያ ሽቦ

ኣብ ትሑት ኣሰር ኤችቲኤምኤልን ውሑድ ቅዲታትን ዘለዎም ገጻት ዝተፈላለየ ዓቐን ዘለዎም ንኣሽቱ ስእልታት ኣርኢ።

ኣብነት ንኣሽቱ ስእልታት

ኣብቲ ዝርከቡ ንኣሽቱ ስእልታት .media-gridዝኾነ ዓቐን ክኾኑ ይኽእሉ እዮም፣ ግን ብቐጥታ ናብቲ ኣብ ውሽጡ ዘሎ Bootstrap grid system ምስ ዝምደብ ዝበለጸ ይሰርሑ። ከም 90፣ 210ን 330ን ዝኣመሰሉ ስፍሓት ምስሊ ምስ ውሑዳት ፒክሰላት ምዕሻግ ተደሚሮም ንዓቐናት .span2, .span4, ከምኡውን .span6ዓምድታት ማዕረ ይገብሩ።

ገዚፍ

ማእኸላይ

ንኡስ

ኮድ ምግባር ንዓኣቶም

ሚድያ ግሪድስ ንምጥቃም ቀለልቲ ኮይኖም ብወገን ምልክት ምግባር ምናልባት ቀለልቲ እዮም። መለክዒታቶም ኣብ ዓቐን ናይቶም ዝተሓወሱ ምስልታት ጥራይ ዝተመርኮሰ እዩ።

  1. <ul class = "ሚድያ-ሽቦ" > 
  2.   <li> ዝብል ጽሑፍ ኣሎ።
  3.     <a href = "#" > ዝብል ጽሑፍ ኣሎ። 
  4.       <img class = "ንእሽቶ ስእሊ" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li> ዝብል ጽሑፍ ኣሎ።
  7.   <li> ዝብል ጽሑፍ ኣሎ።
  8.     <a href = "#" > ዝብል ጽሑፍ ኣሎ። 
  9.       <img class = "ንእሽቶ ስእሊ" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li> ዝብል ጽሑፍ ኣሎ።
  12. </ul> ዝብል ጽሑፍ ኣሎ።

ሰንጠረዥ ን፡ ገሚትካዮ፡ ሰንጠረዥ ዳታ

ጠረጴዛታት ምህናጽ

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

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

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

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

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

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

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

ኣብነት፡- ዝተሓጽረ ሰደቓ

ኣብ ዝጸበበ ቦታታት ዝያዳ ዳታ ንዝጠልቡ ሰደቓታት፡ ነቲ ንመሸፈኒ ኣብ ክልተ ዝቖርጾ ዝተሓጽረ መኣዛ ተጠቐም። ብተወሳኺ ምስ ዶባትን ዜብራ-መስመራትን ተተሓሒዙ ክጥቀመሉ ይኽእል እዩ፣ ልክዕ ከምቲ ነባሪ ቅዲታት ሰደቓ።

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

ኣብነት፡ ዶብ ዘለዎ ሰደቓ

ጠረጴዛታትካ ንመኣዝኖም ብምኽባብን ብኹሉ ወገን ዶባት ብምውሳኽን ቁሩብ ስሉጥ ጥራይ ከም ዝመስሉ ግበሮም።

# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ቋንቋ
1. ንእሽተይ ሓደ ኢንግሊሽ
2. ጆ ሲክስፓክ ኢንግሊሽ
3. ስቱ ደንት ዝብል ጽሑፍ ኣሎ። ኮድ 
  1. <table class = "ዝተወሰነ-ሰንጠረዥ" > 
  2.   ...
  3. </table> ዝብል ጽሑፍ ኣሎ።

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

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

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

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

  1. <ሰንጠረዥ ክፍሊ = "ዜብራ-ስሪት ዘለዎ" > 
  2.   ...
  3. </table> ዝብል ጽሑፍ ኣሎ።

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

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

# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ቋንቋ
2. ጆ ሲክስፓክ ኢንግሊሽ
3. ስቱ ደንት ዝብል ጽሑፍ ኣሎ። ኮድ
1. ናትካ ሓደ ኢንግሊሽ 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script> ዝብል ጽሑፍ ኣሎ። 
  2. <ስክሪፕት > ዝብል ጽሑፍ ኣሎ። 
  3.   $ ( ተግባር () { . 
  4.     $ ( "ሰንጠረዥ#ኣብነት ሰሌዳ ምድላው" ). tablesorter ({ ዝርዝር ምድላው : [[ 1 , 0 ]] });  
  5.   });
  6. </script> ዝብል ጽሑፍ ኣሎ።
  7. <ሰንጠረዥ ክፍሊ = "ዜብራ-ስሪት ዘለዎ" > 
  8.   ...
  9. </table> ዝብል ጽሑፍ ኣሎ።

ቅጥዕታት

ነባሪ ቅዲታት

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

ኣብነት ቅጥዒ ኣፈ ታሪኽ
ገለ ኣብዚ ዋጋ ይህቡ
ንእሽቶ ቁንጣሮ ጽሑፍ ሓገዝ
ዓወት!
ሩህ ሮህ!
ኣብነት ቅጥዒ ኣፈ ታሪኽ
@
ገለ ናይ ሓገዝ ጽሑፍ ኣብዚ ኣሎ።
ኣብነት ቅጥዒ ኣፈ ታሪኽ
መተሓሳሰቢ ፡ ስያመታት ንኹሎም ኣማራጺታት ንኣዝዩ ዝዓበየ ናይ ጠውቂ ቦታታትን ዝያዳ ኣብ ጥቕሚ ዝውዕል ቅጥዕን ይኸብብዎም።
ናብ ኩሉ ሰዓታት ከም ፓሲፊክ ስታንዳርድ ሰዓት (GMT -08:00) ይርአ።
ኣድላዪ እንተኾይኑ ነቲ ኣብ ላዕሊ ዘሎ ዓውዲ ንምግላጽ ናይ ሓገዝ ጽሑፍ ምዕጋት።
 

ዝተደራረቡ ቅጥዕታት

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

ኣብነት ቅጥዒ ኣፈ ታሪኽ
ኣብነት ቅጥዒ ኣፈ ታሪኽ
ንእሽቶ ቁንጣሮ ጽሑፍ ሓገዝ
መተሓሳሰቢ ፡ ስያመታት ንኹሎም ኣማራጺታት ንኣዝዩ ዝዓበየ ናይ ጠውቂ ቦታታትን ዝያዳ ኣብ ጥቕሚ ዝውዕል ቅጥዕን ይኸብብዎም።
 

ዓቐናት ዓውዲ ቅጥዒ

ዝኾነ ቅጥዒ input, select, ወይ textareaስፍሓት ኣብ ምልክትካ ውሑዳት ክፍልታት ጥራይ ብምውሳኽ ኣመዓራርዮ።

ካብ v1.3.0 ጀሚሩ፡ ንባእታታት ቅጥዒ፡ ኣብ ሽቦ ዝተመርኮሰ ናይ ምዕባይ ክፍልታት ወሲኽና ኣለና። በጃኹም እቶም እዞም ኣብ ልዕሊ እቶም ዘለዉ .mini, .small, ወዘተ ክፍልታት ተጠቐሙ።

መጠወቒታት

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

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

ኣብነት መጠወቒታት

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

       

ተለዋዋጢ ዓቐናት

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

ቀዳማይ ስጉምቲ ተግባር
ቀዳማይ ስጉምቲ ተግባር

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

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

ሊንክታት

ቀዳማይ ስጉምቲ ተግባር

መጠወቒታት

 

Alerts & Errors ንዓወት፣ መጠንቀቕታ፣ ጌጋን ሓበሬታ መልእኽትታትን ቅዲታት

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

.alert-message

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

ጃቫስክሪፕት ረኸቡ »

×

ቅዱስ ጓካሞል! Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኣለኻ .

×

ኣየ ስናፕ! እዚን እቲን ቀይርካ እንደገና ፈትን ።

×

ጽቡቕ ተሰሪሑ! ነዚ ናይ መጠንቀቕታ መልእኽቲ ብዓወት ኣንቢብካዮ ።

×

ርእሲ ንላዕሊ! እዚ ኣቓልቦኻ ዘድልዮ መጠንቀቕታ እዩ፡ ግን ገና ዓቢ ቀዳምነት ዝወሃቦ ኣይኮነን።

ኣብነት ኮድ

  1. <div class = "መጠንቀቕታ-መልእኽቲ መጠንቀቕታ" > 
  2.   <a class = "ዕጾ" href = "#" > × </a> ዝብል ጽሑፍ ኣሎ።  
  3.   <p><strong> ቅዱስ ጓካሞል! </strong> Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ። </p> ዝብል ጽሑፍ ኣሎ።
  4. </div> ዝብል ጽሑፍ ኣሎ።

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

.alert-message.block-message

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

ጃቫስክሪፕት ረኸቡ »

×

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

እዚ ስጉምቲ እዚ ውሰድ ወይ ድማ ከምዚ ግበሩ
×

ኣየ ስናፕ! ጌጋ ረኺብካ! እዚን እቲን ቀይርካ እንደገና ፈትን ።

  • ዱይስ ሞሊስ ኤስት ኖን ኮሞዶ ሉክቱስ
  • ኒሲ ኤራት ፖርቲቶር ሊጉላ
  • ኤጌት ላሲንያ ኦዲዮ ሰም ነክ ኤሊት
እዚ ስጉምቲ እዚ ውሰድ ወይ ድማ ከምዚ ግበሩ
×

ጽቡቕ ተሰሪሑ! ነዚ ናይ መጠንቀቕታ መልእኽቲ ብዓወት ኣንቢብካዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ. ማሴናስ ፋውሲበስ ሞሊስ ኢንተርዱም ዝበሃል እዩ።

እዚ ስጉምቲ እዚ ውሰድ ወይ ድማ ከምዚ ግበሩ
×

ርእሲ ንላዕሊ! እዚ ኣቓልቦኻ ዘድልዮ መጠንቀቕታ እዩ፡ ግን ገና ዓቢ ቀዳምነት ዝወሃቦ ኣይኮነን።

እዚ ስጉምቲ እዚ ውሰድ ወይ ድማ ከምዚ ግበሩ

ኣብነት ኮድ

  1. <div class = "መጠንቀቕታ-መልእኽቲ ምዕጋት-መልእኽቲ" > 
  2.   <a class = "ዕጾ" href = "#" > × </a> ዝብል ጽሑፍ ኣሎ።  
  3.   <p><strong> ቅዱስ ጓካሞል! እዚ መጠንቀቕታ እዩ! </strong> Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ። ፕራሰንት ኮሞዶ ቁርሱስ ማግና፡ ቬል ስሰለሪስክ ኒስል ኮንሰክተተርን. </p> ዝብል ጽሑፍ ኣሎ።
  4.   <div class = "ጥንቃቐ-ተግባራት" > 
  5.     <a class = "btn small" href = "#" > ነዚ ስጉምቲ ውሰድ </a> <a class = "btn small" href = "#" > ወይ እዚ ግበር </a>     
  6.   </div> ዝብል ጽሑፍ ኣሎ።
  7. </div> ዝብል ጽሑፍ ኣሎ።

ፖፖቨርስ ትሕዝቶ ኣብ ሞዳላት፣ መሳርሒታት ምኽሪን ፖፖቨርን ንምርኣይ ዝሕግዙ ባእታታት

ሞዳላት

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

ጃቫስክሪፕት ረኸቡ »

×

ሞዳል ርእሲ

ሓደ ረቂቕ ኣካል...

ቀዳማይ ካልኣይ ደረጃ

ምኽሪ መሳርሒታት

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

ጃቫስክሪፕት ረኸቡ »

ሎረም ኢፕሱም ዶላር ኮፍ ኣሜት ኢሎ ጌጋ ኢፕሱም ቨሪታቲስ ኣውት ኢስተ ፐርስፒሻቲስ ኢስተ ቮሉፕታስ ናቱስ ኢሎ ኳሲ ኦዲት ኣውት ናቱስ ኮንሰኩንቱር ኮንሰኩንቱር፣ ኣውት ናቱስ ኢሎ ቮሉፕታተም ኦዲት ፐርስፒሻቲስ ላውዳንቲየም ረም ዶሎረምክ ቶታም ቮሉፕታስ. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, ቶታም ዶሎረምከ ኡንደ ሱንት ሴድ ዲክታ ኳይ ኣኩሳንቲየም ፉጊት ቮሉፕታስ ኒሞ ቮሉፕታስ ቮሉፕታተም ረም ኳይ ኣውቶ ቨርታቲስ ንእሽቶ ኳሲ።

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

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

ጃቫስክሪፕት ረኸቡ »

ፖፖቨር ኣርእስቲ

ኢትያም ፖርታ ሰም ማሌሱዋዳ ማግና ሞሊስ ዩይስሞድ። ማሴናስ ፋውሲበስ ሞሊስ ኢንተርዱም ዝበሃል እዩ። ሞርቢ ልዮ ሪሱስ፡ ፖርታ ኤሲ ኮንሰክተቱር ኤሲ፡ ቬስቲቡሉም ኣብ ኤሮስ።

ጃቫስክሪፕት ምስ ቡትስትራፕ ምጥቃም ንኽትጅምር ዝሕግዝ ኢንዴክስ ናይ ፕላጊናት

ምጅማር ስራሕ

ጃቫስክሪፕት ምስ ቡትስትራፕ ላይብረሪ ምውህሃድ ልዕሊ ዓቐን ቀሊል እዩ። ኣብ ታሕቲ መሰረታዊ ነገራት ንኸይድ እሞ ገለ ኣዝዮም ዘደንቑ ፕላጊናት ንህበኩም ንኽትጅምሩ!

ናይ ጃቫስክሪፕት ሰነዳት ርአ »

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

ገለ ካብቶም ቀንዲ ኣካላት ቡትስትራፕ ብሓደስቲ ብሕታዊ ፕላጊናት ምስ jQuery ን Ender ን ዝሰርሑ ህይወት ኣምጽእዎም ። ንፍሉይ ልምዓታዊ ድሌታትኩም ዝሰማማዕ ክትዝርግሑን ከተዐርይዎምን ንላቦ።

መዝገብ መግለፂ
ቡትስትራፕ-ሞዳል.ጀይኤስ ናትና ሞዳል ፕላግ-ኢን ልዕሊ ቀጢን ምውሳድ ናይቲ ባህላዊ ሞዳል js ፕላግ-ኢን እዩ! ኣብ ትዊተር እንጠልቦ ቅሉዕ ተግባራት ጥራይ ንምሕዋስ ፍሉይ ጥንቃቐ ጌርና።
bootstrap-alerts.js ዝብል ጽሑፍ ኣሎ። እቲ ናይ መጠንቀቕታ ፕላግ-ኢን ኣብ መጠንቀቕታታት ናይ ቀረባ ተግባር ንምውሳኽ ዝሕግዝ ልዕሊ ዓቐን ንእሽቶ ክፍሊ እዩ።
bootstrap-dropdown.js ዝብል ጽሑፍ ኣሎ። እዚ ፕላግ-ኢን ኣብ bootstrap topbar ወይ tabbed navigations ንቑልቁል ዝወርድ ምትእስሳር ንምውሳኽ እዩ።
ቡትስትራፕ-ስክሮልስፒ.ጀይኤስ እቲ ScrollSpy ፕላግ-ኢን ኣብ bootstrap topbar ኣብ scroll position ዝተመርኮሰ auto updating nav ንምውሳኽ እዩ።
ቡትስትራፕ-መጠወቒታት.js እቲ ScrollSpy ፕላግ-ኢን ኣብ bootstrap topbar ኣብ scroll position ዝተመርኮሰ auto updating nav ንምውሳኽ እዩ።
bootstrap-tabs.js ዝብል ጽሑፍ ኣሎ። እዚ ፕላግ-ኢን ብመንገዲ ውሽጣዊ ትሕዝቶ ንዝግበር ዑደት ቅልጡፍን ዳይናሚክን ትብን ከኒናን ተግባር ይውስኽ።
ቡትስትራፕ-ትዊፕሲ.ጀይኤስ ኣብቲ ብጄሰን ፍሬም ዝተጻሕፈ ብሉጽ jQuery.tipsy ፕላግ-ኢን ዝተመርኮሰ፤ twipsy ዝተመሓየሸ ስሪት እዩ፣ ኣብ ምስልታት ዘይምርኮስ፣ ንኣኒሜሽን css3 ዝጥቀም፣ ንከባብያዊ ኣርእስቲ መኽዘን ድማ data-attributes ዝጥቀም!
ቡትስትራፕ-ፖፖቨር.ጀስ እቲ popover plugin ኣብ መተግበሪኻ popovers ንምውሳኽ ቀሊል መተሓላለፊ ይህብ። ንሱ ነቲ boostrap-twipsy.js ፕላግ-ኢን የናውሖ፣ ስለዚ ኣብ ፕሮጀክትካ ፖፖቨርስ ከተካትት ከለኻ ነቲ ፋይል እውን ምሓዝካ ኣረጋግጽ!

ጃቫስክሪፕት ኣድላዪ ድዩ?

ኣይከውንን! ቡትስትራፕ ቅድሚ ኩሉን ልዕሊ ኩሉን ናይ CSS ቤተ መጻሕፍቲ ክኸውን ተባሂሉ ዝተዳለወ እዩ። እዚ ጃቫስክሪፕት ኣብ ልዕሊ እቶም ዝተሓወሱ ቅዲታት መሰረታዊ መስተጋብራዊ ንጣብ ይህብ።

ይኹን እምበር፡ ነቶም ጃቫስክሪፕት ዘድልዮም፡ ቡትስትራፕ ምስ ጃቫስክሪፕት ከመይ ጌርካ ከም እተዋሃህዶ ንምርዳእን ንመሰረታዊ ተግባራት ብኡንብኡ ቅልጡፍን ቀሊልን ኣማራጺ ንኽህበካን፡ እዞም ኣብ ላዕሊ ዘለዉ ፕላግ-ኢናት ኣቕሪብናልኩም ኣለና።

ንዝያዳ ሓበሬታን ገለ ቀጥታዊ ዲሞታት ንምርኣይን፡ በጃኹም ኣብቲ ናይ ፕላግ-ኢን ሰነድ ገጽና ተወከሱ ።

Bootstrap with Less ምጥቃም CSS ናትካ ብ ተለዋዋጢ፣ ሚክሲንን ፋንክሽንን ሱፐርቻርጅ ግበሮ

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

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

ከመይ ጌርና ንጥቀመሉ

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

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

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

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

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

ተለዋዋጢ ረቛሒታት

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

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

ርእይቶ ምሃብ

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

  1. // እዚ ርእይቶ እዩ።
  2. /* እዚ ውን ርእይቶ እዩ */

ሚክሲን ንላዕሊ ዋዙ

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

ቁጽሪ ቅርጺ ፊደላት

  1. #ጽሑፍ {
  2.   . ኣቋራጭ ( @ክብደት : ንቡር , @ዓቐን : 14px , @lineHeight : 20px ) {     
  3.     ቅርጺ - ዓቐን : @ ዓቐን ; 
  4.     ቅርጺ - ክብደት : @ ክብደት ; 
  5.     መስመር - ቁመት : @lineHeight ; 
  6.   } ።
  7.   . sans - serif ( @ክብደት : ንቡር , @ዓቐን : 14px , @lineHeight : 20px ) {     
  8.     font - family : "ሄልቨቲካ ኖይ" , ሄልቨቲካ , ኣርያል , sans - serif ;   
  9.     ቅርጺ - ዓቐን : @ ዓቐን ; 
  10.     ቅርጺ - ክብደት : @ ክብደት ; 
  11.     መስመር - ቁመት : @lineHeight ; 
  12.   } ።
  13.   ...
  14. } ።

ምዕባለታት (gradients)

  1. #ግራድየንት {
  2.   ...
  3.   . ቀጥታዊ ( @startColor : #555, @መወዳእታሕብሪ: #333) { 
  4.     ድሕረ ባይታ - ሕብሪ : @endColor ; 
  5.     ድሕረ ባይታ - ምድግጋም : ምድጋም - x ;
  6.     ድሕረ ባይታ - ምስሊ : - khtml - ምዕባለ ( መስመራዊ , ጸጋማይ ላዕሊ , ጸጋማይ ታሕቲ , ካብ ( @startColor ), ናብ ( @endColor )); // ኮንከሮር   
  7.     ድሕረ ባይታ - ምስሊ : - moz - መስመራዊ - ምዕባለ ( @startColor , @endColor ); // ኤፍ ኤፍ 3.6+   
  8.     ድሕረ ባይታ - ምስሊ : - ms - መስመራዊ - ምዕባለ ( @startColor , @endColor ); // IE10 ዝብል ጽሑፍ ኣሎ።   
  9.     ድሕረ ባይታ - ምስሊ : - ዌብኪት - ምዕባለ ( መስመራዊ , ጸጋማይ ላዕሊ , ጸጋማይ ታሕቲ , ሕብሪ - ደው ምባል ( 0 %, @startColor ), ሕብሪ - ደው ምባል ( 100 %, @endColor )); // ሳፋሪ 4+፣ ክሮም 2+    
  10.     ድሕረ ባይታ - ምስሊ : - ዌብኪት - መስመራዊ - ምዕባለ ( @startColor , @endColor ); // ሳፋሪ 5.1+፣ ክሮም 10+   
  11.     ድሕረ ባይታ - ምስሊ : - o - መስመራዊ - ምዕባለ ( @startColor , @endColor ); // ኦፔራ 11.10   
  12.     ድሕረ ባይታ - ምስሊ : መስመራዊ - ምዕባለ ( @startColor , @endColor ); // እቲ ደረጃ  
  13.   } ።
  14.   ...
  15. } ።

ስርሒታት

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

  1. // ግሪዲቱድ
  2. @gridዓምድታት : 16 ;       
  3. @gridዓምዲ ስፍሓት : 40px ;   
  4. @ግሪድጉተርስፍሓት : 20px ;   
  5. @siteWidth : ( @ዓምድታት ሽቦ * @ስፍሓት ዓምዲ ሽቦ ) + ( @ስፍሓት ሽቦ ጓተር * ( @ዓምድታት ሽቦ - 1 ));                 
  6.  
  7. // ገለ ዓምድታት ምግባር
  8. . ዓምድታት ( @columnSpan : 1 ) { .  
  9.   width : ( @ስፍሓት ዓምዲ ሽቦ * @ ዓምዲ ስፍሓት ) + ( @ስፍሓት ሽቦ ጓተር * ( @ ዓምዲ ስፍሓት - 1 ));         
  10. } ።

ውሑድ ምጥርናፍ

ኣብ /lib/ ዘለዉ ፋይላት ድሕሪ ምቕያርና .less፡ ንbootstrap-*.*.*.cssን bootstrap-*.*.*.min.cssን ፋይላት ዳግማይ ንምፍጣር ዳግማይ ክትጥርንፎም ከድልየካ እዩ። ናብ GitHub ናይ ስሕበት ሕቶ ትቕርብ እንተኾንካ፡ ኩሉ ግዜ ዳግማይ ክትጥርንፍ ኣለካ።

መንገድታት ምጥርናፍ

ሜላ ስጉምትታት
መስመር ምስ makefile

ነቲ less command line compiler ምስ npm ነዚ ዝስዕብ ትእዛዝ ብምፍጻም ንጽዓኖ።

$ npm lessc ምትካል

ሓንሳብ ምስ ተተኽለ በቃ makeካብ ሱር ናይ bootstrap directory ናትካ ምዝዋር ኩሉ ድማ ተዳልዩ ኣለኻ።

ብተወሳኺ watchr ተተኺሉ እንተሃልዩካ፡ ኣብ bootstrap lib ንሓደ ፋይል ኣብ እትእርመሉ ኩሉ ግዜ፡ bootstrap ብኣውቶማቲክ ዳግማይ ክህነጽ ክትጎዪ ትኽእል make watchኢኻ (እዚ ኣድላዪ ኣይኮነን፡ ምቹእነት ጥራይ እዩ)።
ጃቫስክሪፕት።

ነቲ ዝሓለፈ Less.js ኣውሪድካ ናብኡ ዝወስድ መንገዲ (ከምኡ’ውን Bootstrap) ኣብቲ head.

  1. <link rel = "ቅዲ/ውሑድ" href = "/መንገዲ/ናብ/ቦትስትራፕ.ውሑድ" >  
  2. <script src = "/መንገዲ/ናብ/ውሑድ.js" ></script>

ነቶም .less ፋይላት ዳግማይ ንምጥርናፍ፡ በቃ ንዕቅቦም እሞ ገጽካ ዳግማይ ጽዓኖም። Less.js ኣኪቡ ኣብ ሎካል ስቶሬጅ ይዕቅቦም።
መስመር ትእዛዝ

ድሮ እቲ ውሑድ መሳርሒ መስመር ትእዛዝ ተተኺሉ እንተሃልዩካ፡ በቃ ነዚ ዝስዕብ ትእዛዝ ኣካይድ፤

$ lessc ./lib/bootstrap.less > ቡትስትራፕ.ሲኤስ

--compressገለ ባይት ክትዕቅብ እንተፈቲንካ ኣብቲ ትእዛዝ ምእታውካ ኣረጋግጽ !
ውሑድ ናይ ማክ ኣፕ

እቲ ዘይወግዓዊ ናይ ማክ ኣፕ ፡ ማህደራት ናይ .less ፋይላት ይከታተልን ድሕሪ ነፍሲ ወከፍ ምዕቃብ ናይ ሓደ ዝተዓዘብናዮ .less ፋይል ነቲ ኮድ ናብ ሎካል ፋይላት የጠቓልልን።

እንተደሊኻ፡ ኣብቲ ኣፕ ዘሎ ምርጫታት ንኣውቶማቲክ ምጉዳልን እቶም ዝተጠርነፉ ፋይላት ኣብ ኣየናይ ማህደር ከም ዝውድኡን ክትቅይር ትኽእል ኢኻ።