በላይ
ግራ
ቀኝ
በታች

Bootstrap፣ ከTwitter

ቡትስትራፕ የድር መተግበሪያዎችን እና ጣቢያዎችን ልማት ለመጀመር የተነደፈ ከTwitter የመጣ መሳሪያ ነው።
ለጽሕፈት፣ ቅጾች፣ አዝራሮች፣ ሠንጠረዦች፣ ፍርግርግ፣ አሰሳ እና ሌሎችም ቤዝ CSS እና HTML ያካትታል።

የኔርድ ማንቂያ ፡ ቡትስትራፕ በትንሽ ነገር ነው የተሰራው እና ዘመናዊ አሳሾችን ግምት ውስጥ በማስገባት ከበሩ ውጭ ለመስራት ታስቦ የተሰራ ነው።

የ CSS ን አገናኝ

ለፈጣኑ እና ቀላሉ ጅምር ይህን ቅንጣቢ ወደ ድረ-ገጽዎ ይቅዱ።

በትንሹ ተጠቀም

ያነሰ የመጠቀም አድናቂ? ምንም ችግር የለም፣ ሪፖውን ብቻ ይዝጉ እና እነዚህን መስመሮች ያክሉ።

በ GitHub ላይ ሹካ

አውርድ፣ ሹካ፣ ጎትት፣ ጉዳዮችን ፋይል እና ሌሎችንም በ Github ላይ ባለው ኦፊሴላዊ የBootstrap repo።

በ GitHub ላይ ማስነሳት »

በአሁኑ ጊዜ v1.3.0

ታሪክ

በትዊተር ላይ ያሉ መሐንዲሶች በታሪክ የሚታወቁትን ማንኛውንም ቤተ-መጻሕፍት የፊት-መጨረሻ መስፈርቶችን ለማሟላት ተጠቅመዋል። Bootstrap ለቀረቡት ተግዳሮቶች እንደ መልስ ተጀመረ። በብዙ ግሩም ሰዎች እገዛ፣ Bootstrap በከፍተኛ ሁኔታ አድጓል።

በ dev.twitter.com ላይ የበለጠ ያንብቡ ›

የአሳሽ ድጋፍ

ቡትስትራፕ እንደ Chrome፣ ሳፋሪ፣ ኢንተርኔት ኤክስፕሎረር እና ፋየርፎክስ ባሉ ዋና ዘመናዊ አሳሾች ውስጥ ተፈትኗል እና ይደገፋል።

በChrome፣ Safari፣ Internet Explorer እና Firefox ውስጥ ተፈትኗል እና ተደግፏል
  • የቅርብ ጊዜ Safari
  • የቅርብ ጊዜ ጉግል ክሮም
  • ፋየርፎክስ 4+
  • ኢንተርኔት ኤክስፕሎረር 7+
  • ኦፔራ 11

ምን ይካተታል።

ቡትስትራፕ ከተጠናቀረ CSS ፣ያልተቀናጁ እና የምሳሌ አብነቶች ጋር አብሮ ይመጣል።

ፈጣን ጅምር ምሳሌዎች

አንዳንድ ፈጣን አብነቶች ይፈልጋሉ? ያሰባሰብናቸውን እነዚህን መሰረታዊ ምሳሌዎች ተመልከት፡-

  • ቀላል የሶስት-አምድ አቀማመጥ ከጀግና ክፍል ጋር
  • ከስታቲስቲክ የጎን አሞሌ ጋር ፈሳሽ አቀማመጥ
  • ቀላል ማንጠልጠያ መያዣ ለመተግበሪያዎች

ነባሪ ፍርግርግ

እንደ Bootstrap አካል የቀረበው ነባሪ የፍርግርግ ስርዓት 940 ፒክስል ባለ 16-አምድ ፍርግርግ ነው። የታዋቂው 960 ፍርግርግ ስርዓት ጣዕም ነው፣ ነገር ግን በግራ እና በቀኝ በኩል ያለ ተጨማሪ ህዳግ/ፓዲንግ።

የፍርግርግ ምልክት ማድረጊያ ምሳሌ

እዚህ ላይ እንደሚታየው መሰረታዊ አቀማመጥ በሁለት "አምዶች" ሊፈጠር ይችላል, እያንዳንዱ እያንዳንዳቸው እንደ የፍርግርግ ስርዓታችን አካል ከገለጽናቸው 16 የመሠረት ዓምዶች መካከል ያለውን ቁጥር ይይዛል. ለተጨማሪ ልዩነቶች ከዚህ በታች ያሉትን ምሳሌዎች ይመልከቱ።

  1. <div class = "ረድፍ" >
  2. <div class = "span6" >
  3. ...
  4. </div>
  5. <div class = "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/3 ሰ
4 ማካካሻ 4
4 ማካካሻ 4
5 ማካካሻ 3
5 ማካካሻ 3
10 ማካካሻ 6

መክተቻ አምዶች

