አሰሳን፣ ማንቂያዎችን፣ ፖፖቨርን እና ሌሎችንም ለማቅረብ በደርዘን የሚቆጠሩ እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ክፍሎች በ Bootstrap ውስጥ ተገንብተዋል።
እጅግ በጣም ቀላል እና በትንሹ የቅጥ የተሰራ ገፅ በRdio አነሳሽነት፣ ለመተግበሪያዎች እና ለፍለጋ ውጤቶች ምርጥ። ትልቁ ብሎክ ለማለፍ ከባድ ነው፣ በቀላሉ ሊሰፋ የሚችል እና ትልቅ ጠቅታ ቦታዎችን ያቀርባል።
ማገናኛዎች ሊበጁ የሚችሉ እና ከትክክለኛው ክፍል ጋር በበርካታ ሁኔታዎች ውስጥ ይሰራሉ. .disabled
ላልተጫኑ አገናኞች እና .active
ለአሁኑ ገጽ።
የገጽ አገናኞችን አሰላለፍ ለመቀየር ከሁለቱ አማራጭ ክፍሎች አንዱን ያክሉ .pagination-centered
፡ እና .pagination-right
.
በ a <div>
ውስጥ ተጠቅልሎ፣ ፔጅኔሽን ሀ ብቻ ነው <ul>
።
- <div class = "pagination" >
- <ul>
- <li><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 = "#" > ቀጣይ </a></li>
- </ul>
- </div>
የፔጀር አካል ቀላል የገጽታ ማስፈጸሚያዎች ከብርሃን ምልክት ማድረጊያ እና ከቀላል ቅጦች ጋር የአገናኞች ስብስብ ነው። እንደ ብሎጎች ወይም መጽሔቶች ላሉ ቀላል ጣቢያዎች በጣም ጥሩ ነው።
በነባሪ, ፔጀር አገናኞችን ያገናኛል.
- <ul class = "ፔጀር" >
- <li>
- <a href = "#" > ያለፈው </a>
- </li>
- <li>
- <a href = "#" > ቀጣይ </a>
- </li>
- </ul>
መለያዎች | ምልክት ማድረጊያ |
---|---|
ነባሪ | <span class="label">Default</span> |
አዲስ | <span class="label label-success">New</span> |
ማስጠንቀቂያ | <span class="label label-warning">Warning</span> |
አስፈላጊ | <span class="label label-important">Important</span> |
መረጃ | <span class="label label-info">Info</span> |
ከትንሽ ተጨማሪ ምልክት ማድረጊያ፣ እንደ አርእስት፣ አንቀጾች ወይም አዝራሮች ያሉ ማንኛውንም አይነት HTML ይዘት ወደ ድንክዬዎች ማከል ይቻላል።
ጥፍር አከሎች (ከዚህ .media-grid
በፊት እስከ v1.4 ድረስ) ለፎቶዎች ወይም ቪዲዮዎች ፍርግርግ፣ የምስል ፍለጋ ውጤቶች፣ የችርቻሮ ምርቶች፣ ፖርትፎሊዮዎች እና ሌሎችም ምርጥ ናቸው። አገናኞች ወይም የማይንቀሳቀስ ይዘት ሊሆኑ ይችላሉ።
ድንክዬ ምልክት ማድረጊያ ቀላል ነው - ul
ከማንኛውም li
ንጥረ ነገሮች ብዛት የሚፈለገው ብቻ ነው። እንዲሁም ይዘትዎን ለመጠቅለል ትንሽ ተጨማሪ ምልክት ያለው ማንኛውንም አይነት ይዘት እንዲኖር የሚያስችል እጅግ በጣም ተለዋዋጭ ነው።
በመጨረሻም፣ ጥፍር አከሎች ክፍል ያሉትን የፍርግርግ ስርዓት ክፍሎችን ይጠቀማል—እንደ .span2
ወይም .span3
— የጥፍር አክል ልኬቶችን ለመቆጣጠር።
ቀደም ሲል እንደተገለፀው ለትንንሽ ምስሎች አስፈላጊው ምልክት ቀላል እና ቀጥተኛ ነው። ለተገናኙ ምስሎች ነባሪውን ማዋቀር እዚህ አለ ፡-
- <ul class = "ድንክዬዎች" >
- <li class = "span3" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
በጥፍር አከሎች ውስጥ ላለ ብጁ የኤችቲኤምኤል ይዘት፣ ምልክቱ በትንሹ ይቀየራል። የማገድ ደረጃ ይዘትን በማንኛውም ቦታ ለመፍቀድ፣ በሚከተለው መልኩ <a>
እንቀይራለን <div>
፡-
- <ul class = "ድንክዬዎች" >
- <li class = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> ድንክዬ መለያ </h5>
- <p> ድንክዬ መግለጫ ጽሑፍ እዚሁ... </p>
- </div>
- </li>
- ...
- </ul>
በ Bootstrap 2፣ የመሠረት ክፍሉን ቀለል አድርገነዋል .alert
፡ በምትኩ .alert-message
። እንዲሁም የሚፈለገውን ዝቅተኛ ምልክት <p>
ቀንሰናል - በነባሪነት አያስፈልግም ፣ ውጫዊው ብቻ <div>
።
ያነሰ ኮድ ላለው የበለጠ ዘላቂ አካል፣ የብሎክ ማንቂያዎችን፣ ከተጨማሪ መጠቅለያ ጋር የሚመጡ መልዕክቶችን እና ብዙ ጽሁፍን የሚለይበትን ገጽታ አስወግደናል። ክፍሉም ወደ ተቀይሯል .alert-block
.
ቡትስትራፕ የማንቂያ መልዕክቶችን ከሚደግፍ ታላቅ jQuery ፕለጊን ጋር አብሮ ይመጣል፣ ይህም ማሰናበታቸውን ፈጣን እና ቀላል ያደርገዋል።
መልእክትዎን እና የአማራጭ የቅርብ አዶን በዲቪ ውስጥ ከቀላል ክፍል ጋር ይሸፍኑ።
- <div class = "ማስጠንቀቂያ" >
- <a class = "ዝጋ" > × </a>
- <strong> ማስጠንቀቂያ! </strong> እራስህን ፈትሽ፣ በጣም ጥሩ አይደለህም።
- </div>
መደበኛውን የማንቂያ መልእክት በቀላሉ በሁለት አማራጭ ክፍሎች .alert-block
ያራዝሙ፡ ለተጨማሪ ንጣፍ እና የጽሑፍ ቁጥጥሮች እና .alert-heading
ለተዛማጅ ርዕስ።
እራስህን ፈትሽ በጣም ጥሩ አይደለህም። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። Praesent commodo cursus magna, vel selerisque nisl consectetur እና.
- <div class = "የማስጠንቀቂያ ማንቂያ-ብሎክ" >
- <a class = "ዝጋ" > × </a>
- <h4 class = "ማንቂያ-ርዕስ" > ማስጠንቀቂያ! </ h4>
- እራስህን በደንብ ፈትሽ፣ አይደለህም…
- </div>
ነባሪ የሂደት አሞሌ ከአቀባዊ ቅልመት ጋር።
- <div class = "ግስጋሴ" >
- <div class = "ባር"
- style = " ስፋት ፡ 60 %፤ " > </div>
- </div>
የጭረት ውጤት ለመፍጠር ቅልመትን ይጠቀማል።
- <div class = "የሂደት ግስጋሴ-መረጃ
- እድገት-የተራቆተ" >
- <div class = "ባር"
- style = " ስፋት ፡ 20 %፤ " > </div>
- </div>
የጭረት ምሳሌውን ወስዶ ይንቀሳቀሳል።
- <div class = "የሂደት እድገት-አደጋ
- በሂደት ላይ ያለ ንቁ" >
- <div class = "ባር"
- style = " ስፋት ፡ 40 %፤ " > </div>
- </div>
የሂደት አሞሌዎች እንደ አዝራሮች እና ለተመሳሳይ የቅጥ ማንቂያዎች አንዳንድ ተመሳሳይ የክፍል ስሞችን ይጠቀማሉ።
.progress-info
.progress-success
.progress-danger
በአማራጭ፣ የLESS ፋይሎችን ማበጀት እና የእራስዎን ቀለሞች እና መጠኖች ማሽከርከር ይችላሉ።
የሂደት አሞሌዎች የCSS3 ሽግግሮችን ይጠቀማሉ፣ ስለዚህ በተለዋዋጭነት ስፋቱን በጃቫስክሪፕት ካስተካከሉ፣ ያለችግር መጠኑን ይቀየራል።
.active
ክፍሉን ከተጠቀሙ ፣ .progress-striped
የሂደት አሞሌዎችዎ ከግራ ወደ ቀኝ ያሉትን ጅራቶች ያነባሉ።
የሂደት አሞሌዎች ሁሉንም ውጤቶቻቸውን ለማሳካት CSS3 ቅልመትን፣ ሽግግሮችን እና እነማዎችን ይጠቀማሉ። እነዚህ ባህሪያት በIE7-8 ወይም በቀድሞ የፋየርፎክስ ስሪቶች ውስጥ አይደገፉም።
ኦፔራ በዚህ ጊዜ እነማዎችን አይደግፍም።
ጉድጓዱን የማስገባት ውጤት ለመስጠት በአንድ ንጥረ ነገር ላይ እንደ ቀላል ተጽእኖ ይጠቀሙ።
- <div class = "ደህና" >
- ...
- </div>