አውርድ

ቡትስትራፕ (በአሁኑ ጊዜ v3.4.1) በፍጥነት ለመጀመር ጥቂት ቀላል መንገዶች አሏቸው፣ እያንዳንዳቸው ወደ ሌላ የክህሎት ደረጃ እና የአጠቃቀም ጉዳይ ይማርካሉ። ለፍላጎቶችዎ የሚስማማውን ለማየት ያንብቡ።

ቡት ማሰሪያ

የተቀናበረ እና የተቀነሰ CSS፣ JavaScript እና ቅርጸ-ቁምፊዎች። ምንም ሰነዶች ወይም የመጀመሪያ ምንጭ ፋይሎች አልተካተቱም።

Bootstrapን ያውርዱ

ምንጭ ኮድ

ምንጭ ያነሰ፣ጃቫስክሪፕት እና የቅርጸ-ቁምፊ ፋይሎች ከሰነዶቻችን ጋር። ያነሰ አጠናቃሪ እና አንዳንድ ማዋቀር ያስፈልገዋል ።

ምንጭ አውርድ

ሳስ

በባቡር ፣ ኮምፓስ፣ ወይም Sass-ብቻ ፕሮጀክቶች ውስጥ በቀላሉ ለመካተት ከLess ወደ Sass ተልኳል ።

Sass አውርድ

jsDelivr

jsDelivr ላይ ያሉ ሰዎች ለ Bootstrap's CSS እና JavaScript የCDN ድጋፍን በአክብሮት ይሰጣሉ። እነዚህን jsDelivr ማገናኛዎች ብቻ ይጠቀሙ።

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

በ Bower ጫን

ቦወርን በመጠቀም Bootstrap's Less፣ CSS፣ JavaScript እና fonts መጫን እና ማስተዳደር ትችላለህ ፡-

bower install bootstrap

በ npm ጫን

እንዲሁም npm ን በመጠቀም Bootstrapን መጫን ይችላሉ :

npm install bootstrap@3