.rowካለህ አምድ ውስጥ በመፍጠር ይዘትህን አስገባ።

የጎጆው አምዶች ምሳሌ

የአምድ 1 ደረጃ
ደረጃ 2
ደረጃ 2
  1. <div class = "ረድፍ" >
  2. <div class = "span12" >
  3. የአምድ 1 ደረጃ
  4. <div class = "ረድፍ" >
  5. <div class = "span6" >
  6. ደረጃ 2
  7. </div>
  8. <div class = "span6" >
  9. ደረጃ 2
  10. </div>
  11. </div>
  12. </div>
  13. </div>

የእራስዎን ፍርግርግ ይንከባለሉ

በ Bootstrap ውስጥ የተገነቡት ነባሪውን የ940 ፒክስል ፍርግርግ ስርዓት ለማበጀት ጥቂት ተለዋዋጮች ናቸው። ትንሽ በማበጀት የአምዶችን መጠን፣ የውሃ ቦይዎቻቸውን እና የሚኖሩበትን መያዣ መቀየር ይችላሉ።

በፍርግርግ ውስጥ

የፍርግርግ ስርዓቱን ለማሻሻል የሚያስፈልጉት ተለዋዋጮች ሁሉም በ ውስጥ ይኖራሉ preboot.less

ተለዋዋጭ ነባሪ እሴት መግለጫ
@gridColumns 16 በፍርግርግ ውስጥ ያሉ የአምዶች ብዛት
@gridColumnWidth 40 ፒክስል በፍርግርግ ውስጥ የእያንዳንዱ አምድ ስፋት
@gridGutterWidth 20 ፒክስል በእያንዳንዱ አምድ መካከል ያለው አሉታዊ ቦታ
@siteWidth የተሰላ ድምር የሁሉም ዓምዶች እና ጋዞች የአምዶችን እና የጋዞችን ብዛት ለመቁጠር እና የድብልቁን ስፋት ለማዘጋጀት አንዳንድ መሰረታዊ ግጥሚያዎችን እንጠቀማለን .fixed-container().

አሁን ለማበጀት

ፍርግርግ ማስተካከል ማለት ሶስቱን @grid-*ተለዋዋጮች መለወጥ እና ያነሱ ፋይሎችን እንደገና ማሰባሰብ ማለት ነው.

ቡትስትራፕ እስከ 24 አምዶች ያለው የፍርግርግ ስርዓት ለማስተናገድ የታጠቁ ይመጣል። ነባሪው 16 ብቻ ነው። የእርስዎ ፍርግርግ ተለዋዋጮች ወደ ባለ 24-አምድ ፍርግርግ ብጁ እንዴት እንደሚመስሉ እነሆ።

  1. @gridColumns : 24 ;
  2. @gridColumnWidth : 20 ፒክስል ;
  3. @gridGutterWidth : 20 ፒክስል ;

አንዴ እንደገና ከተጠናቀረ፣ እርስዎ ይዋቀራሉ!

ቋሚ አቀማመጥ

በነጠላ የቀረበ ለማንኛውም ድረ-ገጽ ወይም ገጽ ነባሪው እና ቀላል ባለ 940 ፒክስል ስፋት <div.container>

  1. <ሰውነት>
  2. <div class = "መያዣ" >
  3. ...
  4. </div>
  5. </ body>

ፈሳሽ አቀማመጥ

አማራጭ፣ ተለዋዋጭ የፈሳሽ ገጽ መዋቅር ከሚኒ- እና ከፍተኛ-ስፋት እና በግራ-እጅ የጎን አሞሌ። ለመተግበሪያዎች እና ሰነዶች ምርጥ።

  1. <ሰውነት>
  2. <div class = "container-fluid" >
  3. <div class = "የጎን አሞሌ" >
  4. ...
  5. </div>
  6. <div class = "ይዘት" >
  7. ...
  8. </div>
  9. </div>
  10. </ body>

ርዕሶች እና ቅጂ

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

ሙሉው የፊደል አጻጻፍ ፍርግርግ በእኛ preboot.less ፋይላችን ውስጥ ባሉት ሁለት ትናንሽ ተለዋዋጮች ላይ የተመሰረተ ነው @basefont፡ እና @baseline. የመጀመሪያው በጠቅላላው ጥቅም ላይ የዋለው የመሠረት ቅርጸ-ቁምፊ መጠን ሲሆን ሁለተኛው ደግሞ የመሠረት መስመር ቁመት ነው.

የኛን አይነት እና ሌሎችንም ህዳጎችን፣ ንጣፍን እና የመስመር ከፍታዎችን ለመፍጠር እነዚያን ተለዋዋጮች እና አንዳንድ ሂሳብን እንጠቀማለን።

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> <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>ለቅርብ ቅድመ አያቱ ወይም ለጠቅላላው የሥራ አካል የመገኛ መረጃ ጥቅም ላይ ይውላል። እንዴት ጥቅም ላይ እንደሚውል ሁለት ምሳሌዎች እነሆ።

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
ሙሉ ስም
[email protected]

