ነባሪ ፍርግርግ

እንደ 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>

ርዕሶች እና ቅጂ

የእርስዎን ድረ-ገጾች ለማዋቀር መደበኛ የፊደል አጻጻፍ ተዋረድ።

h1. ርዕስ 1

h2. ርዕስ 2

h3. ርዕስ 3

h4. ርዕስ 4

h5. ርዕስ 5

h6. ርዕስ 6

ምሳሌ አንቀጽ

ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus። Nullam id dolor id nibh ultricies vehicula ut id elit.

የምሳሌ ርዕስ ንዑስ ርዕስ አለው...

<strong>እንዲሁም ከ እና ጋር ንዑስ ርዕሶችን ማከል ይችላሉ።<em>

የተለያዩ ንጥረ ነገሮች

አጽንዖትን፣ አድራሻዎችን እና ምህጻረ ቃላትን በመጠቀም

<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. ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ።

አድራሻዎች

ኤለመንቱ ጥቅም ላይ የሚውለው address- እርስዎ እንደገመቱት ነው! - አድራሻዎች። እንዴት እንደሚመስል እነሆ፡-

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ማስታወሻ ፡ በእውነተኛ ህይወት ውስጥ ምንም አይነት ዘይቤ ሳይተገበር ይዘቱን በትክክል ለማዋቀር በኤን ውስጥ ያለው እያንዳንዱ መስመር addressበመስመር መቋረጥ () ማለቅ አለበት ።<br />

ምህጻረ ቃል

ለአህጽሮተ ቃላት እና ምህጻረ ቃላት abbrመለያውን ይጠቀሙ ( በኤችቲኤምኤል 5acronym ውስጥ ተቋርጧል )። የአጭር እጅ ቅጹን በመለያው ውስጥ ያስገቡ እና ለሙሉ ስም ርዕስ ያዘጋጁ።

የብሎክ ጥቅሶች

<blockquote> <p> <cite>

ዙሪያዎን መጠቅለልዎን blockquoteእና paragraphመለያዎችን citeማድረግዎን ያረጋግጡ። ምንጩን ሲጠቅሱ ኤለመንቱን ይጠቀሙ cite። CSS በራስ ሰር ስም በem dash (—) ይቀድማል።

Lorem ipsum dolor sit amet፣consectetur adipisicing elit፣sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

ዶክተር ጁሊየስ ሂበርት

ያልታዘዘ<ul>

• ጄረሚ ቢክስቢ
• ሮበርት Dezure
• ጆሽ ዋሽንግተን
• አንቶን ካፕሬሲ
• የቡድን አጋሮቼ
  • ጆርጅ ካስታንዛ
  • ጄሪ ሴይንፌልድ
  • ኮስሞ ክሬመር
  • ኢሌን ቤኒስ
  • ኒውማን
• ጆን ያዕቆብ
• ፖል ፒርስ
• ኬቨን ጋርኔት

ቅጥ አልባ<ul.unstyled>

• ጄረሚ ቢክስቢ
• ሮበርት Dezure
• ጆሽ ዋሽንግተን
• አንቶን ካፕሬሲ
• የቡድን አጋሮቼ
  • ጆርጅ ካስታንዛ
  • ጄሪ ሴይንፌልድ
  • ኮስሞ ክሬመር
  • ኢሌን ቤኒስ
  • ኒውማን
• ጆን ያዕቆብ
• ፖል ፒርስ
• ኬቨን ጋርኔት

ታዝዟል።<ol>

1. ጄረሚ ቢክስቢ
2. ሮበርት Dezure
3. ጆሽ ዋሽንግተን
4. አንቶን ካፕሬሲ
5. የቡድን አጋሮቼ
   1. ጆርጅ ካስታንዛ
   2. ጄሪ ሴይንፌልድ
   3. ኮስሞ ክሬመር
   4. ኢሌን ቤኒስ
   5. ኒውማን
6. ጆን ያዕቆብ
7. ፖል ፒርስ
8. ኬቨን ጋርኔት

መግለጫdl

መግለጫ ዝርዝሮች

የመግለጫ ዝርዝር ቃላትን ለመወሰን ፍጹም ነው።

ኢዩስሞድ

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida እና eget metus።

ማሌሱዳ ፖርታ

Etiam porta sem malesuada magna mollis euismod.

የግንባታ ጠረጴዛዎች

<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	ስቱ	ጥርስ	ኮድ

<table class="common-table zebra-striped"> ክፍል = "የጋራ ጠረጴዛ የሜዳ አህያ-ጭረት" >
...
</ ሠንጠረዥ>

ምሳሌ፡- የሜዳ አህያ/TableSorter.js

ያለፈውን ምሳሌ ወስደን፣ የመደርደር ተግባርን በ jQuery እና በ Tablesorter ፕለጊን በማቅረብ የጠረጴዛዎቻችንን ጥቅም እናሻሽላለን። አደራደሩን ለመቀየር የማንኛውንም ዓምድ ራስጌ ጠቅ ያድርጉ።

