Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. ሞርቢ ሊዮ ሪሱስ፣ ፖርታ አክሰንትተር ኤሲ፣ ቬስቲቡሎም እና ኢሮስ።
ቡትስትራፕ የድር መተግበሪያዎችን እና ጣቢያዎችን ልማት ለመጀመር የተነደፈ ከTwitter የመጣ መሳሪያ ነው።
ለጽሕፈት፣ ቅጾች፣ አዝራሮች፣ ሠንጠረዦች፣ ፍርግርግ፣ አሰሳ እና ሌሎችም ቤዝ CSS እና HTML ያካትታል።
የኔርድ ማንቂያ ፡ ቡትስትራፕ በትንሽ ነገር ነው የተሰራው እና ዘመናዊ አሳሾችን ግምት ውስጥ በማስገባት ከበሩ ውጭ ለመስራት ታስቦ የተሰራ ነው።
ለፈጣኑ እና ቀላሉ ጅምር ይህን ቅንጣቢ ወደ ድረ-ገጽዎ ይቅዱ።
ያነሰ የመጠቀም አድናቂ? ምንም ችግር የለም፣ ሪፖውን ብቻ ይዝጉ እና እነዚህን መስመሮች ያክሉ።
አውርድ፣ ሹካ፣ ጎትት፣ ጉዳዮችን ፋይል እና ሌሎችንም በ Github ላይ ባለው ኦፊሴላዊ የBootstrap repo።
በአሁኑ ጊዜ v1.3.0
በትዊተር ላይ ያሉ መሐንዲሶች በታሪክ የሚታወቁትን ማንኛውንም ቤተ-መጻሕፍት የፊት-መጨረሻ መስፈርቶችን ለማሟላት ተጠቅመዋል። Bootstrap ለቀረቡት ተግዳሮቶች እንደ መልስ ተጀመረ። በብዙ ግሩም ሰዎች እገዛ፣ Bootstrap በከፍተኛ ሁኔታ አድጓል።
በ dev.twitter.com ላይ የበለጠ ያንብቡ ›
ቡትስትራፕ እንደ Chrome፣ ሳፋሪ፣ ኢንተርኔት ኤክስፕሎረር እና ፋየርፎክስ ባሉ ዋና ዘመናዊ አሳሾች ውስጥ ተፈትኗል እና ይደገፋል።
ቡትስትራፕ ከተጠናቀረ CSS ፣ያልተቀናጁ እና የምሳሌ አብነቶች ጋር አብሮ ይመጣል።
እንደ Bootstrap አካል የቀረበው ነባሪ የፍርግርግ ስርዓት 940 ፒክስል ባለ 16-አምድ ፍርግርግ ነው። የታዋቂው 960 ፍርግርግ ስርዓት ጣዕም ነው፣ ነገር ግን በግራ እና በቀኝ በኩል ያለ ተጨማሪ ህዳግ/ፓዲንግ።
እዚህ ላይ እንደሚታየው መሰረታዊ አቀማመጥ በሁለት "አምዶች" ሊፈጠር ይችላል, እያንዳንዱ እያንዳንዳቸው እንደ የፍርግርግ ስርዓታችን አካል ከገለጽናቸው 16 የመሠረት ዓምዶች መካከል ያለውን ቁጥር ይይዛል. ለተጨማሪ ልዩነቶች ከዚህ በታች ያሉትን ምሳሌዎች ይመልከቱ።
- <div class = "ረድፍ" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
.row
ካለህ አምድ ውስጥ በመፍጠር ይዘትህን አስገባ።
- <div class = "ረድፍ" >
- <div class = "span12" >
- የአምድ 1 ደረጃ
- <div class = "ረድፍ" >
- <div class = "span6" >
- ደረጃ 2
- </div>
- <div class = "span6" >
- ደረጃ 2
- </div>
- </div>
- </div>
- </div>
በ Bootstrap ውስጥ የተገነቡት ነባሪውን የ940 ፒክስል ፍርግርግ ስርዓት ለማበጀት ጥቂት ተለዋዋጮች ናቸው። ትንሽ በማበጀት የአምዶችን መጠን፣ የውሃ ቦይዎቻቸውን እና የሚኖሩበትን መያዣ መቀየር ይችላሉ።
የፍርግርግ ስርዓቱን ለማሻሻል የሚያስፈልጉት ተለዋዋጮች ሁሉም በ ውስጥ ይኖራሉ variables.less
።
ተለዋዋጭ | ነባሪ እሴት | መግለጫ |
---|---|---|
@gridColumns |
16 | በፍርግርግ ውስጥ ያሉ የአምዶች ብዛት |
@gridColumnWidth |
40 ፒክስል | በፍርግርግ ውስጥ የእያንዳንዱ አምድ ስፋት |
@gridGutterWidth |
20 ፒክስል | በእያንዳንዱ አምድ መካከል ያለው አሉታዊ ቦታ |
@siteWidth |
የተሰላ ድምር የሁሉም ዓምዶች እና ጋዞች | የአምዶችን እና የጋዞችን ብዛት ለመቁጠር እና የድብልቁን ስፋት ለማዘጋጀት አንዳንድ መሰረታዊ ግጥሚያዎችን እንጠቀማለን .fixed-container() . |
ፍርግርግ ማስተካከል ማለት ሶስቱን @grid-*
ተለዋዋጮች መለወጥ እና ያነሱ ፋይሎችን እንደገና ማሰባሰብ ማለት ነው.
ቡትስትራፕ እስከ 24 አምዶች ያለው የፍርግርግ ስርዓት ለማስተናገድ የታጠቁ ይመጣል። ነባሪው 16 ብቻ ነው። የእርስዎ ፍርግርግ ተለዋዋጮች ወደ ባለ 24-አምድ ፍርግርግ ብጁ እንዴት እንደሚመስሉ እነሆ።
- @gridColumns : 24 ;
- @gridColumnWidth : 20 ፒክስል ;
- @gridGutterWidth : 20 ፒክስል ;
አንዴ እንደገና ከተጠናቀረ፣ እርስዎ ይዋቀራሉ!
በነጠላ የቀረበ ለማንኛውም ድረ-ገጽ ወይም ገጽ ነባሪው እና ቀላል ባለ 940 ፒክስል ስፋት <div.container>
።
- <ሰውነት>
- <div class = "መያዣ" >
- ...
- </div>
- </ body>
አማራጭ፣ ተለዋዋጭ የፈሳሽ ገጽ መዋቅር ከሚኒ- እና ከፍተኛ-ስፋት እና በግራ-እጅ የጎን አሞሌ። ለመተግበሪያዎች እና ሰነዶች ምርጥ።
- <ሰውነት>
- <div class = "container-fluid" >
- <div class = "የጎን አሞሌ" >
- ...
- </div>
- <div class = "ይዘት" >
- ...
- </div>
- </div>
- </ body>
የእርስዎን ድረ-ገጾች ለማዋቀር መደበኛ የፊደል አጻጻፍ ተዋረድ።
አጠቃላይ የፊደል አጻጻፍ ፍርግርግ በእኛ ተለዋዋጮች ውስጥ በሁለት ትናንሽ ተለዋዋጮች ላይ የተመሰረተ ነው.የሌለው ፋይል: @basefont
እና @baseline
. የመጀመሪያው በጠቅላላው ጥቅም ላይ የዋለው የመሠረት ቅርጸ-ቁምፊ መጠን ሲሆን ሁለተኛው ደግሞ የመሠረት መስመር ቁመት ነው.
የኛን አይነት እና ሌሎችንም ህዳጎችን፣ ንጣፍን እና የመስመር ከፍታዎችን ለመፍጠር እነዚያን ተለዋዋጮች እና አንዳንድ ሂሳብን እንጠቀማለን።
ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። 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. ኢንቲጀር ፖሱዌሬ ኤራት ኤ አንቴ ቬኔናቲስ ዳፒቡስ ፖሱሬ ቬሊት አሊኬት።
ዶክተር ጁሊየስ ሂበርት
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. ኢንቲጀር ፖሱዌሬ ኤራት ኤ አንቴ ቬኔናቲስ ዳፒቡስ ፖሱሬ ቬሊት አሊኬት። </p>
- <ትንሽ> ዶክተር ጁሊየስ ሂበርት </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
ኮድዎን በሁለት ቀላል መለያዎች በቅጡ ያሽጉ። በጃቫስክሪፕት በኩል ለበለጠ አስደናቂነት የጉግልን ኮድ ቆንጆ ቤተ-መጽሐፍት ያስገቡ እና ተዘጋጅተዋል።
ኮድ፣ ብሎኮች ወይም ቅንጣቢ መስመር ውስጥ፣ በትክክለኛው መለያ በመጠቅለል ብቻ በቅጡ ሊታዩ ይችላሉ። በርካታ መስመሮችን ለሚሸፍኑ የኮድ ብሎኮች ኤለመንቱን ይጠቀሙ <pre>
። ለውስጠ-መስመር ኮድ፣ <code>
ኤለመንት ይጠቀሙ።
ንጥረ ነገር | ውጤት |
---|---|
<code> |
እንደዚህ ባለው የጽሑፍ መስመር ውስጥ፣ የታሸገው ኮድዎ ይህን <html> አካል ይመስላል። |
<pre> |
<div> <h1>ርዕስ </h1> እዚህ የሆነ ነገር...</p> </div> ማስታወሻ |
<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
የአምድ መጠኖችን ያካክላሉ።
የሚዲያ ፍርግርግ ለመጠቀም ቀላል እና ይልቁንም በምልክት ማድረጊያ በኩል ቀላል ናቸው። የእነሱ ልኬቶች በተካተቱት ምስሎች መጠን ላይ ብቻ የተመሰረቱ ናቸው.
- <ul class = "ሚዲያ-ግሪድ" >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
ጠረጴዛዎች በጣም ጥሩ ናቸው - ለብዙ ነገሮች. ምርጥ ሠንጠረዦች ግን ጠቃሚ፣ ሊሰፋ የሚችል እና ሊነበብ የሚችል (በኮድ ደረጃ) ትንሽ የማርክ ፍቅር ያስፈልጋቸዋል። ለማገዝ ጥቂት ምክሮች እዚህ አሉ።
ሁልጊዜ የአምድዎን ራስጌዎች <thead>
እንደዚህ ባለ ተዋረድ ያዙሩት <thead>
> <tr>
> <th>
።
ከአምድ ራስጌዎች ጋር በሚመሳሰል መልኩ፣ ሁሉም የሰንጠረዥዎ አካል ይዘት <tbody>
በእርስዎ ተዋረድ <tbody>
> <tr>
> እንዲሆን መጠቅለል አለበት <td>
።
ሁሉም ሠንጠረዦች ተነባቢነትን ለማረጋገጥ እና መዋቅርን ለመጠበቅ በአስፈላጊ ድንበሮች ብቻ በራስ-ሰር ይዘጋጃሉ። ተጨማሪ ክፍሎችን ወይም ባህሪያትን ማከል አያስፈልግም.
# | የመጀመሪያ ስም | ያባት ስም | ቋንቋ |
---|---|---|---|
1 | አንዳንድ | አንድ | እንግሊዝኛ |
2 | ጆ | ስድስት እሽግ | እንግሊዝኛ |
3 | ስቱ | ጥርስ | ኮድ |
- <ጠረጴዛ>
- ...
- </ ሠንጠረዥ>
በጠባብ ቦታዎች ላይ ተጨማሪ መረጃ ለሚፈልጉ ጠረጴዛዎች፣ ንጣፉን በግማሽ የሚቆርጠውን የታመቀ ጣዕም ይጠቀሙ። ልክ እንደ ነባሪ የጠረጴዛ ቅጦች ከድንበሮች እና የዜብራ-ጭረቶች ጋር በማጣመር ጥቅም ላይ ሊውል ይችላል.
# | የመጀመሪያ ስም | ያባት ስም | ቋንቋ |
---|---|---|---|
1 | አንዳንድ | አንድ | እንግሊዝኛ |
2 | ጆ | ስድስት እሽግ | እንግሊዝኛ |
3 | ስቱ | ጥርስ | ኮድ |
ማዕዘኖቻቸውን በማጠጋጋት እና በሁሉም ጎኖች ላይ ድንበሮችን በመጨመር ጠረጴዛዎችዎን ትንሽ ቆንጆ እንዲመስሉ ያድርጉ።
# | የመጀመሪያ ስም | ያባት ስም | ቋንቋ |
---|---|---|---|
1 | አንዳንድ | አንድ | እንግሊዝኛ |
2 | ጆ | ስድስት እሽግ | እንግሊዝኛ |
3 | ስቱ | ጥርስ | ኮድ |
- <table class = "bordered-table" >
- ...
- </ ሠንጠረዥ>
የዜብራ-ዝርፊያን በመጨመር በጠረጴዛዎችዎ ትንሽ ቆንጆ ይሁኑ - .zebra-striped
ክፍሉን ብቻ ይጨምሩ።
# | የመጀመሪያ ስም | ያባት ስም | ቋንቋ |
---|---|---|---|
1 | አንዳንድ | አንድ | እንግሊዝኛ |
2 | ጆ | ስድስት እሽግ | እንግሊዝኛ |
3 | ስቱ | ጥርስ | ኮድ |
ስፓን 4 አምዶች | |||
ስፓን 2 አምዶች | ስፓን 2 አምዶች |
ማሳሰቢያ፡- የዜብራ-ስሪፕንግ ተራማጅ ማሻሻያ ነው እንደ IE8 እና ከዚያ በታች ላሉት አሮጌ አሳሾች አይገኝም።
- <table class = "የሜዳ አህያ የተሰነጠቀ" >
- ...
- </ ሠንጠረዥ>
ያለፈውን ምሳሌ ወስደን፣ የመደርደር ተግባርን በ jQuery እና በ Tablesorter ፕለጊን በማቅረብ የጠረጴዛዎቻችንን ጥቅም እናሻሽላለን። አደራደሩን ለመቀየር የማንኛውንም ዓምድ ራስጌ ጠቅ ያድርጉ።
# | የመጀመሪያ ስም | ያባት ስም | ቋንቋ |
---|---|---|---|
2 | ጆ | ስድስት እሽግ | እንግሊዝኛ |
3 | ስቱ | ጥርስ | ኮድ |
1 | ያንተ | አንድ | እንግሊዝኛ |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <ስክሪፕት >
- $ ( ተግባር () {
- $ ( "ሰንጠረዥ # ዓይነት ሰንጠረዥ ምሳሌ" )። tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "የሜዳ አህያ የተሰነጠቀ" >
- ...
- </ ሠንጠረዥ>
ሁሉም ቅጾች ሊነበብ እና ሊሰፋ በሚችል መልኩ ለማቅረብ ነባሪ ቅጦች ተሰጥቷቸዋል. ቅጦች ለጽሑፍ ግብዓቶች፣ ዝርዝሮች፣ የጽሑፍ ቦታዎች፣ የሬዲዮ አዝራሮች እና አመልካች ሳጥኖች እና አዝራሮች ተሰጥተዋል።
ወደ ቅጽዎ HTML ያክሉ .form-stacked
እና ከግራቸው ይልቅ በእነሱ መስክ ላይ መለያዎች ይኖሩዎታል። ቅጾችዎ አጭር ከሆኑ ወይም ለከባድ ቅጾች ሁለት አምዶች ግብዓቶች ካሉዎት ይህ በጣም ጥሩ ይሰራል።
ወደ ምልክት ማድረጊያዎ ጥቂት ክፍሎችን በማከል ማንኛውንም ቅጽ input
፣ select
ወይም ስፋት ያብጁ።textarea
ከv1.3.0 ጀምሮ፣ ለቅጽ አካላት በፍርግርግ ላይ የተመሰረቱ የመጠን ክፍሎችን ጨምረናል። እባኮትን እነዚህን አሁን ባሉት .mini
፣ .small
ወዘተ ክፍሎች ይጠቀሙ።
እንደ አውራጃ ፣ አዝራሮች ለድርጊቶች ጥቅም ላይ ይውላሉ ፣ ግንኙነቶቹ ለእቃዎች ጥቅም ላይ ይውላሉ። ለምሳሌ "አውርድ" አዝራር ሊሆን ይችላል እና "የቅርብ ጊዜ እንቅስቃሴ" አገናኝ ሊሆን ይችላል.
ሁሉም አዝራሮች በነባሪነት ወደ ቀላል ግራጫ ቅጥ፣ ግን በርካታ ተግባራዊ ክፍሎች ለተለያዩ የቀለም ቅጦች ሊተገበሩ ይችላሉ። እነዚህ ክፍሎች ሰማያዊ .primary
ክፍል፣ ቀላል-ሰማያዊ .info
ክፍል፣ አረንጓዴ .success
ክፍል እና ቀይ .danger
ክፍል ያካትታሉ።
የአዝራር ቅጦች በተተገበረው በማንኛውም ነገር ላይ .btn
ሊተገበሩ ይችላሉ. <a>
በተለምዶ እነዚህን በ , <button>
, እና <input>
ክፍሎች ላይ ብቻ መተግበር ይፈልጋሉ . እንዴት እንደሚመስል እነሆ፡-
ትልልቅ ወይም ትንሽ አዝራሮች ይፈልጋሉ? ይኑርዎት!
በአንድ ወይም በሌላ ምክንያት በመተግበሪያው ንቁ ላልሆኑ ወይም ላልተሰናከሉ አዝራሮች የአካል ጉዳተኛ ሁኔታን ይጠቀሙ። ያ .disabled
ለአገናኞች እና :disabled
ለክፍለ <button>
ነገሮች ነው።
.alert-message
የአንድን ድርጊት ውድቀት፣ አለመሳካት ወይም ስኬት ለማጉላት ባለአንድ መስመር መልዕክቶች። በተለይ ለቅጾች ጠቃሚ ነው.
- <div class = "የማስጠንቀቂያ-መልእክት ማስጠንቀቂያ" >
- <a class = "ዝጋ" href = "#" > × </a>
- <p><strong> ቅዱስ guacamole! </strong> እራስህን ፈትሽ፣ በጣም ጥሩ አይደለህም። </p>
- </div>
.alert-message.block-message
ትንሽ ማብራሪያ ለሚፈልጉ መልዕክቶች የአንቀጽ ዘይቤ ማንቂያዎች አሉን። እነዚህ ረዣዥም የስህተት መልዕክቶችን ለማፍሰስ፣ በመጠባበቅ ላይ ያለ እርምጃ ለተጠቃሚው ለማስጠንቀቅ ወይም በገጹ ላይ የበለጠ ትኩረት ለመስጠት መረጃን ለማቅረብ ፍጹም ናቸው።
- <div class = "የማስጠንቀቂያ-መልእክት የማገድ-መልእክት ማስጠንቀቂያ" >
- <a class = "ዝጋ" href = "#" > × </a>
- <p><strong> ቅዱስ guacamole! ይህ ማስጠንቀቂያ ነው! </strong> እራስህን ፈትሽ፣ በጣም ጥሩ አይደለህም። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። Praesent commodo cursus magna, vel selerisque nisl consectetur እና. </p>
- <div class = "ማንቂያ-ድርጊት" >
- <a class = "btn small" href = "#" > ይህን እርምጃ ውሰድ </a> <a class = "btn small" href = "#" > ወይም ይህን አድርግ </a>
- </div>
- </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-buttons.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 ውስጥ በጃቫስክሪፕት በአሳሽዎ ውስጥ መክተቻን ሙሉ በሙሉ ለመጠቀም ይህንን አማራጭ ይጠቀሙ።
- <link rel = "stylesheet/less" href = " less/bootstrap.less" media = "ሁሉም" />
- <script src = "js/less-1.1.3.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 ;
- // ቤዝላይን ፍርግርግ
- @bashent : 13 ፒክስል ;
- @መሰረታዊ : 18 ፒክስል ;
/* ... */
ያነሰ ደግሞ ከሲኤስኤስ መደበኛ አገባብ በተጨማሪ ሌላ የአስተያየት ዘይቤ ያቀርባል ።
- // ይህ አስተያየት ነው።
- /* ይህ ደግሞ አስተያየት ነው */
ሚክስክስ በመሠረቱ ለሲኤስኤስ የሚያጠቃልለው ወይም ከፊል ነው፣ ይህም የኮድ ብሎክን ወደ አንድ እንዲያጣምሩ ያስችልዎታል። እንደ ሻጭ ቅድመ-ቅጥያ ባህሪያት box-shadow
፣ የአሳሽ ቅልመት፣ የቅርጸ-ቁምፊ ቁልል እና ሌሎችም ምርጥ ናቸው። ከታች ከ Bootstrap ጋር የተካተቱ ድብልቅዎች ናሙና ነው.
- #ፊደል {
- . አጭር እጅ ( @ክብደት : መደበኛ , @መጠን : 14 ፒክስል , @ lineHeight : 20 ፒክስል ) {
- ቅርጸ-ቁምፊ - መጠን : @ መጠን ;
- ቅርጸ-ቁምፊ - ክብደት : @weight ;
- መስመር - ቁመት : @lineHeight ;
- }
- . ሳንስ - ሰሪፍ ( @ ክብደት : መደበኛ , @ መጠን : 14 ፒክስል , @ lineHeight : 20 ፒክስል ) {
- ቅርጸ-ቁምፊ - ቤተሰብ : "Helvetica Neue" , Helvetica , Arial , ሳንስ - ሰሪፍ ;
- ቅርጸ-ቁምፊ - መጠን : @ መጠን ;
- ቅርጸ-ቁምፊ - ክብደት : @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
- ዳራ - ምስል : መስመራዊ - ግራዲየንት ( @startColor , @endColor ); // ደረጃው
- }
- ...
- }
ከታች እንዳለው ተለዋዋጭ እና ኃይለኛ ድብልቆችን ለማፍለቅ አሪፍ ይሁኑ እና አንዳንድ የሂሳብ ስራዎችን ይስሩ።
- // ግርዶሽ
- @gridColumns : 16 ;
- @gridColumn ስፋት : 40 ፒክስል ;
- @gridGutterWidth : 20 ፒክስል ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // አንዳንድ አምዶችን ያድርጉ
- . አምዶች ( @columnSpan : 1 ) {
- ስፋት : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
በ /lib/ ውስጥ ያሉ ፋይሎችን ካሻሻሉ በኋላ .less
የቡትስትራፕ-*.*.*.css እና bootstrap-*.*.*.min.css ፋይሎችን እንደገና ማሰባሰብ ያስፈልግዎታል. ለ GitHub የመሳብ ጥያቄ እያስገባህ ከሆነ ሁል ጊዜ እንደገና ማጠናቀር አለብህ።
ዘዴ | እርምጃዎች |
---|---|
መስቀለኛ መንገድ ከ makefile ጋር | የሚከተለውን ትዕዛዝ በማሄድ አነስተኛውን የትዕዛዝ መስመር ማቀናበሪያ በ npm ይጫኑ፡- $ npm ጫን lessc አንዴ ከተጫነ በተጨማሪም ጠባቂ ከተጫነ በቡትስትራፕ ሊብ ውስጥ ፋይልን ባርትዑ ቁጥር ቡትስትራፕ |
ጃቫስክሪፕት | የቅርብ ጊዜዎቹን Less.js ያውርዱ እና ወደ እሱ የሚወስደውን መንገድ (እና Bootstrap) በ ውስጥ ያካትቱ
ያነሱ ፋይሎችን እንደገና ለመሰብሰብ፣ በቀላሉ ያስቀምጡ እና ገጽዎን እንደገና ይጫኑ። Less.js ያጠናቅራቸዋል እና በአካባቢው ማከማቻ ውስጥ ያስቀምጣቸዋል። |
የትእዛዝ መስመር | ያነሰ የትእዛዝ መስመር መሳሪያ ከተጫነ በቀላሉ የሚከተለውን ትዕዛዝ ያሂዱ፡- $ lessc ./lib/bootstrap.less > bootstrap.css
|
ያነሰ የማክ መተግበሪያ | መደበኛ ያልሆነው የማክ መተግበሪያ .ያነሱ ፋይሎች ማውጫዎችን ይመለከታቸዋል እና ኮዱን ወደ አካባቢያዊ ፋይሎች ያጠናቅራል ከእያንዳንዱ የታየ . አልባ ፋይል በኋላ። ከፈለጉ በመተግበሪያው ውስጥ ምርጫዎችን በራስ-ሰር ለመቀነስ እና የተጠናቀሩ ፋይሎች በየትኛው ማውጫ ውስጥ እንደሚገኙ መቀያየር ይችላሉ። |