ማሳሰቢያ ፡ በኤን ውስጥ ያለው እያንዳንዱ መስመር ይዘቱን በትክክል ለማዋቀር <address>በመስመር መግቻ ( <br />) ወይም በብሎክ-ደረጃ መለያ (ለምሳሌ) መጠቅለል አለበት ።<p>

ምህጻረ ቃል

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

የብሎክ ጥቅሶች

<blockquote> <p> <small>

እንዴት እንደሚጠቅስ

blockquoteን ለማካተት ዙሪያውን <blockquote>ጠቅልለው መለያ ይስጡ። ምንጭዎን ለመጥቀስ ኤለመንቱን ይጠቀሙ እና ከእሱ በፊት em dash ያገኛሉ ።<p><small><small>&mdash;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር ፖሱዌሬ ኤራት ኤ አንቴ ቬኔናቲስ ዳፒቡስ ፖሱሬ ቬሊት አሊኬት።

ዶክተር ጁሊየስ ሂበርት
  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር ፖሱዌሬ ኤራት ኤ አንቴ ቬኔናቲስ ዳፒቡስ ፖሱሬ ቬሊት አሊኬት። </p>
  3. <ትንሽ> ዶክተር ጁሊየስ ሂበርት </small>
  4. </blockquote>

ዝርዝሮች

ያልታዘዘ<ul>

  • Lorem ipsum dolor ሲት አሜት
  • Consectetur adipiscing elit
  • ኢንቲጀር molestie lorem at massa
  • ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor ሴም
    • Ac tristique libero volutpat በ
  • Faucibus porta lacus fringilla vel
  • አኔን ሲት አሜት ኤራት ኑንክ
  • Eget porttitor lorem

ቅጥ አልባ<ul.unstyled>

  • Lorem ipsum dolor ሲት አሜት
  • Consectetur adipiscing elit
  • ኢንቲጀር molestie lorem at massa
  • ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor ሴም
    • Ac tristique libero volutpat በ
  • Faucibus porta lacus fringilla vel
  • አኔን ሲት አሜት ኤራት ኑንክ
  • Eget porttitor lorem

ታዝዟል።<ol>

  1. Lorem ipsum dolor ሲት አሜት
  2. Consectetur adipiscing elit
  3. ኢንቲጀር molestie lorem at massa
  4. ፋሲሊሲስ በፕሪቲየም ኒስላ አሊኬት
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. አኔን ሲት አሜት ኤራት ኑንክ
  8. Eget porttitor lorem

መግለጫ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.

ኮድ

<code> <pre>

ኮድዎን በሁለት ቀላል መለያዎች በቅጡ ያሽጉ። በጃቫስክሪፕት በኩል ለበለጠ አስደናቂነት የጉግልን ኮድ ቆንጆ ቤተ-መጽሐፍት ያስገቡ እና ተዘጋጅተዋል።

ኮድ በማቅረብ ላይ

ኮድ፣ ብሎኮች ወይም ቅንጣቢ መስመር ውስጥ፣ በትክክለኛው መለያ በመጠቅለል ብቻ በቅጡ ሊታዩ ይችላሉ። በርካታ መስመሮችን ለሚሸፍኑ የኮድ ብሎኮች ኤለመንቱን ይጠቀሙ <pre>። ለውስጠ-መስመር ኮድ፣ <code>ኤለመንት ይጠቀሙ።

ንጥረ ነገር ውጤት
<code> እንደዚህ ባለው የጽሑፍ መስመር ውስጥ፣ የታሸገው ኮድዎ ይህን >html<አካል ይመስላል።
<pre>
<div>
  <h1>ርዕስ </h1>
  እዚህ የሆነ ነገር...</p>
</div>

ማስታወሻpre ፡ ኮድ በተቻለ መጠን ወደ ግራ ቅርብ በሆነ መለያዎች ውስጥ ማስቀመጥዎን ያረጋግጡ ። ሁሉንም ትሮች ያቀርባል.

<pre class="prettyprint">

ጉግል-ኮድ-ማሳመር ላይብረሪውን በመጠቀም የኮድ ብሎኮች ትንሽ ለየት ያለ የእይታ ዘይቤ እና አውቶማቲክ አገባብ ማድመቅ ያገኛሉ።

<div> <h1> ርዕስ </h1> <p> እዚህ የሆነ ነገር... </p> </div>
  
  

ጉግል-ኮድ-ማሳመር ያውርዱ እና እንዴት እንደሚጠቀሙበት 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ማንኛውም መጠን ሊሆኑ ይችላሉ፣ ነገር ግን በቀጥታ ወደ አብሮገነብ የቡትስትራፕ ፍርግርግ ስርዓት ሲቀረጹ በተሻለ ሁኔታ ይሰራሉ። እንደ 90፣ 210 እና 330 ያሉ የምስል ስፋቶች ከጥቂት ፒክሰሎች ንጣፍ ንጣፍ ጋር በማጣመር የ .span2, .span4እና .span6የአምድ መጠኖችን ያካክላሉ።