#	የመጀመሪያ ስም	ያባት ስም	ቋንቋ
1	ያንተ	አንድ	እንግሊዝኛ
2	ጆ	ስድስት እሽግ	እንግሊዝኛ
3	ስቱ	ጥርስ	ኮድ

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( ሰነድ ). ዝግጁ ( ተግባር () { 
    $ ( "ሰንጠረዥ # ዓይነት ሰንጠረዥ ምሳሌ" )። tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "የጋራ ጠረጴዛ የሜዳ አህያ-ጭረት" > 
  ...
</ ሠንጠረዥ>

ነባሪ ቅጦች

ሁሉም ቅጾች ሊነበብ እና ሊሰፋ በሚችል መልኩ ለማቅረብ ነባሪ ቅጦች ተሰጥቷቸዋል. ቅጦች ለጽሑፍ ግብዓቶች፣ ዝርዝሮች፣ የጽሑፍ ቦታዎች፣ የሬዲዮ አዝራሮች እና አመልካች ሳጥኖች እና አዝራሮች ተሰጥተዋል።

የምሳሌ ቅጽ አፈ ታሪክ

ኤክስ-ትልቅ ግቤት

ይምረጡ

1 2 3 4 5

ይምረጡ

1 2 3 4 5

የማይስተካከል ግቤት

እዚህ የተወሰነ እሴት

ግቤት ተሰናክሏል።

ኤክስ-ትልቅ ግቤት

ትንሽ የእርዳታ ጽሑፍ

የምሳሌ ቅጽ አፈ ታሪክ

አስቀድሞ የተዘጋጀ ጽሑፍ

@

አስቀድሞ የተዘጋጀ አመልካች ሳጥን

የተገጠመ አመልካች ሳጥን

የፋይል ግቤት

የምሳሌ ቅጽ አፈ ታሪክ

የአማራጮች ዝርዝር

• አማራጭ አንድ ይህ እና ያ ነው - ለምን ጥሩ እንደሆነ ማካተትዎን እርግጠኛ ይሁኑ
• አማራጭ ሁለትም ተረጋግጦ በቅጽ ውጤቶች ውስጥ ሊካተት ይችላል።
• አማራጭ ሶስት-አዎ፣ እንደገመቱት-እንዲሁም ተረጋግጦ በቅጽ ውጤቶች ውስጥ ሊካተት ይችላል።
• አማራጭ አራት ስለተሰናከለ ሊረጋገጥ አይችልም።

ማሳሰቢያ ፡ ስያሜዎች ለትልቅ ጠቅታ ቦታዎች እና ለበለጠ ጥቅም ላይ ሊውል የሚችል ቅጽ ሁሉንም አማራጮች ይከብባሉ።

የቀን ክልል

ወደ ሁሉም ጊዜያት እንደ ፓሲፊክ መደበኛ ሰዓት (ጂኤምቲ -08፡00) ሆነው ይታያሉ።

ጽሑፍ አካባቢ

አስፈላጊ ከሆነ ከላይ ያለውን መስክ ለመግለጽ የእገዛ ጽሑፍ አግድ።

የአማራጮች ዝርዝር

• አማራጭ አንድ ይህ እና ያ ነው - ለምን ጥሩ እንደሆነ ማካተትዎን እርግጠኛ ይሁኑ
• አማራጭ ሁለትም ተረጋግጦ በቅጽ ውጤቶች ውስጥ ሊካተት ይችላል።

ለውጦችን አስቀምጥ ሰርዝ

የተደረደሩ ቅጾች

ወደ ቅጽዎ HTML ያክሉ .form-stackedእና ከግራቸው ይልቅ በእነሱ መስክ ላይ መለያዎች ይኖሩዎታል። ቅጾችዎ አጭር ከሆኑ ወይም ለከባድ ቅጾች ሁለት አምዶች ግብዓቶች ካሉዎት ይህ በጣም ጥሩ ይሰራል።

የምሳሌ ቅጽ አፈ ታሪክ

ኤክስ-ትልቅ ግቤት

ይምረጡ

1 2 3 4 5

የምሳሌ ቅጽ አፈ ታሪክ

የአማራጮች ዝርዝር

• አማራጭ አንድ ይህ እና ያ ነው - ለምን ጥሩ እንደሆነ ማካተትዎን እርግጠኛ ይሁኑ
• አማራጭ ሁለትም ተረጋግጦ በቅጽ ውጤቶች ውስጥ ሊካተት ይችላል።

ማሳሰቢያ ፡ ስያሜዎች ለትልቅ ጠቅታ ቦታዎች እና ለበለጠ ጥቅም ላይ ሊውል የሚችል ቅጽ ሁሉንም አማራጮች ይከብባሉ።

ለውጦችን አስቀምጥ ሰርዝ

አዝራሮች

እንደ አውራጃ ፣ አዝራሮች ለድርጊቶች ጥቅም ላይ ይውላሉ ፣ ግንኙነቶቹ ለእቃዎች ጥቅም ላይ ይውላሉ። ለምሳሌ "አውርድ" አዝራር ሊሆን ይችላል እና "የቅርብ ጊዜ እንቅስቃሴ" አገናኝ ሊሆን ይችላል.

ሁሉም አዝራሮች ነባሪ ለቀላል ግራጫ ዘይቤ፣ ነገር ግን ሰማያዊ .primaryክፍል አለ። በተጨማሪም የእራስዎን ዘይቤዎች ማሽከርከር ቀላል peasy ነው.

የምሳሌ አዝራሮች

የአዝራር ቅጦች በተተገበረው በማንኛውም ነገር ላይ .btnሊተገበሩ ይችላሉ. aበተለምዶ እነዚህን በ , button, እና inputክፍሎች ላይ ብቻ መተግበር ይፈልጋሉ . እንዴት እንደሚመስል እነሆ፡-

ተለዋጭ መጠኖች

ትልልቅ ወይም ትንሽ አዝራሮች ይፈልጋሉ? ይኑርዎት!

የአካል ጉዳተኛ ሁኔታ

በአንድ ወይም በሌላ ምክንያት በመተግበሪያው ንቁ ላልሆኑ ወይም ላልተሰናከሉ አዝራሮች የአካል ጉዳተኛ ሁኔታን ይጠቀሙ። ያ .disabledለአገናኞች እና :disabledለክፍለ buttonነገሮች ነው።

አገናኞች

አዝራሮች

ምንድን ነው

የእኛ የላይኛው አሞሌ የአንድ ድር ጣቢያ አርማ ወይም ስም፣ የመጀመሪያ ደረጃ አሰሳ እና የፍለጋ ቅጽ የያዘ ቋሚ አሞሌ ነው።

ሊበጅ የሚችል

በውስጡ ያሉት ሁሉም ንጥረ ነገሮች እና አጠቃላይ የላይኛው አሞሌ እንዲሁ አማራጭ ናቸው። አርማ/ስም፣ ናቭ፣ ፍለጋ እና ሁለተኛ የባህር ኃይል-ወይም የዚያ ጥምረት ለማካተት መምረጥ ትችላለህ።

መውረድ ተካትቷል።

እንደ ዋናው አሰሳ አካል፣ ተቆልቋይ መውረጃዎችን ወደ ናቭህ የማከል ችሎታን አካትተናል። እንዴት እንደተሰራ ለማየት ከላይ ያለውን ሁለተኛ ደረጃ ናቭ (በቀኝ የተሰለፈ) ይመልከቱ።

ትሮች እና እንክብሎች

ቀላል ሁለተኛ አሰሳን በ ሀ ፍጠር ul። ተገቢውን ክፍል በመጨመር በትሮች ወይም ክኒኖች መካከል ይቀያይሩ።

እንደ የእኛ መለያ ቅንብሮች ገፆች እና በይዘት ገፆች መካከል ለመቀያየር የተጠቃሚ የጊዜ መስመሮች ላሉ የይዘት ንዑስ ክፍሎች ምርጥ። በ tabbed ወይም pill styles ይገኛል።

• ቤት
• መገለጫ
• መልዕክቶች
• ቅንብሮች
• ተገናኝ

<ul class="tabs"> ክፍል = "ትሮች" >
  <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="pills"> ክፍል = "ክኒኖች" >
  <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="pagination"> ክፍል = "ገጽታ" >
  <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 ፣ ክፍት ምንጭ የሆነ የድብልቅቆች እና ተለዋዋጮች ጥቅል ከትንሽ ጋር በጥምረት ጥቅም ላይ የሚውል የሲኤስኤስ ቅድመ ፕሮሰሰር ለፈጣን እና ቀላል የድር ልማት ነው።

Prebootን በ Bootstrap ውስጥ እንዴት እንደተጠቀምን እና እንዴት መጠቀም እንደሚችሉ ይመልከቱ በሚቀጥለው ፕሮጀክትዎ ላይ ያነሰ ለማሄድ ከመረጡ።

እንዴት መጠቀም እንደሚቻል

የ Bootstrap's Less ተለዋዋጮችን፣ ሚክስክስን እና በCSS ውስጥ በጃቫስክሪፕት በአሳሽዎ ውስጥ መክተቻን ሙሉ በሙሉ ለመጠቀም ይህንን አማራጭ ይጠቀሙ።

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/ less" type = "text/css" href = " less/bootstrap.less" media = "ሁሉም" />    
<script type = "text/javascript" 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 ) ) ! አስፈላጊ ;          
}