require('bootstrap')ሁሉንም የ Bootstrap jQuery ፕለጊኖች በ jQuery ነገር ላይ ይጫናል። ሞጁሉ bootstrapራሱ ምንም ነገር ወደ ውጭ አይልክም. /js/*.jsበጥቅሉ ከፍተኛ-ደረጃ ማውጫ ስር ያሉትን ፋይሎች በመጫን የ Bootstrap's jQuery pluginsን እራስዎ መጫን ይችላሉ ።

Bootstrap's package.jsonበሚከተሉት ቁልፎች ስር አንዳንድ ተጨማሪ ሜታዳታ ይዟል

  • less- ወደ Bootstrap ዋና ትንሽ ምንጭ ፋይል መንገድ
  • style- ወደ Bootstrap ያልተቀነሰ CSS የሚወስደው መንገድ ነባሪ ቅንብሮችን በመጠቀም ቀድሞ የተጠናቀረ (ምንም ማበጀት የለም)

በአቀናባሪ ጫን

አቀናባሪን በመጠቀም Bootstrap 's Less፣ CSS፣ JavaScript እና fonts መጫን እና ማስተዳደር ይችላሉ ፡-

composer require twbs/bootstrap

ለትንሽ/Sass ራስ-ቅጥያ ያስፈልጋል

የ CSS አቅራቢ ቅድመ ቅጥያዎችን ለመቋቋም ቡትስትራፕ አውቶፕረፊክስን ይጠቀማል ። Bootstrapን ከ Less/Sass ምንጭ እየሰበሰቡ ከሆነ እና የእኛን Gruntfile ካልተጠቀሙ፣ ራስዎ ቅድመ ቅጥያ በራስዎ የግንባታ ሂደት ውስጥ ማዋሃድ ያስፈልግዎታል። ቀድሞ የተጠናቀረ ቡትስትራፕ እየተጠቀሙ ከሆነ ወይም የእኛን Gruntfile እየተጠቀሙ ከሆነ፣ በዚህ መጨነቅ አያስፈልገዎትም ምክንያቱም Autoprefixer አስቀድሞ በእኛ Gruntfile ውስጥ ተካቷል።

ምን ይካተታል።

ቡትስትራፕ በሁለት ቅጾች ሊወርድ የሚችል ሲሆን በውስጡም የሚከተሉትን ማውጫዎች እና ፋይሎች ያገኛሉ።

jQuery ያስፈልጋል

እባክዎን ያስተውሉ ሁሉም የጃቫ ስክሪፕት ፕለጊኖች jQuery እንዲካተት በጀማሪ አብነት ላይ እንደሚታየው ። የትኞቹ የ jQuery ስሪቶች እንደሚደገፉ ለማየት የእኛን ያማክሩ ።bower.json

ቀድሞ የተጠናቀረ ቡትስትራፕ

አንዴ ከወረዱ በኋላ የተጨመቀውን ፎልደር ዚፕ ይንቀሉት (የተጠናቀረ) የቡትስትራፕን መዋቅር ለማየት። እንደዚህ ያለ ነገር ታያለህ፡-

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

ይህ በጣም መሠረታዊው የBootstrap አይነት ነው፡ በማንኛውም የድር ፕሮጄክት ውስጥ ለፈጣን የመግባት ቀድሞ የተጠናቀሩ ፋይሎች። የተቀናበረ CSS እና JS ( bootstrap.*) እንዲሁም የተጠናቀረ እና የተቀነሰ CSS እና JS ( bootstrap.min.*) እናቀርባለን። የ CSS ምንጭ ካርታዎች ( bootstrap.*.map) ከተወሰኑ አሳሾች ገንቢ መሳሪያዎች ጋር ለመጠቀም ይገኛሉ። የGlyphicons ቅርጸ-ቁምፊዎች ተካትተዋል፣ እንደ አማራጭ የቡትስትራፕ ጭብጥ።

የማስነሻ ምንጭ ኮድ

የ Bootstrap ምንጭ ኮድ ማውረድ ቀድሞ የተጠናቀረ CSS፣ JavaScript እና የቅርጸ-ቁምፊ እሴቶችን ከምንጩ ያነሰ፣ ጃቫ ስክሪፕት እና ሰነዶችን ያካትታል። በተለይም የሚከተሉትን እና ሌሎችንም ያካትታል፡-

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/፣፣ js/እና fonts/የእኛ የCSS፣ JS እና አዶ ቅርጸ-ቁምፊዎች (በቅደም ተከተላቸው) የምንጭ ኮድ ናቸው። ማህደሩ ከላይ dist/ባለው ቀድሞ በተዘጋጀው የማውረድ ክፍል ውስጥ የተዘረዘሩትን ሁሉ ያካትታል። docs/አቃፊው ለሰነዶቻችን የምንጭ ኮድ እና የ examples/Bootstrap አጠቃቀምን ያካትታል። ከዚህ ባሻገር፣ ሌላ ማንኛውም የተካተተ ፋይል ለፓኬጆች፣ የፍቃድ መረጃ እና ልማት ድጋፍ ይሰጣል።

ሲኤስኤስ እና ጃቫስክሪፕት በማሰባሰብ ላይ

Bootstrap ከማዕቀፉ ጋር አብሮ ለመስራት ምቹ ዘዴዎችን በመጠቀም Grunt ን ለግንባታ ስርዓቱ ይጠቀማል። የእኛን ኮድ እንዴት እንደምናጠናቅር፣ ሙከራዎችን እንደምናስኬድ እና ሌሎችንም ነው።

Grunt ን በመጫን ላይ

Gruntን ለመጫን መጀመሪያ node.js (npmን ጨምሮ) አውርደህ መጫን አለብህ ። npm በ node የታሸጉ ሞጁሎችን የሚያመለክት ሲሆን በ node.js በኩል የእድገት ጥገኝነቶችን የሚያስተዳድሩበት መንገድ ነው።

ከዚያ ከትእዛዝ መስመር:
  1. በአለምአቀፍ grunt-cliደረጃ በ npm install -g grunt-cli.
  2. ወደ ስርወ /bootstrap/ማውጫው ይሂዱ እና ከዚያ ያሂዱ npm install። npm package.jsonፋይሉን ይመለከታል እና እዚያ የተዘረዘሩትን አስፈላጊ የአካባቢያዊ ጥገኛዎችን በራስ-ሰር ይጭናል።

ሲጨርሱ ከትዕዛዝ መስመሩ የቀረቡትን የተለያዩ የGrunt ትዕዛዞችን ማስኬድ ይችላሉ።

የGrunt ትዕዛዞች ይገኛሉ

grunt dist(ሲኤስኤስ እና ጃቫስክሪፕት ብቻ ያጠናቅሩ)

/dist/ማውጫውን በተቀናጁ እና በተቀነሱ CSS እና JavaScript ፋይሎች ያድሳል ። እንደ Bootstrap ተጠቃሚ፣ ይህ በመደበኛነት የሚፈልጉት ትዕዛዝ ነው።

grunt watch(ተመልከት)

ያነሱ ምንጭ ፋይሎችን ይመለከታቸዋል እና ለውጥ በሚያስቀምጡበት ጊዜ በራስ-ሰር ወደ ሲኤስኤስ ያዘጋጃቸዋል።

grunt test(ሙከራዎችን አሂድ)

JSHintን ያስኬዳል እና የ QUnit ሙከራዎችን በእውነተኛ አሳሾች ያካሂዳል ለካርማ ምስጋና ይግባው

grunt docs(የሰነዶቹን ንብረቶች ይገንቡ እና ይሞክሩ)

ሰነዶቹን በአገር ውስጥ በሚሰራበት ጊዜ በ CSS፣ JavaScript እና ሌሎች ንብረቶችን ይገነባል እና ይፈትሻል bundle exec jekyll serve

grunt(በፍፁም ሁሉንም ነገር ይገንቡ እና ሙከራዎችን ያሂዱ)

ሲኤስኤስ እና ጃቫስክሪፕትን ያጠናቅራል እና ይቀንሳል፣ የሰነድ ድር ጣቢያውን ይገነባል፣ HTML5 አረጋጋጭን ከሰነዶቹ ጋር ያስኬዳል፣ የማበጀት ንብረቶችን እና ሌሎችንም ያድሳል። ጄኪል ያስፈልገዋል . ቡትስትራፕን ራሱ እየጠለፉ ከሆነ ብቻ አስፈላጊ ነው።

ችግርመፍቻ

ጥገኞችን መጫን ወይም የGrunt ትዕዛዞችን ማስኬድ ላይ ችግሮች ካጋጠሙዎት በመጀመሪያ /node_modules/በ npm የተፈጠረውን ማውጫ ይሰርዙ። ከዚያ እንደገና ያሂዱ npm install

መሰረታዊ አብነት

በዚህ መሰረታዊ የኤችቲኤምኤል አብነት ይጀምሩ ወይም እነዚህን ምሳሌዎች ያሻሽሉ ። የኛን አብነቶች እና ምሳሌዎች ለፍላጎትህ በማስማማት እንደምታስተካክል ተስፋ እናደርጋለን።

በትንሹ ቡትስትራፕ ሰነድ መስራት ለመጀመር ከታች ያለውን ኤችቲኤምኤል ይቅዱ።

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

ምሳሌዎች

ከላይ ባለው መሰረታዊ አብነት ላይ በBootstrap ብዙ አካላት ይገንቡ። ለግል የፕሮጀክትዎ ፍላጎት እንዲስማማ ቡትስትራፕን እንዲያበጁ እና እንዲላመዱ እናበረታታዎታለን።

የ Bootstrap ማከማቻውን በማውረድ ለእያንዳንዱ ምሳሌ የሚሆን የምንጭ ኮድ ያግኙ ። ምሳሌዎች docs/examples/በማውጫው ውስጥ ይገኛሉ.

ማዕቀፉን በመጠቀም

የጀማሪ አብነት ምሳሌ

የጀማሪ አብነት

ከመሠረታዊ ነገሮች በስተቀር ምንም የለም፡- CSS እና JavaScript ከኮንቴይነር ጋር ተሰብስቧል።

የማስነሻ ገጽታ ምሳሌ

የማስነሻ ገጽታ

ለእይታ የተሻሻለ ተሞክሮ የአማራጭ ቡትስትራፕ ገጽታን ይጫኑ።

የበርካታ ፍርግርግ ምሳሌ

ፍርግርግ

በርካታ የፍርግርግ አቀማመጦች ከአራቱ እርከኖች፣ መክተቻ እና ሌሎችም ጋር።

Jumbotron ምሳሌ

Jumbotron

በ jumbotron ዙሪያ በናቭባር እና አንዳንድ መሰረታዊ ፍርግርግ አምዶች ይገንቡ።

ጠባብ ጃምቦሮን ምሳሌ

ጠባብ ጃምቦትሮን

ነባሪውን መያዣ እና ጃምቦትሮን በማጥበብ የበለጠ ብጁ ገጽ ይገንቡ።

Navbars በተግባር ላይ

የናቭባር ምሳሌ

ናቭባር

ናቭባርን ከአንዳንድ ተጨማሪ ይዘቶች ጋር የሚያካትት ልዕለ መሰረታዊ አብነት።

የማይንቀሳቀስ ከፍተኛ navbar ምሳሌ

የማይንቀሳቀስ የላይኛው navbar

እጅግ በጣም መሠረታዊ አብነት ከአንዳንድ ተጨማሪ ይዘቶች ጋር የማይለዋወጥ ከላይ navbar።

የቋሚ navbar ምሳሌ

ቋሚ ናቭባር

ልዕለ መሠረታዊ አብነት ከተወሰነ ተጨማሪ ይዘት ጋር ከቋሚ የላይኛው ናቭባር ጋር።

ብጁ ክፍሎች

ባለ አንድ ገጽ አብነት ምሳሌ

ሽፋን

ቀላል እና የሚያምሩ መነሻ ገጾችን ለመገንባት ባለ አንድ ገጽ አብነት።

የካሮሴል ምሳሌ

ካሩሰል

የ navbar እና carousel ያብጁ፣ ከዚያ አንዳንድ አዳዲስ ክፍሎችን ያክሉ።

የብሎግ አቀማመጥ ምሳሌ

ብሎግ

ቀላል ባለ ሁለት-አምድ ብሎግ አቀማመጥ በብጁ አሰሳ፣ ራስጌ እና ዓይነት።

ዳሽቦርድ ምሳሌ

ዳሽቦርድ

የአስተዳዳሪ ዳሽቦርድ ከቋሚ የጎን አሞሌ እና ናቭባር ጋር መሰረታዊ መዋቅር።

የመግቢያ ገጽ ምሳሌ

የመግቢያ ገጽ

ለቀላል ምልክት ቅፅ ብጁ ቅፅ አቀማመጥ እና ዲዛይን።

የተረጋገጠ የናቪ ምሳሌ

የተረጋገጠ የባህር ኃይል

ከተረጋገጠ አገናኞች ጋር ብጁ navbar ይፍጠሩ። ቀና በል! በጣም ሳፋሪ ተስማሚ አይደለም።

ተለጣፊ የግርጌ ምሳሌ

የሚለጠፍ ግርጌ

ይዘቱ ከእሱ አጭር ሲሆን ከመመልከቻው ስር ግርጌ ያያይዙ።

ተለጣፊ ግርጌ ከናቭባር ምሳሌ ጋር

ተለጣፊ ግርጌ ከ navbar ጋር

ከላይ ካለው ቋሚ ናቭባር ጋር በመመልከቻው የታችኛው ክፍል ላይ ግርጌ ያያይዙ።

ሙከራዎች

ምላሽ የማይሰጥ ምሳሌ

ምላሽ የማይሰጥ ቡትስትራፕ

በእኛ ሰነዶች የ Bootstrap ምላሽን በቀላሉ ያሰናክሉ ።

ከሸራ ውጪ የአሰሳ ምሳሌ

ከሸራ ውጪ

በBootstrap ለመጠቀም የሚቀያየር ከሸራ ውጪ አሰሳ ምናሌ ይገንቡ።

መሳሪያዎች

ቡትሊንት

Bootlint ኦፊሴላዊው የቡትስትራክ ኤችቲኤምኤል ሊንተር መሳሪያ ነው። በድረ-ገጾች ውስጥ Bootstrapን በትክክል በ"ቫኒላ" መንገድ እየተጠቀሙ ያሉ በርካታ የተለመዱ የኤችቲኤምኤል ስህተቶችን በራስ-ሰር ይፈትሻል። የቫኒላ ቡትስትራፕ ክፍሎች/መግብሮች የ DOM ክፍሎቻቸው ከተወሰኑ መዋቅሮች ጋር እንዲጣጣሙ ይፈልጋሉ። ቡትሊንት የBootstrap ክፍሎች ምሳሌዎች በትክክል የተዋቀሩ ኤችቲኤምኤል እንዳላቸው ያረጋግጣል። ከተለመዱት ስህተቶች ውስጥ አንዳቸውም የፕሮጀክትዎን እድገት እንዳያዘገዩ Bootlintን ወደ የእርስዎ Bootstrap የድር ልማት መሣሪያ ሰንሰለት ማከል ያስቡበት።

ማህበረሰብ

በBootstrap እድገት ላይ ወቅታዊ መረጃ ያግኙ እና በእነዚህ አጋዥ ግብዓቶች ማህበረሰቡን ያግኙ።

  • ለኦፊሴላዊው ቡትስትራክ ብሎግ አንብብ እና ተመዝገብ ።
  • irc.freenode.netበአገልጋዩ ውስጥ IRCን በመጠቀም ከBootstrappers ጋር በ ##bootstrap ቻናል ውስጥ ይወያዩ ።
  • Bootstrapን ለመጠቀም እገዛ ለማግኘት መለያውን ተጠቅመው በ StackOverflowtwitter-bootstrap-3 ላይ ይጠይቁ ።
  • ገንቢዎች ለከፍተኛው ግኝት በ npmbootstrap ወይም በተመሳሳዩ የመላኪያ ዘዴዎች በሚሰራጩበት ጊዜ የBootstrapን ተግባር በሚቀይሩ ወይም በሚጨምሩ ጥቅሎች ላይ ያለውን ቁልፍ ቃል መጠቀም አለባቸው ።
  • በ Bootstrap Expo ላይ በBootstrap የሚገነቡ ሰዎችን አነቃቂ ምሳሌዎችን ያግኙ ።

እንዲሁም በትዊተር ላይ @getbootstrapን መከተል ትችላለህ ለአዳዲስ ወሬዎች እና ግሩም የሙዚቃ ቪዲዮዎች።

ምላሽ ሰጪነትን ማሰናከል

Bootstrap ገጾችዎን ለተለያዩ የስክሪን መጠኖች በራስ ሰር ያስተካክላል። ገጽዎ እንደዚህ ምላሽ የማይሰጥ ምሳሌ እንዲሰራ ይህን ባህሪ እንዴት እንደሚያሰናክሉ እነሆ ።

የገጽ ምላሽን ለማሰናከል ደረጃዎች

  1. በሲኤስኤስ ሰነዶች<meta> ውስጥ የተጠቀሰውን የእይታ እይታ ውጣ
  2. widthለእያንዳንዱ የፍርግርግ እርከን በነጠላ ስፋት ይሽሩት .container፣ ለምሳሌ width: 970px !important;ይሄ የሚመጣው ከነባሪው ቡትስትራፕ CSS በኋላ መሆኑን ያረጋግጡ። !importantበሚዲያ መጠይቆች ወይም አንዳንድ መራጭ-ፉ እንደ አማራጭ ማስወገድ ይችላሉ ።
  3. navbars የሚጠቀሙ ከሆነ ሁሉንም የናቭባር መሰባበር እና ማስፋፋት ባህሪን ያስወግዱ።
  4. ለፍርግርግ አቀማመጦች፣ .col-xs-*ክፍሎችን ከመካከለኛ/ትልቅ በተጨማሪ፣ ወይም በምትኩ ይጠቀሙ። አይጨነቁ፣ በጣም ትንሽ የሆነው የመሣሪያ ፍርግርግ ሁሉንም ጥራቶች ይዛመዳል።

አሁንም ለ IE8 Respond.js ያስፈልገዎታል (የእኛ የሚዲያ ጥያቄዎች አሁንም ስላሉ እና ሊስተናገዱ ስለሚገባቸው)። ይህ የቡትስትራፕን "የሞባይል ጣቢያ" ገጽታዎችን ያሰናክላል።

የቡት ስታራፕ አብነት ምላሽ ሰጪነት ተሰናክሏል።

እነዚህን እርምጃዎች በምሳሌ ላይ ተግባራዊ አድርገናል። የተወሰኑ ለውጦች ሲተገበሩ ለማየት የሱን ምንጭ ኮድ ያንብቡ።

ምላሽ የማይሰጥ ምሳሌ ይመልከቱ

ከ v2.x ወደ v3.x በመሰደድ ላይ

ከአሮጌው የBootstrap ስሪት ወደ v3.x ለመዛወር ይፈልጋሉ? የስደት መመሪያችንን ይመልከቱ ።

የአሳሽ እና የመሳሪያ ድጋፍ

ቡትስትራፕ በቅርብ ጊዜ የዴስክቶፕ እና የሞባይል አሳሾች ውስጥ በተሻለ ሁኔታ እንዲሰራ ነው የተሰራው፣ ይህ ማለት የቆዩ አሳሾች በተለየ መልኩ ቅጥ የተሰሩ፣ ሙሉ ለሙሉ የሚሰሩ ቢሆንም የተወሰኑ ክፍሎችን አተረጓጎም ሊያሳዩ ይችላሉ።

የሚደገፉ አሳሾች

በተለይም የቅርብ ጊዜዎቹን የሚከተሉት አሳሾች እና መድረኮች እንደግፋለን ።

በቀጥታም ሆነ በመድረክ የድር እይታ ኤፒአይ የቅርብ ጊዜውን የWebKit፣ Blink ወይም Gecko ስሪት የሚጠቀሙ አማራጭ አሳሾች በግልጽ አይደገፉም። ሆኖም ቡትስትራፕ (በአብዛኛው) በእነዚህ አሳሾች ውስጥም በትክክል ማሳየት እና መስራት አለበት። የበለጠ የተለየ የድጋፍ መረጃ ከዚህ በታች ቀርቧል።

ተንቀሳቃሽ መሳሪያዎች

በአጠቃላይ፣ ቡትስትራፕ የእያንዳንዱን ዋና የመሣሪያ ስርዓት ነባሪ አሳሾች የቅርብ ጊዜ ስሪቶችን ይደግፋል። ፕሮክሲ አሳሾች (እንደ ኦፔራ ሚኒ፣ ኦፔራ ሞባይል ቱርቦ ሁነታ፣ ዩሲ ብሮውዘር ሚኒ፣ Amazon Silk ያሉ) እንደማይደገፉ ልብ ይበሉ።

Chrome ፋየርፎክስ ሳፋሪ
አንድሮይድ የሚደገፍ የሚደገፍ ኤን/ኤ
iOS የሚደገፍ የሚደገፍ የሚደገፍ

የዴስክቶፕ አሳሾች

በተመሳሳይ፣ የአብዛኛው የዴስክቶፕ አሳሾች የቅርብ ጊዜ ስሪቶች ይደገፋሉ።

Chrome ፋየርፎክስ ኢንተርኔት ኤክስፕሎረር ኦፔራ ሳፋሪ
ማክ የሚደገፍ የሚደገፍ ኤን/ኤ የሚደገፍ የሚደገፍ
ዊንዶውስ የሚደገፍ የሚደገፍ የሚደገፍ የሚደገፍ አይደገፍም

በዊንዶውስ ላይ ኢንተርኔት ኤክስፕሎረር 8-11ን እንደግፋለን

ለፋየርፎክስ፣ ከቅርብ ጊዜው መደበኛ የተረጋጋ ልቀት በተጨማሪ፣ የቅርብ ጊዜውን የተራዘመ የድጋፍ ልቀት (ESR) የፋየርፎክስ ስሪትንም እንደግፋለን።

በይፋ ባይሆንም ቡትስትራፕ በChromium እና Chrome ለሊኑክስ፣ ፋየርፎክስ ለሊኑክስ እና ኢንተርኔት ኤክስፕሎረር 7 እንዲሁም ማይክሮሶፍት ኤጅ ላይ በደንብ መመልከት እና ጥሩ ባህሪ ማሳየት አለበት።

ለአንዳንድ የአሳሽ ሳንካዎች ዝርዝር ቡትስትራፕ ሊታገልባቸው የሚገቡ፣ የእኛን ግድግዳ ይመልከቱ የአሳሽ ሳንካዎች

ኢንተርኔት ኤክስፕሎረር 8 እና 9

ኢንተርኔት ኤክስፕሎረር 8 እና 9 እንዲሁ ይደገፋሉ፣ ሆኖም፣ እባክዎን አንዳንድ የ CSS3 ንብረቶች እና HTML5 ክፍሎች በእነዚህ አሳሾች ሙሉ በሙሉ እንደማይደገፉ ይወቁ። በተጨማሪም, Internet Explorer 8 የሚዲያ መጠይቅ ድጋፍን ለማንቃት Respond.js መጠቀምን ይጠይቃል።

ባህሪ ኢንተርኔት ኤክስፕሎረር 8 ኢንተርኔት ኤክስፕሎረር 9
border-radius አይደገፍም የሚደገፍ
box-shadow አይደገፍም የሚደገፍ
transform አይደገፍም የሚደገፍ፣ -msከቅድመ ቅጥያ ጋር
transition አይደገፍም
placeholder አይደገፍም

ስለ CSS3 እና HTML5 ባህሪያት የአሳሽ ድጋፍ ዝርዝሮችን ለማግኘት መጠቀም እችላለሁን... ይጎብኙ ።

ኢንተርኔት ኤክስፕሎረር 8 እና Respond.js

ለኢንተርኔት ኤክስፕሎረር 8 በእድገትዎ እና በምርት አካባቢዎ ውስጥ Respond.jsን ሲጠቀሙ ከሚከተሉት ማስጠንቀቂያዎች ይጠንቀቁ።

Respond.js እና ጎራ ተሻጋሪ CSS

Respond.jsን በሌላ (ንዑስ) ጎራ (ለምሳሌ በሲዲኤን ላይ) በተስተናገደው CSS መጠቀም አንዳንድ ተጨማሪ ማዋቀር ያስፈልገዋል። ለዝርዝሮች Respond.js ሰነዶችን ይመልከቱ።

ምላሽ ይስጡ.js እናfile://

በአሳሽ ደህንነት ደንቦች ምክንያት Respond.js በፕሮቶኮሉ ከሚታዩ ገፆች ጋር አይሰራም file://(እንደ የአካባቢ HTML ፋይል ሲከፈት)። በ IE8 ውስጥ ምላሽ ሰጪ ባህሪያትን ለመሞከር ገጾችዎን በ HTTP(S) ይመልከቱ። ለዝርዝሮች Respond.js ሰነዶችን ይመልከቱ።

ምላሽ ይስጡ.js እና@import

Respond.js በ ከተጠቀሰው CSS ጋር አይሰራም @import። በተለይም አንዳንድ Drupal ውቅሮች እንደሚጠቀሙ ይታወቃል @importለዝርዝሮች Respond.js ሰነዶችን ይመልከቱ።

ኢንተርኔት ኤክስፕሎረር 8 እና የሳጥን መጠን

IE8 ከ ፣፣፣፣ ወይም box-sizing: border-box;ጋር ሲጣመር ሙሉ በሙሉ አይደግፍም ። በዚህ ምክንያት፣ ከ v3.0.1 ጀምሮ፣ በ s. ላይ አንጠቀምም።min-widthmax-widthmin-heightmax-heightmax-width.container

ኢንተርኔት ኤክስፕሎረር 8 እና @font-face

@font-faceIE8 ከ ጋር ሲጣመር አንዳንድ ችግሮች አሉት :before። Bootstrap ያንን ጥምር ከግሊፊኮንስ ጋር ይጠቀማል። አንድ ገጽ ከተሸጎጠ እና ያለ መዳፊቱ በመስኮቱ ላይ ከተጫነ (ማለትም የማደስ አዝራሩን ይምቱ ወይም የሆነ ነገር በiframe ውስጥ ከጫኑ) ከዚያ ገጹ ቅርጸ-ቁምፊው ከመጫኑ በፊት ይገለጻል። በገጹ (አካል) ላይ ማንዣበብ የተወሰኑ አዶዎችን ያሳያል እና በቀሪዎቹ አዶዎች ላይ ማንዣበብ እነዚያንም ያሳያል። ለዝርዝር ቁጥር #13863 ይመልከቱ።

IE የተኳኋኝነት ሁነታዎች

Bootstrap በአሮጌው የኢንተርኔት ኤክስፕሎረር ተኳሃኝነት ሁነታዎች አይደገፍም። ለ IE የቅርብ ጊዜውን የማሳያ ሁነታ እየተጠቀሙ መሆንዎን እርግጠኛ ለመሆን፣ በገጾችዎ ውስጥ ተገቢውን <meta>መለያ ማካተት ያስቡበት

<meta http-equiv="X-UA-Compatible" content="IE=edge">

የማረም መሳሪያዎችን በመክፈት የሰነድ ሁነታን F12ያረጋግጡ: "የሰነድ ሁነታ" ን ተጭነው ያረጋግጡ.

በእያንዳንዱ የሚደገፍ የኢንተርኔት ኤክስፕሎረር ስሪት ውስጥ ምርጡን አተረጓጎም ለማረጋገጥ ይህ መለያ በሁሉም የ Bootstrap ሰነዶች እና ምሳሌዎች ውስጥ ተካትቷል።

ለበለጠ መረጃ ይህንን የStackOverflow ጥያቄ ይመልከቱ።

ኢንተርኔት ኤክስፕሎረር 10 በዊንዶውስ 8 እና በዊንዶውስ ስልክ 8

ኢንተርኔት ኤክስፕሎረር 10 የመሳሪያውን ስፋት ከመመልከቻው ስፋት አይለይም እና ስለዚህ በ Bootstrap's CSS ውስጥ ያሉትን የሚዲያ ጥያቄዎች በትክክል አይተገበርም። ይህንን ለማስተካከል በተለምዶ የ CSS ፈጣን ቅንጣቢ ማከል ብቻ ነው፡-

@-ms-viewport       { width: device-width; }

ነገር ግን ይህ ከዝማኔ 3 (በ GDR3) የቆዩ የዊንዶውስ ፎን 8 ስሪቶችን ለሚያሄዱ መሳሪያዎች አይሰራም ምክንያቱም እንደነዚህ ያሉ መሳሪያዎች ከጠባብ "ስልክ" እይታ ይልቅ በአብዛኛው የዴስክቶፕ እይታ እንዲያሳዩ ያደርጋል. ይህንን ለመቅረፍ፣ በስህተቱ ዙሪያ ለመስራት የሚከተለውን CSS እና JavaScript ማካተት ያስፈልግዎታል ።

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

ለበለጠ መረጃ እና የአጠቃቀም መመሪያዎች፣ Windows Phone 8 እና Device-Width ያንብቡ ።

ለቅድመ ዝግጅት፣ ይህንን በሁሉም የ Bootstrap ሰነዶች እና ምሳሌዎች ውስጥ እንደ ማሳያ እናጨምረዋለን።

ሳፋሪ በመቶ ማጠጋጋት

ከ v7.1 በፊት ያለው የSafari ስሪቶች አተረጓጎም ሞተር እና ሳፋሪ ለ iOS v8.0 በእኛ .col-*-1ፍርግርግ ክፍል ውስጥ ጥቅም ላይ በሚውሉ የአስርዮሽ ቦታዎች ብዛት ላይ ችግር ነበረበት። ስለዚህ 12 ነጠላ የፍርግርግ ዓምዶች ካሉዎት፣ ከሌሎች የአምዶች ረድፎች ጋር ሲነፃፀሩ አጭር መሆናቸውን ያስተውላሉ። ሳፋሪን/አይኦኤስን ከማዘመን በተጨማሪ ለመፍትሄዎች አንዳንድ አማራጮች አሉዎት፡-

  • .pull-rightየጠንካራ-ቀኝ አሰላለፍ ለማግኘት ወደ የመጨረሻው ፍርግርግ አምድዎ ያክሉ
  • ለSafari ትክክለኛውን ዙር ለማግኘት (ከመጀመሪያው አማራጭ የበለጠ ከባድ) ለማግኘት መቶኛዎን በእጅ ያስተካክሉት

ሞዳል፣ ናቭባርስ እና ምናባዊ የቁልፍ ሰሌዳዎች

ከመጠን በላይ መፍሰስ እና ማሸብለል

overflow: hiddenበኤለመንቱ ላይ ያለው ድጋፍ <body>በ iOS እና Android ላይ በጣም የተገደበ ነው። ለዚያም በእነዚያ መሳሪያዎች ማሰሻ ውስጥ የሞዳልን ከላይ ወይም ታች ሲያሸብልሉ <body>ይዘቱ መሸብለል ይጀምራል። የ Chrome ስህተት #175502 (በChrome v40 የተስተካከለ) እና WebKit bug #153852 ይመልከቱ

የ iOS ጽሑፍ መስኮች እና ማሸብለል

<input>ከ iOS 9.3 ጀምሮ፣ ሞዳል ክፍት ሆኖ ሳለ፣ የጥቅልል ምልክት የመጀመሪያ ንክኪ በፅሁፍ ወይም በ ወሰን ውስጥ ከሆነ <textarea><body>በሞዳል ስር ያለው ይዘት በራሱ ሞዳል ፈንታ ይሸበለላል። WebKit ስህተት #153856 ይመልከቱ ።

ምናባዊ የቁልፍ ሰሌዳዎች

እንዲሁም፣ ቋሚ ናቭባርን እየተጠቀሙ ከሆነ ወይም በሞዳል ውስጥ ግብዓቶችን እየተጠቀሙ ከሆነ፣ iOS ቨርቹዋል ኪቦርዱ ሲቀሰቀስ ቋሚ አባሎችን ቦታ የማያሻሽል የምስል ማሳያ ስህተት እንዳለው ልብ ይበሉ። ለዚህ ጥቂት መፍትሔዎች የእርስዎን አካላት ወደ መለወጥ position: absoluteወይም ጊዜ ቆጣሪን በትኩረት ላይ በመጥራት አቀማመጡን በእጅ ለማስተካከል መሞከርን ያካትታሉ። ይህ በBootstrap አይስተናግድም፣ ስለዚህ ለትግበራዎ የትኛው መፍትሄ እንደሚሻል መወሰን የእርስዎ ውሳኔ ነው።

ኤለመንት በ .dropdown-backdropz-indexing ውስብስብነት ምክንያት በባህር ኃይል ውስጥ በ iOS ላይ ጥቅም ላይ አይውልም. ስለዚህ በ navbars ውስጥ ተቆልቋይዎችን ለመዝጋት ተቆልቋይ ኤለመንቱን (ወይም በ iOS ውስጥ የጠቅታ ክስተትን የሚያነሳ ሌላ ማንኛውም አካል) በቀጥታ ጠቅ ማድረግ አለብዎት ።

አሳሽ ማጉላት

የገጽ ማጉላት በአንዳንድ ክፍሎች፣ በBootstrap እና በተቀረው ድር ላይ ያሉ ቅርሶችን መቅረቡ የማይቀር ነው። በጉዳዩ ላይ በመመስረት፣ ልናስተካክለው እንችላለን (መጀመሪያ ይፈልጉ እና አስፈላጊ ከሆነ ችግር ይክፈቱ)። ይሁን እንጂ ብዙውን ጊዜ ከጠለፋ መፍትሔዎች ውጪ ምንም ዓይነት ቀጥተኛ መፍትሔ ስለሌላቸው እነዚህን ችላ ማለት ይቀናናል።

ተለጣፊ :hover/ :focusበሞባይል ላይ

ምንም እንኳን በአብዛኛዎቹ የንክኪ ስክሪኖች ላይ እውነተኛ ማንዣበብ ባይቻልም፣ አብዛኞቹ የሞባይል አሳሾች የማንዣበብ ድጋፍን ይኮርጃሉ እና :hover“ተጣብቅ” ያደርጋሉ። በሌላ አገላለጽ፣ :hoverቅጦች መተግበር የሚጀምሩት ኤለመንቱን መታ ካደረጉ በኋላ ነው እና ተጠቃሚው ሌላ አካል ከነካ በኋላ ብቻ መተግበሩን ያቆማሉ። ይህ የBootstrap :hoverግዛቶች በእንደዚህ አይነት አሳሾች ላይ በማይፈለግ ሁኔታ "እንዲጣበቁ" ሊያደርግ ይችላል። አንዳንድ የሞባይል አሳሾችም :focusበተመሳሳይ መልኩ ተጣብቀው ይሠራሉ። እንደነዚህ ያሉትን ቅጦች ሙሉ በሙሉ ከማስወገድ ውጭ ለእነዚህ ጉዳዮች ምንም ቀላል መፍትሄ በአሁኑ ጊዜ የለም.

ማተም

በአንዳንድ ዘመናዊ አሳሾች ውስጥ እንኳን, ማተም አስቸጋሪ ሊሆን ይችላል.

በተለይም እንደ Chrome v32 እና የኅዳግ ቅንጅቶች ምንም ቢሆኑም፣ Chrome ድረ-ገጽ በሚታተምበት ጊዜ የሚዲያ ጥያቄዎችን በሚፈታበት ጊዜ ከአካላዊ የወረቀት መጠን በእጅጉ ያነሰ የመመልከቻ ስፋትን ይጠቀማል። ይህ የ Bootstrap ተጨማሪ-ትንሽ ፍርግርግ በሚታተምበት ጊዜ ሳይታሰብ እንዲነቃ ሊያደርግ ይችላል። ለተወሰኑ ዝርዝሮች እትም #12078 እና Chrome bug #273306 ይመልከቱ። የተጠቆሙ መፍትሔዎች፡-

  • የትርፍ-ትንሽ ፍርግርግ ይቀበሉ እና ገጽዎ በእሱ ስር ተቀባይነት ያለው መሆኑን ያረጋግጡ።
  • @screen-*የአታሚ ወረቀትዎ ከትርፍ-ትንሽ ይበልጣል ተብሎ እንዲታሰብ የአነስተኛ ተለዋዋጮችን እሴቶች ያብጁ ።
  • ለህትመት ሚዲያ ብቻ የፍርግርግ መጠን መግቻ ነጥቦችን ለመቀየር ብጁ የሚዲያ መጠይቆችን ያክሉ።

እንዲሁም፣ እንደ Safari v8.0፣ ቋሚ ስፋት .containers ሳፋሪ በሚታተምበት ጊዜ ያልተለመደ ትንሽ የቅርጸ-ቁምፊ መጠን እንዲጠቀም ሊያደርገው ይችላል። ለተጨማሪ ዝርዝሮች #14868 እና WebKit bug #138192 ይመልከቱ። ለዚህ አንዱ መፍትሄ የሚከተለውን CSS ማከል ነው።

@media print {
  .container {
    width: auto;
  }
}

አንድሮይድ የአክሲዮን አሳሽ

ከሳጥኑ ውጭ፣ አንድሮይድ 4.1 (እና አንዳንድ አዲስ የተለቀቁም ይመስላል) በአሳሹ መተግበሪያ እንደ ምርጫው ነባሪ የድር አሳሽ (ከChrome በተቃራኒ) ይልካል። እንደ አለመታደል ሆኖ፣ የአሳሹ መተግበሪያ በአጠቃላይ ከCSS ጋር ብዙ ስህተቶች እና አለመጣጣሞች አሉት።

ምናሌዎችን ይምረጡ

በንጥረ <select>ነገሮች ላይ፣ አንድሮይድ ስቶክ አሳሽ ካለ border-radiusእና/ወይም borderከተተገበረ የጎን መቆጣጠሪያዎችን አያሳይም። ( ይህን የStackOverflow ጥያቄ ይመልከቱ ይመልከቱ።) አፀያፊውን ሲኤስኤስ ለማስወገድ እና <select>በአንድሮይድ የአክሲዮን አሳሽ ላይ ቅጥ የሌለው አካል ለማድረግ ከዚህ በታች ያለውን የኮድ ቅንጣቢ ይጠቀሙ። የተጠቃሚ ወኪሉ ማሽተት በChrome፣ Safari እና Mozilla አሳሾች ላይ ጣልቃ መግባትን ያስወግዳል።

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ምሳሌ ማየት ይፈልጋሉ?ይህንን የJS Bin ማሳያ ይመልከቱ።

አረጋጋጮች

ለአሮጌ እና አስቸጋሪ አሳሾች በተቻለ መጠን የተሻለውን ተሞክሮ ለማቅረብ፣ Bootstrap የ CSS አሳሽ ጠለፋዎችን ይጠቀማል በመጠቀም ልዩ CSSን በተወሰኑ የአሳሽ ስሪቶች ላይ ኢላማ በማድረግ በአሳሾቹ ውስጥ ባሉ ስህተቶች ዙሪያ ለመስራት። እነዚህ ጠለፋዎች የCSS አረጋጋጮች ልክ እንዳልሆኑ ቅሬታ እንዲያሰሙ ያደርጋቸዋል። ባልና ሚስት ቦታዎች ላይ፣ ገና ሙሉ ደረጃቸውን ያልጠበቁ የደም መፍሰስ ጫፍ የሲኤስኤስ ባህሪያትን እንጠቀማለን፣ ነገር ግን እነዚህ ለእድገት መሻሻል ብቻ ያገለግላሉ።

እነዚህ የማረጋገጫ ማስጠንቀቂያዎች በተግባር ምንም አይሆኑም ምክንያቱም የኛ ሲ ኤስ ኤስ ጠለፋ ያልሆነው ክፍል ሙሉ በሙሉ ስለሚፀድቅ እና ጠላፊዎቹ ክፍሎቹ ጠላፊ ያልሆነውን ክፍል በአግባቡ ስራ ላይ ጣልቃ ስለማይገቡ እነዚህን ልዩ ማስጠንቀቂያዎች ሆን ብለን ችላ የምንለው።

የእኛ የኤችቲኤምኤል ዶክመንቶች ለተወሰነ የፋየርፎክስ ስህተት መፍትሄ በማካተታችን ምክንያት አንዳንድ ቀላል እና የማይጠቅሙ የኤችቲኤምኤል ማረጋገጫ ማስጠንቀቂያዎች አሏቸው ።

የሶስተኛ ወገን ድጋፍ

ምንም እንኳን የሶስተኛ ወገን ተሰኪዎችን ወይም ተጨማሪዎችን በይፋ ባንደግፍም በፕሮጀክቶችዎ ውስጥ ሊከሰቱ የሚችሉ ችግሮችን ለማስወገድ አንዳንድ ጠቃሚ ምክሮችን እንሰጣለን ።

ሣጥን-መጠን

አንዳንድ የሶስተኛ ወገን ሶፍትዌሮች፣ ጎግል ካርታዎች እና ጉግል ብጁ የፍለጋ ሞተርን ጨምሮ፣ ከ Bootstrap ጋር ይጋጫሉ በ * { box-sizing: border-box; }, ይህን የሚያደርገው ህግ paddingየአንድን ንጥረ ነገር የመጨረሻ ስሌት ስፋት ላይ ተጽዕኖ አያሳድርም። ስለ ሣጥን ሞዴል እና መጠን በ CSS Tricks የበለጠ ይወቁ ።

በዐውደ-ጽሑፉ ላይ በመመስረት፣ እንደ አስፈላጊነቱ መሻር ይችላሉ (አማራጭ 1) ወይም የሳጥን መጠንን ለሁሉም ክልሎች እንደገና ማስጀመር ይችላሉ (አማራጭ 2)።

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

ተደራሽነት

Bootstrap የተለመዱ የድር ደረጃዎችን ይከተላል እና በትንሹ ተጨማሪ ጥረት - AT ለሚጠቀሙ ሰዎች ተደራሽ የሆኑ ጣቢያዎችን ለመፍጠር ጥቅም ላይ ሊውል ይችላል ።

ዳሰሳን ዝለል

አሰሳዎ ብዙ አገናኞችን ከያዘ እና በ DOM ውስጥ ካለው ዋና ይዘት በፊት የሚመጣ ከሆነ ከዳሰሳው Skip to main contentበፊት አገናኝ ያክሉ (ለቀላል ማብራሪያ፣ ይህን የA11Y ፕሮጄክት ስለ መዝለል አሰሳ አገናኞች ይመልከቱ)። ክፍሉን መጠቀም .sr-onlyየመዝለል ማያያዣውን በእይታ ይደብቃል፣ እና .sr-only-focusableክፍሉ አንዴ በትኩረት የሚታይ መሆኑን ያረጋግጣል (ለሚያዩ የቁልፍ ሰሌዳ ተጠቃሚዎች)።

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

የተከማቸ ርእሶች

ርእሶችን ( <h1>- <h6>) በሚያደርጉበት ጊዜ የእርስዎ ዋና ሰነድ ራስጌ መሆን አለበት <h1>። የሚቀጥሉት ርዕሶች አመክንዮአዊ ጥቅም ላይ ሊውሉ ይገባል <h2>- <h6>እንደዚህ ያሉ ማያ ገጽ አንባቢዎች ለገጾችዎ የይዘት ሠንጠረዥ መገንባት ይችላሉ።

በ HTML CodeSniffer እና Penn State's Accessability ላይ የበለጠ ይወቁ ።

የቀለም ንፅፅር

በአሁኑ ጊዜ፣ አንዳንድ ነባሪ የቀለም ቅንጅቶች በ Bootstrap ውስጥ ይገኛሉ (እንደ የተለያዩ የቅጥ የተሰሩ የአዝራር ክፍሎች፣ አንዳንድ የኮድ ማድመቂያ ቀለሞች ለመሠረታዊ ኮድ ብሎኮች.bg-primary የአውድ ዳራ አጋዥ ክፍል እና ነባሪ የአገናኝ ቀለም በነጭ ጀርባ ላይ ጥቅም ላይ ሲውል) ዝቅተኛ ንፅፅር ሬሾ ይኑርዎት ( ከተመከረው 4.5፡1 ጥምርታ በታች )። ይህ ዝቅተኛ የማየት ችሎታ ያላቸው ወይም ቀለም ዓይነ ስውር ለሆኑ ተጠቃሚዎች ችግር ይፈጥራል። እነዚህ ነባሪ ቀለሞች ተቃርኖአቸውን እና ተነባቢነታቸውን ለመጨመር መስተካከል አለባቸው።

ተጨማሪ መገልገያዎች

የፍቃድ ጥያቄዎች

Bootstrap የሚለቀቀው በ MIT ፍቃድ ነው እና የቅጂ መብት 2019 ትዊተር ነው። ወደ ትናንሽ ቁርጥራጮች የተቀቀለ, በሚከተሉት ሁኔታዎች ሊገለጽ ይችላል.

የሚከተሉትን ማድረግ ይጠይቃል።

  • በስራዎ ውስጥ ሲጠቀሙ የፈቃድ እና የቅጂ መብት ማስታወቂያ በ Bootstrap's CSS እና JavaScript ፋይሎች ውስጥ እንዲካተቱ ያድርጉ

የሚከተሉትን ለማድረግ ይፈቅድልዎታል-

  • ለግል፣ ለግል፣ ለኩባንያ ውስጣዊ ወይም ለንግድ ዓላማዎች በሙሉ ወይም በከፊል ቡትስትራፕን በነፃ ያውርዱ እና ይጠቀሙ
  • እርስዎ በሚፈጥሯቸው ጥቅሎች ወይም ስርጭቶች ውስጥ Bootstrapን ይጠቀሙ
  • የምንጭ ኮዱን አስተካክል።
  • Bootstrapን ለማሻሻል እና በፍቃዱ ውስጥ ላልተካተቱ ሶስተኛ ወገኖች ለማሰራጨት ንዑስ ፍቃድ ይስጡ

የሚከተሉትን ማድረግ ይከለክላል፡-

  • Bootstrap ያለ ዋስትና ስለሚሰጥ ደራሲያን እና የፈቃድ ባለቤቶቹን ለጉዳት ተጠያቂ ያድርጉ
  • የ Bootstrap ፈጣሪዎችን ወይም የቅጂ መብት ባለቤቶችን ተጠያቂ ያድርጉ
  • ያለ ተገቢ መለያ ማናቸውንም የBootstrap ቁራጭ እንደገና ያሰራጩ
  • ትዊተር ስርጭትዎን እንደሚደግፍ ሊገልጽ ወይም ሊያመለክት በሚችል በማንኛውም መንገድ በትዊተር የተያዙ ማናቸውንም ምልክቶች ይጠቀሙ
  • በጥያቄ ውስጥ ያለውን የትዊተር ሶፍትዌር እንደፈጠሩ ሊገልጽ ወይም ሊያመለክት በሚችል በማንኛውም መንገድ በትዊተር ባለቤትነት የተያዙ ማናቸውንም ምልክቶች ይጠቀሙ

የሚከተሉትን ማድረግ አይፈልግም

  • የBootstrap ራሱ ምንጭ፣ ወይም በእሱ ላይ ያደረጓቸው ማሻሻያዎችን ያካትቱ፣ በማናቸውም ድጋሚ ስርጭት ውስጥ እሱን ጨምሮ መሰብሰብ ይችላሉ።
  • ለBootstrap ያደረጓቸውን ለውጦች ወደ Bootstrap ፕሮጀክት ይመልሱ (ምንም እንኳን እንደዚህ አይነት ግብረመልስ የሚበረታታ ቢሆንም)

ሙሉው የ Bootstrap ፍቃድ በፕሮጀክት ማከማቻ ማከማቻ ውስጥ ለበለጠ መረጃ ይገኛል።

ትርጉሞች

የማህበረሰብ አባላት የBootstrapን ሰነዶች ወደ ተለያዩ ቋንቋዎች ተርጉመዋል። አንዳቸውም በይፋ አይደገፉም እና ሁልጊዜ ወቅታዊ ላይሆኑ ይችላሉ።

ትርጉሞችን ለማደራጀት ወይም ለማስተናገድ አንረዳም፣ እኛ ዝም ብለን እናገናኛቸዋለን።

አዲስ ወይም የተሻለ ትርጉም ጨርሰዋል? ወደ ዝርዝራችን ለመጨመር የመጎተት ጥያቄን ይክፈቱ።