ትልቅ

መካከለኛ

ትንሽ

ኮድ በማድረግ ላይ

የሚዲያ ፍርግርግ ለመጠቀም ቀላል እና ይልቁንም በምልክት ማድረጊያ በኩል ቀላል ናቸው። የእነሱ ልኬቶች በተካተቱት ምስሎች መጠን ላይ ብቻ የተመሰረቱ ናቸው.

  1. <ul class = "ሚዲያ-ግሪድ" >
  2. <li>
  3. <a href = "#" >
  4. <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
  5. </a>
  6. </li>
  7. <li>
  8. <a href = "#" >
  9. <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
  10. </a>
  11. </li>
  12. </ul>

የግንባታ ጠረጴዛዎች

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

ጠረጴዛዎች በጣም ጥሩ ናቸው - ለብዙ ነገሮች. ምርጥ ሠንጠረዦች ግን ጠቃሚ፣ ሊሰፋ የሚችል እና ሊነበብ የሚችል (በኮድ ደረጃ) ትንሽ የማርክ ፍቅር ያስፈልጋቸዋል። ለማገዝ ጥቂት ምክሮች እዚህ አሉ።

ሁልጊዜ የአምድዎን ራስጌዎች <thead>እንደዚህ ባለ ተዋረድ ያዙሩት <thead>> <tr>> <th>

ከአምድ ራስጌዎች ጋር በሚመሳሰል መልኩ፣ ሁሉም የሰንጠረዥዎ አካል ይዘት <tbody>በእርስዎ ተዋረድ <tbody>> <tr>> እንዲሆን መጠቅለል አለበት <td>

ምሳሌ፡ ነባሪ የሰንጠረዥ ቅጦች

ሁሉም ሠንጠረዦች ተነባቢነትን ለማረጋገጥ እና መዋቅርን ለመጠበቅ በአስፈላጊ ድንበሮች ብቻ በራስ-ሰር ይዘጋጃሉ። ተጨማሪ ክፍሎችን ወይም ባህሪያትን ማከል አያስፈልግም.

# የመጀመሪያ ስም ያባት ስም ቋንቋ
1 አንዳንድ አንድ እንግሊዝኛ
2 ስድስት እሽግ እንግሊዝኛ
3 ስቱ ጥርስ ኮድ
  1. <ጠረጴዛ>
  2. ...
  3. </ ሠንጠረዥ>

ምሳሌ፡- የሜዳ አህያ

የዜብራ-ዝርፊያን በመጨመር በጠረጴዛዎችዎ ትንሽ ቆንጆ ይሁኑ - .zebra-stripedክፍሉን ብቻ ይጨምሩ።

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

ማሳሰቢያ፡- የዜብራ-ስሪፕንግ ተራማጅ ማሻሻያ ነው እንደ IE8 እና ከዚያ በታች ላሉት አሮጌ አሳሾች አይገኝም።

  1. <table class = "የሜዳ አህያ የተሰነጠቀ" >
  2. ...
  3. </ ሠንጠረዥ>

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

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

# የመጀመሪያ ስም ያባት ስም ቋንቋ
2 ስድስት እሽግ እንግሊዝኛ
3 ስቱ ጥርስ ኮድ
1 ያንተ አንድ እንግሊዝኛ
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
  2. <ስክሪፕት >
  3. $ ( ተግባር () {
  4. $ ( "ሰንጠረዥ # ዓይነት ሰንጠረዥ ምሳሌ" )። tablesorter ({ sortList : [[ 1 , 0 ]] });
  5. });
  6. </script>
  7. <table class = "የሜዳ አህያ የተሰነጠቀ" >
  8. ...
  9. </ ሠንጠረዥ>

ነባሪ ቅጦች

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

የምሳሌ ቅጽ አፈ ታሪክ
እዚህ የተወሰነ እሴት
ትንሽ የእርዳታ ጽሑፍ
የምሳሌ ቅጽ አፈ ታሪክ
@
የምሳሌ ቅጽ አፈ ታሪክ
ማሳሰቢያ ፡ ስያሜዎች ለትልቅ ጠቅታ ቦታዎች እና ለበለጠ ጥቅም ላይ ሊውል የሚችል ቅጽ ሁሉንም አማራጮች ይከብባሉ።
ወደ ሁሉም ጊዜያት እንደ ፓሲፊክ መደበኛ ሰዓት (ጂኤምቲ -08፡00) ሆነው ይታያሉ።
አስፈላጊ ከሆነ ከላይ ያለውን መስክ ለመግለጽ የእገዛ ጽሑፍ አግድ።
 

የተደረደሩ ቅጾች

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

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

የቅጽ የመስክ መጠኖች

ወደ ምልክት ማድረጊያዎ ጥቂት ክፍሎችን በማከል ማንኛውንም ቅጽ inputselectወይም ስፋት ያብጁ።textarea

