Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. ሞርቢ ሊዮ ሪሱስ፣ ፖርታ አክሰንትተር ኤሲ፣ ቬስቲቡሎም እና ኢሮስ።
ቡትስትራፕ የድር መተግበሪያዎችን እና ጣቢያዎችን ልማት ለመጀመር የተነደፈ ከTwitter የመጣ መሳሪያ ነው።
ለጽሕፈት፣ ቅጾች፣ አዝራሮች፣ ሠንጠረዦች፣ ፍርግርግ፣ አሰሳ እና ሌሎችም ቤዝ CSS እና HTML ያካትታል።
የኔርድ ማንቂያ ፡ ቡትስትራፕ በትንሽ ነገር ነው የተሰራው እና ዘመናዊ አሳሾችን ግምት ውስጥ በማስገባት ከበሩ ውጭ ለመስራት ታስቦ የተሰራ ነው።
ለፈጣኑ እና ቀላሉ ጅምር ይህን ቅንጣቢ ወደ ድረ-ገጽዎ ይቅዱ።
ያነሰ የመጠቀም አድናቂ? ምንም ችግር የለም፣ ሪፖውን ብቻ ይዝጉ እና እነዚህን መስመሮች ያክሉ።
አውርድ፣ ሹካ፣ ጎትት፣ ጉዳዮችን ፋይል እና ሌሎችንም በ Github ላይ ባለው ኦፊሴላዊ የBootstrap repo።
በትዊተር ቀደምት ቀናት መሐንዲሶች የፊት-መጨረሻ መስፈርቶችን ለማሟላት የሚያውቁትን ማንኛውንም ቤተ-መጽሐፍት ይጠቀሙ ነበር። Bootstrap ለቀረቡት ተግዳሮቶች መልስ ሆኖ የጀመረው እና ልማት በትዊተር የመጀመሪያው Hackweek ወቅት በፍጥነት ተፋጠነ።
በብዙ መሐንዲሶች በትዊተር እገዛ እና አስተያየት ቡትስትራፕ መሠረታዊ ቅጦችን ብቻ ሳይሆን ይበልጥ የሚያምር እና ዘላቂ የፊት-መጨረሻ ንድፍ ንድፎችን ለማካተት በከፍተኛ ሁኔታ አድጓል።
በ dev.twitter.com ላይ የበለጠ ያንብቡ ›
ቡትስትራፕ እንደ Chrome፣ ሳፋሪ፣ ኢንተርኔት ኤክስፕሎረር እና ፋየርፎክስ ባሉ ዋና ዘመናዊ አሳሾች ውስጥ ተፈትኗል እና ይደገፋል።
ቡትስትራፕ ከተጠናቀረ CSS ፣ያልተቀናጁ እና የምሳሌ አብነቶች ጋር አብሮ ይመጣል።
እንደ Bootstrap አካል የቀረበው ነባሪ የፍርግርግ ስርዓት 940 ፒክስል ባለ 16-አምድ ፍርግርግ ነው። የታዋቂው 960 ፍርግርግ ስርዓት ጣዕም ነው፣ ነገር ግን በግራ እና በቀኝ በኩል ያለ ተጨማሪ ህዳግ/ፓዲንግ።
እዚህ ላይ እንደሚታየው መሰረታዊ አቀማመጥ በሁለት "አምዶች" ሊፈጠር ይችላል, እያንዳንዱ እያንዳንዳቸው እንደ የፍርግርግ ስርዓታችን አካል ከገለጽናቸው 16 የመሠረት ዓምዶች መካከል ያለውን ቁጥር ይይዛል. ለተጨማሪ ልዩነቶች ከዚህ በታች ያሉትን ምሳሌዎች ይመልከቱ።
- <div class="row"> ክፍል = "ረድፍ" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
ለማንኛውም ጣቢያ ወይም ገጽ መሰረታዊ የ940 ፒክስል ስፋት፣ መሃል ላይ ያተኮረ የመያዣ አቀማመጥ።
- <ሰውነት>
- <div class = "መያዣ" >
- ...
- </div>
- </ body>
ተለዋዋጭ ፈሳሽ ወይም የፈሳሽ ገጽ መዋቅር በትንሹ እና ከፍተኛ-ስፋት እና በግራ-እጅ የጎን አሞሌ። ለመተግበሪያዎች በጣም ጥሩ።
- <ሰውነት>
- <div class = "container-fluid" >
- <div class = "የጎን አሞሌ" >
- ...
- </div>
- <div class = "ይዘት" >
- ...
- </div>
- </div>
- </ body>
የእርስዎን ድረ-ገጾች ለማዋቀር መደበኛ የፊደል አጻጻፍ ተዋረድ።
ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus። Nullam id dolor id nibh ultricies vehicula ut id elit.
አጽንዖትን፣ አድራሻዎችን እና ምህጻረ ቃላትን በመጠቀም
<strong>
<em>
<address>
<abbr>
አጽንዖት መለያዎች ( <strong>
እና <em>
) የአንድን ቃል ወይም ሐረግ ከዙሪያው ቅጂ አንፃር ተጨማሪ አስፈላጊነትን ወይም አጽንዖትን ለማመልከት ጥቅም ላይ መዋል አለባቸው። <strong>
ለአስፈላጊነት እና <em>
ለጭንቀት አጽንዖት ይጠቀሙ .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ።
ማሳሰቢያ ፡ በኤችቲኤምኤል 5 መጠቀም <b>
እና <i>
መለያ መስጠት አሁንም ምንም ችግር የለውም፣ ግን ከአሁን በኋላ ከተፈጥሯዊ ቅጦች ጋር አይመጡም። <b>
ተጨማሪ አስፈላጊነትን ሳያስተላልፍ ቃላትን ወይም ሀረጎችን ለማጉላት ነው, <i>
በአብዛኛው ለድምጽ, ቴክኒካዊ ቃላት, ወዘተ.
ንጥረ ነገሩ <address>
ለቅርብ ቅድመ አያቱ ወይም ለጠቅላላው የሥራ አካል የመገኛ መረጃ ጥቅም ላይ ይውላል። እንዴት እንደሚመስል እነሆ፡-
ማሳሰቢያ ፡ በኤን ውስጥ ያለው እያንዳንዱ መስመር ይዘቱን በትክክል ለማዋቀር <address>
በመስመር መግቻ ( <br />
) ወይም በብሎክ-ደረጃ መለያ (ለምሳሌ) መጠቅለል አለበት ።<p>
ለአህጽሮተ ቃላት እና ምህጻረ ቃላት <abbr>
መለያውን ይጠቀሙ ( በኤችቲኤምኤል 5<acronym>
ውስጥ ተቋርጧል )። የአጭር እጅ ቅጹን በመለያው ውስጥ ያስገቡ እና ለሙሉ ስም ርዕስ ያዘጋጁ።
<blockquote>
<p>
<small>
blockquoteን ለማካተት ዙሪያውን <blockquote>
ጠቅልለው መለያ ይስጡ። ምንጭዎን ለመጥቀስ ኤለመንቱን ይጠቀሙ እና ከእሱ በፊት em dash ያገኛሉ ።<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር ፖሱዌሬ ኤራት ኤ አንቴ ቬኔናቲስ ዳፒቡስ ፖሱሬ ቬሊት አሊኬት።
ዶክተር ጁሊየስ ሂበርት
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
ጠረጴዛዎች በጣም ጥሩ ናቸው - ለብዙ ነገሮች. ምርጥ ሠንጠረዦች ግን ጠቃሚ፣ ሊሰፋ የሚችል እና ሊነበብ የሚችል (በኮድ ደረጃ) ትንሽ የማርክ ፍቅር ያስፈልጋቸዋል። ለማገዝ ጥቂት ምክሮች እዚህ አሉ።
ሁልጊዜ የአምድዎን ራስጌዎች <thead>
እንደዚህ ባለ ተዋረድ ያዙሩት <thead>
> <tr>
> <th>
።
ከአምድ ራስጌዎች ጋር በሚመሳሰል መልኩ፣ ሁሉም የሰንጠረዥዎ አካል ይዘት <tbody>
በእርስዎ ተዋረድ <tbody>
> <tr>
> እንዲሆን መጠቅለል አለበት <td>
።
ሁሉም ሠንጠረዦች ተነባቢነትን ለማረጋገጥ እና መዋቅርን ለመጠበቅ በአስፈላጊ ድንበሮች ብቻ በራስ-ሰር ይዘጋጃሉ። ተጨማሪ ክፍሎችን ወይም ባህሪያትን ማከል አያስፈልግም.
# | የመጀመሪያ ስም | ያባት ስም | ቋንቋ |
---|---|---|---|
1 | አንዳንድ | አንድ | እንግሊዝኛ |
2 | ጆ | ስድስት እሽግ | እንግሊዝኛ |
3 | ስቱ | ጥርስ | ኮድ |
- <table class="common-table"> ክፍል = "የጋራ ጠረጴዛ" >
- ...
- </ ሠንጠረዥ>
የዜብራ-ዝርፊያን በመጨመር በጠረጴዛዎችዎ ትንሽ ቆንጆ ይሁኑ - .zebra-striped
ክፍሉን ብቻ ይጨምሩ።
# | የመጀመሪያ ስም | ያባት ስም | ቋንቋ |
---|---|---|---|
1 | አንዳንድ | አንድ | እንግሊዝኛ |
2 | ጆ | ስድስት እሽግ | እንግሊዝኛ |
3 | ስቱ | ጥርስ | ኮድ |
ማሳሰቢያ፡- የዜብራ-ስሪፕንግ ተራማጅ ማሻሻያ ነው እንደ IE8 እና ከዚያ በታች ላሉት አሮጌ አሳሾች አይገኝም።
- <table class="common-table zebra-striped"> ክፍል = "የጋራ ጠረጴዛ የሜዳ አህያ-ጭረት" >
- ...
- </ ሠንጠረዥ>
ያለፈውን ምሳሌ ወስደን፣ የመደርደር ተግባርን በ jQuery እና በ Tablesorter ፕለጊን በማቅረብ የጠረጴዛዎቻችንን ጥቅም እናሻሽላለን። አደራደሩን ለመቀየር የማንኛውንም ዓምድ ራስጌ ጠቅ ያድርጉ።
# | የመጀመሪያ ስም | ያባት ስም | ቋንቋ |
---|---|---|---|
1 | ያንተ | አንድ | እንግሊዝኛ |
2 | ጆ | ስድስት እሽግ | እንግሊዝኛ |
3 | ስቱ | ጥርስ | ኮድ |
- <script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" > </script>
- <ስክሪፕት >
- $ ( ተግባር () {
- $ ( "ሰንጠረዥ # ዓይነት ሰንጠረዥ ምሳሌ" )። tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "የጋራ ጠረጴዛ የሜዳ አህያ-ጭረት" >
- ...
- </ ሠንጠረዥ>
ሁሉም ቅጾች ሊነበብ እና ሊሰፋ በሚችል መልኩ ለማቅረብ ነባሪ ቅጦች ተሰጥቷቸዋል. ቅጦች ለጽሑፍ ግብዓቶች፣ ዝርዝሮች፣ የጽሑፍ ቦታዎች፣ የሬዲዮ አዝራሮች እና አመልካች ሳጥኖች እና አዝራሮች ተሰጥተዋል።
ወደ ቅጽዎ HTML ያክሉ .form-stacked
እና ከግራቸው ይልቅ በእነሱ መስክ ላይ መለያዎች ይኖሩዎታል። ቅጾችዎ አጭር ከሆኑ ወይም ለከባድ ቅጾች ሁለት አምዶች ግብዓቶች ካሉዎት ይህ በጣም ጥሩ ይሰራል።
እንደ አውራጃ ፣ አዝራሮች ለድርጊቶች ጥቅም ላይ ይውላሉ ፣ ግንኙነቶቹ ለእቃዎች ጥቅም ላይ ይውላሉ። ለምሳሌ "አውርድ" አዝራር ሊሆን ይችላል እና "የቅርብ ጊዜ እንቅስቃሴ" አገናኝ ሊሆን ይችላል.
ሁሉም አዝራሮች ነባሪ ለቀላል ግራጫ ዘይቤ፣ ነገር ግን ሰማያዊ .primary
ክፍል አለ። በተጨማሪም የእራስዎን ዘይቤዎች ማሽከርከር ቀላል peasy ነው.
የአዝራር ቅጦች በተተገበረው በማንኛውም ነገር ላይ .btn
ሊተገበሩ ይችላሉ. <a>
በተለምዶ እነዚህን በ , <button>
, እና <input>
ክፍሎች ላይ ብቻ መተግበር ይፈልጋሉ . እንዴት እንደሚመስል እነሆ፡-
ትልልቅ ወይም ትንሽ አዝራሮች ይፈልጋሉ? ይኑርዎት!
በአንድ ወይም በሌላ ምክንያት በመተግበሪያው ንቁ ላልሆኑ ወይም ላልተሰናከሉ አዝራሮች የአካል ጉዳተኛ ሁኔታን ይጠቀሙ። ያ .disabled
ለአገናኞች እና :disabled
ለክፍለ <button>
ነገሮች ነው።
የአንድን ድርጊት ውድቀት፣ አለመሳካት ወይም ስኬት ለማጉላት ባለአንድ መስመር መልዕክቶች። በተለይ ለቅጾች ጠቃሚ ነው.
ትንሽ ማብራሪያ ለሚፈልጉ መልዕክቶች የአንቀጽ ዘይቤ ማንቂያዎች አሉን። እነዚህ ረዣዥም የስህተት መልዕክቶችን ለማፍሰስ፣ በመጠባበቅ ላይ ያለ እርምጃ ለተጠቃሚው ለማስጠንቀቅ ወይም በገጹ ላይ የበለጠ ትኩረት ለመስጠት መረጃን ለማቅረብ ፍጹም ናቸው።
ሞዳሎች - መገናኛዎች ወይም የብርሃን ሳጥኖች - የበስተጀርባ አውድ መያዙ አስፈላጊ በሆነበት ሁኔታ ውስጥ ለአውድ እርምጃዎች በጣም ጥሩ ናቸው።
አንድ ጥሩ አካል…
ትዊፕሲዎች ግራ የተጋባ ተጠቃሚን ለመርዳት እና ወደ ትክክለኛው አቅጣጫ ለመጠቆም እጅግ በጣም ጠቃሚ ናቸው።
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem ኤክስሊካቦ ኤክስሊካቦ፣ ቮልፕታስ quia ኦዲት ፉጊት አኩሳንቲየም ቶታም ቶታም አርክቴክቶ ኤክስሊካቦ ሲት ኩዋሲ ፉጊት ፉጊት፣ ቶታም ዶሎሬምኬ ኡንዴ ሱንት ሴድ ዲክታ ኳአ አክሳንቲየም ፉጊት ቮልፕታፕ ቮልፕታፕ ቮልፕታፕ ቮልፕታስ ቮልፕታፕ ቮልፕታፕ ቮልፕታፕ ቮልፕታፕ ቮልፕታፕ ቮልፕታስ
አቀማመጥን ሳይነኩ ንዑስ ጽሑፍ መረጃን ወደ ገጽ ለማቅረብ ፖፖቨርን ይጠቀሙ።
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. ሞርቢ ሊዮ ሪሱስ፣ ፖርታ አክሰንትተር ኤሲ፣ ቬስቲቡሎም እና ኢሮስ።
ቡትስትራፕ የተገነባው በ Preboot ፣ ክፍት ምንጭ የሆነ የድብልቅቆች እና ተለዋዋጮች ጥቅል ከትንሽ ጋር በጥምረት ጥቅም ላይ የሚውል የሲኤስኤስ ቅድመ ፕሮሰሰር ለፈጣን እና ቀላል የድር ልማት ነው።
Prebootን በ Bootstrap ውስጥ እንዴት እንደተጠቀምን እና እንዴት መጠቀም እንደሚችሉ ይመልከቱ በሚቀጥለው ፕሮጀክትዎ ላይ ያነሰ ለማሄድ ከመረጡ።
የ Bootstrap's Less ተለዋዋጮችን፣ ሚክስክስን እና መክተቻን በCSS ውስጥ በጃቫስክሪፕት በአሳሽዎ ሙሉ በሙሉ ለመጠቀም ይህንን አማራጭ ይጠቀሙ።
- <link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "stylesheet/ less" href = " less/bootstrap.less" ሚዲያ = "ሁሉም" />
- <script src = "js/less-1.0.41.min.js" ></script>
የ.js መፍትሄ አልተሰማህም? አነስተኛውን የማክ መተግበሪያ ይሞክሩ ወይም ኮድዎን ሲያሰማሩ ለማጠናቀር Node.js ይጠቀሙ ።
በTwitter Bootstrap እንደ Bootstrap አካል የተካተቱት አንዳንድ ዋና ዋና ነገሮች እዚህ አሉ። ለማውረድ እና የበለጠ ለመረዳት ወደ የBootstrap ድርጣቢያ ወይም የ Github ፕሮጀክት ገጽ ይሂዱ።
ተለዋዋጮች በትንሹ የእርስዎን የCSS ራስ ምታት ለመጠበቅ እና ለማዘመን ፍጹም ናቸው። የቀለም እሴትን ወይም ብዙ ጊዜ ጥቅም ላይ የዋለውን እሴት መቀየር ሲፈልጉ በአንድ ቦታ ላይ ያዘምኑት እና ይዘጋጃሉ።
- // አገናኞች
- @linkColor : #8b59c2;
- @linkColorHover : ጠቆር ( @linkColor , 10 );
- // ግራጫ
- @ጥቁር ፡ #000 ;
- @grayDark : አቅልለን ( @black , 25 %);
- @ ግራጫ ፡ ቀለሉ ( @ጥቁር ፣ 50 %) ;
- @grayLight : ማብራት ( @black , 70 %);
- @grayLighter : ማብራት ( @black , 90 %);
- @ ነጭ ፡ #ffff ;
- // የአነጋገር ቀለሞች
- @ሰማያዊ ፡ # 08b5fb ;
- @አረንጓዴ ፡ # 46a546 ;
- @ቀይ ፡ # 9d261d ;
- @ቢጫ ፡ # ffc40d ;
- @ብርቱካን ፡ # f89406 ;
- @ሮዝ ፡ # c3325f ;
- @ሐምራዊ ፡ # 7a43b6 ;
- // መነሻ መስመር
- @መሰረታዊ : 20 ፒክስል ;
/* ... */
ያነሰ ደግሞ ከሲኤስኤስ መደበኛ አገባብ በተጨማሪ ሌላ የአስተያየት ዘይቤ ያቀርባል ።
- // ይህ አስተያየት ነው።
- /* ይህ ደግሞ አስተያየት ነው */
ሚክስክስ በመሠረቱ ለሲኤስኤስ የሚያጠቃልለው ወይም ከፊል ነው፣ ይህም የኮድ ብሎክን ወደ አንድ እንዲያጣምሩ ያስችልዎታል። እንደ ሻጭ ቅድመ-ቅጥያ ባህሪያት box-shadow
፣ የአሳሽ ቅልመት፣ የቅርጸ-ቁምፊ ቁልል እና ሌሎችም ምርጥ ናቸው። ከታች ከ Bootstrap ጋር የተካተቱ ድብልቅዎች ናሙና ነው.
- #ፊደል {
- . አጭር እጅ ( @ክብደት : መደበኛ , @መጠን : 14 ፒክስል , @ lineHeight : 20 ፒክስል ) {
- ቅርጸ-ቁምፊ - መጠን : @ መጠን ;
- ቅርጸ-ቁምፊ - ክብደት : @weight ;
- መስመር - ቁመት : @lineHeight ;
- }
- . ሳንስ - ሰሪፍ ( @ ክብደት : መደበኛ , @ መጠን : 14 ፒክስል , @ lineHeight : 20 ፒክስል ) {
- ቅርጸ-ቁምፊ - ቤተሰብ : "Helvetica Neue" , Helvetica , Arial , ሳንስ - ሰሪፍ ;
- ቅርጸ-ቁምፊ - መጠን : @ መጠን ;
- ቅርጸ-ቁምፊ - ክብደት : @weight ;
- መስመር - ቁመት : @lineHeight ;
- }
- . ሰሪፍ ( @ ክብደት : መደበኛ , @ መጠን : 14 ፒክስል , @ lineHeight : 20 ፒክስል ) {
- ቅርጸ-ቁምፊ - ቤተሰብ : "ጆርጂያ" , ታይምስ ኒው ሮማን , ታይምስ , ሳንስ - ሰሪፍ ;
- ቅርጸ-ቁምፊ - መጠን : @ መጠን ;
- ቅርጸ-ቁምፊ - ክብደት : @weight ;
- መስመር - ቁመት : @lineHeight ;
- }
- . ሞኖስፔስ ( @ክብደት : መደበኛ ፣ @ መጠን : 12 ፒክስል ፣ @lineHeight : 20 ፒክስል ) {
- ቅርጸ-ቁምፊ - ቤተሰብ : "ሞናኮ" , ኩሪየር አዲስ , ሞኖስፔስ ;
- ቅርጸ-ቁምፊ - መጠን : @ መጠን ;
- ቅርጸ-ቁምፊ - ክብደት : @weight ;
- መስመር - ቁመት : @lineHeight ;
- }
- }
- #ግራዲየንት {
- . አግድም ( @startColor : #555, @endColor: #333) {
- ዳራ - ቀለም : @endColor ;
- ዳራ - ድገም : መድገም - x ;
- ዳራ - ምስል : - khtml - ቅልመት ( መስመራዊ ፣ ግራ ከላይ ፣ የቀኝ የላይኛው ፣ ከ ( @startColor ) ፣ እስከ ( @endColor )); // Konqueror
- ዳራ - ምስል : - ሞዝ - መስመራዊ - ግራዲየንት ( በግራ ፣ @startColor ፣ @endColor ); // ኤፍኤፍ 3.6+
- ዳራ - ምስል : - ms - መስመራዊ - ግራዲየንት ( በግራ ፣ @startColor ፣ @endColor ); // IE10
- ዳራ - ምስል : - ዌብኪት - ቅልመት ( መስመራዊ ፣ ግራ ከላይ ፣ የቀኝ የላይኛው ፣ ቀለም - ማቆሚያ ( 0 % ፣ @startColor ) ፣ ቀለም - ማቆሚያ ( 100 % ፣ @endColor )); // ሳፋሪ 4+፣ Chrome 2+
- ዳራ - ምስል : - ዌብኪት - መስመራዊ - ግራዲየንት ( በግራ ፣ @startColor ፣ @endColor ); // ሳፋሪ 5.1+፣ Chrome 10+
- ዳራ - ምስል : - o - መስመራዊ - ግራዲየንት ( በግራ ፣ @startColor ፣ @endColor ); // ኦፔራ 11.10
- - ms - ማጣሪያ : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- ማጣሪያ ፡ e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ) ); // IE6 እና IE7
- ዳራ - ምስል : መስመራዊ - ግራዲየንት ( በግራ ፣ @startColor ፣ @endColor ); // Le መደበኛ
- }
- . አቀባዊ ( @startColor : #555, @endColor: #333) {
- ዳራ - ቀለም : @endColor ;
- ዳራ - ድገም : መድገም - x ;
- ዳራ - ምስል : - khtml - ቅልመት ( መስመራዊ ፣ ግራ ከላይ ፣ ግራ ታች ፣ ከ ( @startColor ) ፣ እስከ ( @endColor )); // Konqueror
- ዳራ - ምስል : - ሞዝ - ሊኒያር - ግራዲየንት ( @startColor , @endColor ); // ኤፍኤፍ 3.6+
- ዳራ - ምስል : - ms - መስመራዊ - ግራዲየንት ( @startColor , @endColor ); // IE10
- ዳራ - ምስል : - ዌብኪት - ግራዲየንት ( መስመራዊ ፣ ግራ ከላይ ፣ ግራ ታች ፣ ቀለም - ማቆሚያ ( 0 % ፣ @startColor ) ፣ ቀለም - ማቆሚያ ( 100 % ፣ @endColor )); // ሳፋሪ 4+፣ Chrome 2+
- ዳራ - ምስል : - ዌብኪት - መስመራዊ - ግራዲየንት ( @startColor , @endColor ); // ሳፋሪ 5.1+፣ Chrome 10+
- ዳራ - ምስል : - o - መስመራዊ - ቅልመት ( @startColor , @endColor ); // ኦፔራ 11.10
- - ms - ማጣሪያ : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- ማጣሪያ ፡ e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ) ); // IE6 እና IE7
- ዳራ - ምስል : መስመራዊ - ግራዲየንት ( @startColor , @endColor ); // ደረጃው
- }
- . አቅጣጫዊ ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . አቀባዊ - ሶስት - ቀለሞች ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
ከታች እንዳለው ተለዋዋጭ እና ኃይለኛ ድብልቆችን ለማፍለቅ አሪፍ ይሁኑ እና አንዳንድ የሂሳብ ስራዎችን ይስሩ።
- // ግርዶሽ
- @gridColumns : 16 ;
- @gridColumn ስፋት : 40 ፒክስል ;
- @gridGutterWidth : 20 ፒክስል ;
- // ፍርግርግ ስርዓት
- . መያዣ {
- ስፋት : @siteWidth ;
- ህዳግ : 0 አውቶማቲክ ;
- . clearfix ();
- }
- . አምዶች ( @columnSpan : 1 ) {
- ማሳያ : መስመር ውስጥ ;
- መንሳፈፍ ፡ ግራ ; _
- ስፋት : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- ህዳግ - ግራ : @gridGutterWidth ;
- &: የመጀመሪያ - ልጅ {
- ህዳግ - ግራ : 0 ;
- }
- }
- . ማካካሻ ( @columnOffset : 1 ) {
- ህዳግ - ግራ ፡ ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 ) ) ! አስፈላጊ ;
- }