ከv1.3.0 ጀምሮ፣ ለቅጽ አካላት በፍርግርግ ላይ የተመሰረቱ የመጠን ክፍሎችን ጨምረናል። እባኮትን እነዚህን አሁን ባሉት .mini.smallወዘተ ክፍሎች ይጠቀሙ።

አዝራሮች

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

ሁሉም አዝራሮች በነባሪነት ወደ ቀላል ግራጫ ቅጥ፣ ግን በርካታ ተግባራዊ ክፍሎች ለተለያዩ የቀለም ቅጦች ሊተገበሩ ይችላሉ። እነዚህ ክፍሎች ሰማያዊ .primaryክፍል፣ ቀላል-ሰማያዊ .infoክፍል፣ አረንጓዴ .successክፍል እና ቀይ .dangerክፍል ያካትታሉ።

የምሳሌ አዝራሮች

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

       

ተለዋጭ መጠኖች

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

የአካል ጉዳተኛ ሁኔታ

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

አገናኞች

አዝራሮች

 

መሰረታዊ ማንቂያዎች

.alert-message

የአንድን ድርጊት ውድቀት፣ አለመሳካት ወይም ስኬት ለማጉላት ባለአንድ መስመር መልዕክቶች። በተለይ ለቅጾች ጠቃሚ ነው.

ጃቫስክሪፕቱን አግኝ »

×

ቅዱስ guacamole! እራስህን ፈትሽ በጣም ጥሩ አይደለህም።

×

ኧረ ተው! ይህንን እና ያንን ይለውጡ እና እንደገና ይሞክሩ።

×

ጥሩ ስራ! ይህን የማንቂያ መልእክት በተሳካ ሁኔታ አንብበሃል።

×

ቀና በል! ይህ የእርስዎን ትኩረት የሚፈልግ ማንቂያ ነው፣ ግን ገና ትልቅ ቅድሚያ የሚሰጠው ጉዳይ አይደለም።

ምሳሌ ኮድ

  1. <div class = "የማስጠንቀቂያ-መልእክት ማስጠንቀቂያ" >
  2. <a class = "ዝጋ" href = "#" > × </a>
  3. <p><strong> ቅዱስ guacamole! </strong> እራስህን ፈትሽ፣ በጣም ጥሩ አይደለህም። </p>
  4. </div>

መልዕክቶችን አግድ

.alert-message.block-message

ትንሽ ማብራሪያ ለሚፈልጉ መልዕክቶች የአንቀጽ ዘይቤ ማንቂያዎች አሉን። እነዚህ ረዣዥም የስህተት መልዕክቶችን ለማፍሰስ፣ በመጠባበቅ ላይ ያለ እርምጃ ለተጠቃሚው ለማስጠንቀቅ ወይም በገጹ ላይ የበለጠ ትኩረት ለመስጠት መረጃን ለማቅረብ ፍጹም ናቸው።

ጃቫስክሪፕቱን አግኝ »

×

ቅዱስ guacamole! ይህ ማስጠንቀቂያ ነው! እራስህን ፈትሽ በጣም ጥሩ አይደለህም። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። Praesent commodo cursus magna, vel selerisque nisl consectetur እና.

×

ኧረ ተው! ስህተት አለብህ! ይህንን እና ያንን ይለውጡ እና እንደገና ይሞክሩ።

  • Duis mollis est non commodo luctus
  • Nisi erat porttitor ligula
  • Eget lacinia odio sem nec elit
×

ጥሩ ስራ! ይህን የማንቂያ መልእክት በተሳካ ሁኔታ አንብበሃል። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus። Maecenas faucibus mollis interdum.

×

ቀና በል! ይህ የእርስዎን ትኩረት የሚፈልግ ማንቂያ ነው፣ ግን ገና ትልቅ ቅድሚያ የሚሰጠው ጉዳይ አይደለም።

ምሳሌ ኮድ

  1. <div class = "የማስጠንቀቂያ-መልእክት የማገድ-መልእክት ማስጠንቀቂያ" >
  2. <a class = "ዝጋ" href = "#" > × </a>
  3. <p><strong> ቅዱስ guacamole! ይህ ማስጠንቀቂያ ነው! </strong> እራስህን ፈትሽ፣ በጣም ጥሩ አይደለህም። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። Praesent commodo cursus magna, vel selerisque nisl consectetur እና. </p>
  4. <div class = "ማንቂያ-ድርጊት" >
  5. <a class = "btn small" href = "#" > ይህን እርምጃ ውሰድ </a> <a class = "btn small" href = "#" > ወይም ይህን አድርግ </a>
  6. </div>
  7. </div>

ሞዳሎች

ሞዳሎች - መገናኛዎች ወይም የብርሃን ሳጥኖች - የበስተጀርባ አውድ መያዙ አስፈላጊ በሆነበት ሁኔታ ውስጥ ለአውድ እርምጃዎች በጣም ጥሩ ናቸው።

ጃቫስክሪፕቱን አግኝ »

የመሳሪያ ምክሮች

ትዊፕሲዎች ግራ የተጋባ ተጠቃሚን ለመርዳት እና ወደ ትክክለኛው አቅጣጫ ለመጠቆም እጅግ በጣም ጠቃሚ ናቸው።

ጃቫስክሪፕቱን አግኝ »

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. ሞርቢ ሊዮ ሪሱስ፣ ፖርታ አክሰንትተር ኤሲ፣ ቬስቲቡሎም እና ኢሮስ።

መጀመር

ጃቫስክሪፕትን ከBootstrap ቤተ-መጽሐፍት ጋር ማዋሃድ እጅግ በጣም ቀላል ነው። ከታች ያሉትን መሰረታዊ ነገሮች እንይዛለን እና እርስዎን ለመጀመር አንዳንድ ግሩም ተሰኪዎችን እናቀርብልዎታለን!

ጃቫስክሪፕት ሰነዶችን ይመልከቱ »

ምን ይካተታል።

አንዳንድ የBootstrap ዋና ክፍሎችን ከ jQuery እና Ender ጋር በሚሰሩ አዲስ ብጁ ፕለጊኖች ወደ ህይወት ያምጡ ። የእርስዎን ልዩ የልማት ፍላጎቶች ለማሟላት እንዲረዝሙ እና እንዲያሻሽሏቸው እናበረታታዎታለን።

ፋይል መግለጫ
bootstrap-modal.js የኛ ሞዳል ፕለጊን በባህላዊው ሞዳል js ፕለጊን ላይ እጅግ በጣም ቀጭን ነው! በትዊተር ላይ የምንፈልገውን ባዶ ተግባር ብቻ ለማካተት ልዩ ጥንቃቄ አድርገናል።
bootstrap-alerts.js የማንቂያ ፕለጊን ወደ ማንቂያዎች ቅርብ ተግባራትን ለመጨመር እጅግ በጣም ትንሽ ክፍል ነው።
bootstrap-dropdown.js ይህ ፕለጊን የተቆልቋይ መስተጋብርን ወደ ቡትስትራፕ የላይኛው አሞሌ ወይም ታብድ አሰሳዎች ለመጨመር ነው።
bootstrap-scrollspy.js የ ScrollSpy ፕለጊን በቡትስትራፕ የላይኛው አሞሌ ላይ በማሸብለል አቀማመጥ ላይ በመመርኮዝ በራስ-ሰር ለማዘመን ነው።
bootstrap-tabs.js ይህ ፕለጊን ፈጣን፣ ተለዋዋጭ ትር እና ክኒን በአካባቢያዊ ይዘት ለብስክሌት መንቀሳቀስን ይጨምራል።
bootstrap-twipsy.js በጄሰን ፍሬም በተፃፈው ምርጥ jQuery.tipsy ፕለጊን ላይ በመመስረት; twipsy የዘመነ ስሪት ነው፣ እሱም በምስሎች ላይ የማይታመን፣ css3 ለአኒሜሽን ይጠቀማል፣ እና ውሂብ-ባህሪያትን ለአካባቢያዊ የርዕስ ማከማቻ!
bootstrap-popover.js የፖፖቨር ፕለጊን ወደ መተግበሪያዎ ፖፖቨር ለመጨመር ቀላል በይነገጽ ያቀርባል። የ boostrap-twipsy.js ፕለጊን ያራዝመዋል፣ ስለዚህ በፕሮጀክትዎ ውስጥ ብቅ-ባዮችን ሲያካትቱ ያንን ፋይል መያዝዎን ያረጋግጡ።

ጃቫስክሪፕት አስፈላጊ ነው?

አይደለም! ቡትስትራፕ በመጀመሪያ የተነደፈው የሲኤስኤስ ቤተ-መጽሐፍት እንዲሆን ነው። ይህ ጃቫስክሪፕት በተካተቱት ቅጦች ላይ መሰረታዊ በይነተገናኝ ንብርብር ያቀርባል።

ሆኖም፣ ጃቫስክሪፕት ለሚያስፈልጋቸው፣ ቡትስትራፕን ከጃቫስክሪፕት ጋር እንዴት እንደሚያዋህዱ እንዲረዱዎት እና ለመሠረታዊ ተግባርዎ ፈጣን እና ቀላል ክብደት ያለው አማራጭ እንዲሰጡዎት ከላይ ያሉትን ተሰኪዎች አቅርበናል።

ለበለጠ መረጃ እና አንዳንድ የቀጥታ ማሳያዎችን ለማየት፣እባክዎ የእኛን ተሰኪ ሰነድ ገጽ ይመልከቱ ።

ቡትስትራፕ የተገነባው በ Preboot ፣ ክፍት ምንጭ የሆነ የድብልቅቆች እና ተለዋዋጮች ጥቅል ከትንሽ ጋር በጥምረት ጥቅም ላይ የሚውል የሲኤስኤስ ቅድመ ፕሮሰሰር ለፈጣን እና ቀላል የድር ልማት ነው።

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

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

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

  1. <link rel = "stylesheet/less" href = " less/bootstrap.less" media = "ሁሉም" />
  2. <script src = "js/less-1.1.3.min.js" ></script>

የ.js መፍትሄ አልተሰማህም? አነስተኛውን የማክ መተግበሪያ ይሞክሩ ወይም ኮድዎን ሲያሰማሩ ለማጠናቀር Node.js ይጠቀሙ ።

ምን ይካተታል።

በTwitter Bootstrap እንደ Bootstrap አካል የተካተቱት አንዳንድ ዋና ዋና ነገሮች እዚህ አሉ። ለማውረድ እና የበለጠ ለመረዳት ወደ የBootstrap ድርጣቢያ ወይም የ Github ፕሮጀክት ገጽ ይሂዱ።

ተለዋዋጮች

ተለዋዋጮች በትንሹ የእርስዎን የCSS ራስ ምታት ለመጠበቅ እና ለማዘመን ፍጹም ናቸው። የቀለም እሴትን ወይም ብዙ ጊዜ ጥቅም ላይ የዋለውን እሴት መቀየር ሲፈልጉ በአንድ ቦታ ላይ ያዘምኑት እና ይዘጋጃሉ።

  1. // አገናኞች
  2. @linkColor : #8b59c2;
  3. @linkColorHover : ጠቆር ( @linkColor , 10 );
  4.  
  5. // ግራጫ
  6. @ጥቁር ፡ #000 ;
  7. @grayDark : አቅልለን ( @black , 25 %);
  8. @ ግራጫ ፡ ቀለሉ ( @ጥቁር 50 %) ;
  9. @grayLight : ማብራት ( @black , 70 %);
  10. @grayLighter : ማብራት ( @black , 90 %);
  11. @ ነጭ ፡ #ffff ;
  12.  
  13. // የአነጋገር ቀለሞች
  14. @ሰማያዊ ፡ # 08b5fb ;
  15. @አረንጓዴ ፡ # 46a546 ;
  16. @ቀይ ፡ # 9d261d ;
  17. @ቢጫ ፡ # ffc40d ;
  18. @ብርቱካን ፡ # f89406 ;
  19. @ሮዝ ፡ # c3325f ;
  20. @ሐምራዊ ፡ # 7a43b6 ;
  21.  
  22. // ቤዝላይን ፍርግርግ
  23. @bashent : 13 ፒክስል ;
  24. @መሰረታዊ : 18 ፒክስል ;

አስተያየት መስጠት

/* ... */ያነሰ ደግሞ ከሲኤስኤስ መደበኛ አገባብ በተጨማሪ ሌላ የአስተያየት ዘይቤ ያቀርባል ።

  1. // ይህ አስተያየት ነው።
  2. /* ይህ ደግሞ አስተያየት ነው */

ዋዙን ያቀላቅላል

ሚክስክስ በመሠረቱ ለሲኤስኤስ የሚያጠቃልለው ወይም ከፊል ነው፣ ይህም የኮድ ብሎክን ወደ አንድ እንዲያጣምሩ ያስችልዎታል። እንደ ሻጭ ቅድመ-ቅጥያ ባህሪያት box-shadow፣ የአሳሽ ቅልመት፣ የቅርጸ-ቁምፊ ቁልል እና ሌሎችም ምርጥ ናቸው። ከታች ከ Bootstrap ጋር የተካተቱ ድብልቅዎች ናሙና ነው.

የቅርጸ-ቁምፊ ቁልል

  1. #ፊደል {
  2. . አጭር እጅ ( @ክብደት : መደበኛ , @መጠን : 14 ፒክስል , @ lineHeight : 20 ፒክስል ) {
  3. ቅርጸ-ቁምፊ - መጠን : @ መጠን ;
  4. ቅርጸ-ቁምፊ - ክብደት : @weight ;
  5. መስመር - ቁመት : @lineHeight ;
  6. }
  7. . ሳንስ - ሰሪፍ ( @ ክብደት : መደበኛ , @ መጠን : 14 ፒክስል , @ lineHeight : 20 ፒክስል ) {
  8. ቅርጸ-ቁምፊ - ቤተሰብ : "Helvetica Neue" , Helvetica , Arial , ሳንስ - ሰሪፍ ;
  9. ቅርጸ-ቁምፊ - መጠን : @ መጠን ;
  10. ቅርጸ-ቁምፊ - ክብደት : @weight ;
  11. መስመር - ቁመት : @lineHeight ;
  12. }
  13. ...
  14. }

ቀስቶች

  1. #ግራዲየንት {
  2. ...
  3. . አቀባዊ ( @startColor : #555, @endColor: #333) {
  4. ዳራ - ቀለም : @endColor ;
  5. ዳራ - ድገም : መድገም - x ;
  6. ዳራ - ምስል : - khtml - ቅልመት ( መስመራዊ ግራ ከላይ ግራ ታች ( @startColor ) ፣ እስከ ( @endColor )); // Konqueror
  7. ዳራ - ምስል : - ሞዝ - ሊኒያር - ግራዲየንት ( @startColor , @endColor ); // ኤፍኤፍ 3.6+
  8. ዳራ - ምስል : - ms - መስመራዊ - ግራዲየንት ( @startColor , @endColor ); // IE10
  9. ዳራ - ምስል : - ዌብኪት - ግራዲየንት ( መስመራዊ ግራ ከላይ ግራ ታች ቀለም - ማቆሚያ ( 0 % ፣ @startColor ) ፣ ቀለም - ማቆሚያ ( 100 % ፣ @endColor )); // ሳፋሪ 4+፣ Chrome 2+
  10. ዳራ - ምስል : - ዌብኪት - መስመራዊ - ግራዲየንት ( @startColor , @endColor ); // ሳፋሪ 5.1+፣ Chrome 10+
  11. ዳራ - ምስል : - o - መስመራዊ - ቅልመት ( @startColor , @endColor ); // ኦፔራ 11.10
  12. ዳራ - ምስል : መስመራዊ - ግራዲየንት ( @startColor , @endColor ); // ደረጃው
  13. }
  14. ...
  15. }

ክወናዎች

ከታች እንዳለው ተለዋዋጭ እና ኃይለኛ ድብልቆችን ለማፍለቅ አሪፍ ይሁኑ እና አንዳንድ የሂሳብ ስራዎችን ይስሩ።

  1. // ግርዶሽ
  2. @gridColumns : 16 ;
  3. @gridColumn ስፋት : 40 ፒክስል ;
  4. @gridGutterWidth : 20 ፒክስል ;
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
  6.  
  7. // አንዳንድ አምዶችን ያድርጉ
  8. . አምዶች ( @columnSpan : 1 ) {
  9. ስፋት : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
  10. }

ያነሰ ማጠናቀር

በ /lib/ ውስጥ ያሉ ፋይሎችን ካሻሻሉ በኋላ .lessየቡትስትራፕ-*.*.*.css እና bootstrap-*.*.*.min.css ፋይሎችን እንደገና ማሰባሰብ ያስፈልግዎታል. ለ GitHub የመሳብ ጥያቄ እያስገባህ ከሆነ ሁል ጊዜ እንደገና ማጠናቀር አለብህ።

የማጠናቀር መንገዶች

ዘዴ እርምጃዎች
መስቀለኛ መንገድ ከ makefile ጋር

የሚከተለውን ትዕዛዝ በማሄድ አነስተኛውን የትዕዛዝ መስመር ማቀናበሪያ በ npm ይጫኑ፡-

$ npm ጫን lessc

አንዴ ከተጫነ makeከቡትስትራፕ ማውጫዎ ስር ያሂዱ እና ዝግጁ ነዎት።

በተጨማሪም ጠባቂ ከተጫነ በቡትስትራፕ ሊብ ውስጥ ፋይልን ባርትዑ ቁጥር ቡትስትራፕmake watch በራስ-ሰር እንደገና እንዲገነባ ሊሮጡ ይችላሉ (ይህ አያስፈልግም፣ የምቾት ዘዴ ብቻ)።

ጃቫስክሪፕት

የቅርብ ጊዜዎቹን Less.js ያውርዱ እና ወደ እሱ የሚወስደውን መንገድ (እና Bootstrap) በ ውስጥ ያካትቱ head

  1. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" >
  2. <script src = "/path/to/less.js" ></script>

ያነሱ ፋይሎችን እንደገና ለመሰብሰብ፣ በቀላሉ ያስቀምጡ እና ገጽዎን እንደገና ይጫኑ። Less.js ያጠናቅራቸዋል እና በአካባቢው ማከማቻ ውስጥ ያስቀምጣቸዋል።

የትእዛዝ መስመር

ያነሰ የትእዛዝ መስመር መሳሪያ ከተጫነ በቀላሉ የሚከተለውን ትዕዛዝ ያሂዱ፡-

$ lessc ./lib/bootstrap.less > bootstrap.css

--compressአንዳንድ ባይት ለማስቀመጥ እየሞከሩ ከሆነ በዚያ ትዕዛዝ ውስጥ ማካተትዎን እርግጠኛ ይሁኑ !

ያነሰ የማክ መተግበሪያ

መደበኛ ያልሆነው የማክ መተግበሪያ .ያነሱ ፋይሎች ማውጫዎችን ይመለከታቸዋል እና ኮዱን ወደ አካባቢያዊ ፋይሎች ያጠናቅራል ከእያንዳንዱ የታየ . አልባ ፋይል በኋላ።

ከፈለጉ በመተግበሪያው ውስጥ ምርጫዎችን በራስ-ሰር ለመቀነስ እና የተጠናቀሩ ፋይሎች በየትኛው ማውጫ ውስጥ እንደሚገኙ መቀያየር ይችላሉ።