ምውራድ

ቡትስትራፕ (ኣብዚ እዋን v3.4.1) ብቕልጡፍ ንኽትጅምር ገለ ቀለልቲ መንገድታት ኣለዉዎ፡ ነፍሲ ወከፎም ንዝተፈላለየ ደረጃ ክእለትን ኣጠቓቕማን ዝስሕቡ እዮም። ንፍሉይ ድሌታትካ ዝሰማማዕ ንምርኣይ ምሉእ ብምሉእ ኣንብብ።

jsDelivr ዝብል ጽሑፍ ኣሎ።

እቶም ኣብ jsDelivr ዘለዉ ሰባት ብጸጋ ንናይ Bootstrap 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>

ምስ ቦወር ምትካል

ከምኡ ውን Bootstrap's Less, CSS, JavaScript, ከምኡ ውን ቅርጺ ፊደላት ብ Bower ተጠቒምካ ክትተክልን ከተመሓድርን ትኽእል ኢኻ :

bower install bootstrap

ብ npm ምትካል

ከምኡ ውን Bootstrap ብ npm ተጠቂምካ ክትጭብጦ ትኽእል ኢኻ :

npm install bootstrap@3

require('bootstrap')ኩሎም ናይ Bootstrap jQuery ፕላጊናት ኣብቲ jQuery ነገራት ክጽዕኖም እዩ። እቲ bootstrapሞዱል ንባዕሉ ዝኾነ ነገር ኣይልእኽን እዩ። /js/*.jsኣብ ትሕቲ ናይቲ ፓኬጅ ላዕለዋይ ደረጃ ማህደር ዝርከቡ ፋይላት ብምጽዓን ናይ Bootstrap jQuery ፕላግ-ኢናት ብውልቂ ብኢድካ ክትጽዕኖም ትኽእል ኢኻ ።

Bootstrap's package.jsonኣብ ትሕቲ እዞም ዝስዕቡ መፍትሕታት ገለ ተወሳኺ ሜታዳታ ዝሓዘ እዩ።

• less- መንገዲ ናብቲ ናይ Bootstrap ቀንዲ Less ምንጪ ፋይል
• style- መንገዲ ናብቲ ብነባሪ ቅጥዕታት ተጠቒምካ ቅድሚኡ ዝተጠርነፈ ዘይተቐነሰ CSS ናይ Bootstrap (ምምዕርራይ የለን)

ብኮምፖዘር ምትካል

ብተወሳኺ ናይ Bootstrap Less, CSS, JavaScript, ከምኡ ውን ቅርጺ ፊደላት ብ Composer ተጠቂምካ ክትተክልን ከተመሓድርን ትኽእል ኢኻ :

composer require twbs/bootstrap

ንLess/Sass ዝኸውን ኣውቶፕሪፊክሰር የድሊ

ቡትስትራፕ ምስ ቅድመ - ጥብቆታት ሸየጥቲ CSS ንምግጣም Autoprefixer ይጥቀም ። Bootstrap ካብ Less/Sass ምንጩ ትጥርንፎ እንተኾንካን Gruntfile ናትና ዘይትጥቀመሉን እንተኾንካ፡ Autoprefixer ኣብ መስርሕ ህንጸትካ ባዕልኻ ከተዋሃህዶ ከድልየካ እዩ። ቅድሚኡ ዝተኣከበ Bootstrap ትጥቀሙ እንተኾይንኩም ወይ ናትና Gruntfile ትጥቀሙ እንተኾይንኩም፡ Autoprefixer ድሮ ኣብ Gruntfileና ተዋሃሂዱ ስለዘሎ፡ ብዛዕባ እዚ ምጭናቕ ኣየድልየኩምን እዩ።

እንታይ ተሓዊስዎ ኣሎ።

ቡትስትራፕ ብኽልተ መልክዕ ክትወርድ ትኽእል ኢኻ፣ ኣብ ውሽጡ ድማ እዞም ዝስዕቡ ማህደራትን ፋይላትን ክትረክብ ኢኻ፣ ብስነመጎታዊ መንገዲ ናይ ሓባር ጸጋታት ብምጉጅጃልን ክልቲኦም ዝተጠርነፉን ዝተቐነሱን ፍልልያት ክትህብን ኢኻ።

ቅድሚኡ ዝተጠርነፈ ቡትስትራፕ

ምስ ወረድና ነቲ ዝተጸቕጠ ፎልደር ንፈትሖ እሞ ኣቃውማ ናይ (እቲ ዝተጠርነፈ) Bootstrap ንምርኣይ። ከምዚ ዝበለ ክትሪኢ ኢኻ፤

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 source maps ( bootstrap.*.map) ምስ ዝተወሰኑ ናይ ዳህሰስቲ ናይ መማዕበሊ መሳርሒታት ንኽትጥቀመሎም ይርከቡ። ካብ ግሊፊኮንስ ዝመጹ ቅርጺ ፊደላት ተሓዊሶም ኣለዉ፡ ከምኡ’ውን ኣማራጺ ቡትስትራፕ ቴማ።

ቡትስትራፕ ምንጪ ኮድ

እቲ ናይ ቡትስትራፕ ምንጪ ኮድ ምውራድ ቅድሚኡ ዝተጠርነፈ ናይ ሲኤስኤስ፣ ጃቫስክሪፕትን ቅርጺ ፊደልን ንብረት ምስ ምንጪ ሌስ፣ ጃቫስክሪፕትን ሰነዳትን የጠቓልል። ብዝያዳ ብፍሉይ ድማ ነዞም ዝስዕቡን ካልኦትን ዘጠቓለለ እዩ፤

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

እቶም less/, js/, ከምኡውን fonts/ናይ CSS, JS, ከምኡውን ናይ ምልክት ቅርጺ ፊደላትና (ብቕደም ተኸተል) ምንጪ ኮድ እዮም። እቲ dist/ፎልደር ኣብ ላዕሊ ኣብቲ ኣቐዲሙ ዝተጠርነፈ ናይ ምውራድ ክፍሊ ዝተዘርዘረ ኩሉ ዘጠቓልል እዩ። እቲ docs/ፎልደር ንሰነዳትና ዝኸውን ምንጪ ኮድ ዘጠቓልል እዩ፣ ከምኡውን examples/ናይ ቡትስትራፕ ኣጠቓቕማ። ካብዚ ወጻኢ ዝኾነ ካልእ ዝተሓወሶ ፋይል ንፓኬጃት፡ ሓበሬታ ፍቓድን ምዕባለን ደገፍ ይህብ።

ምጥርናፍ ሲኤስኤስን ጃቫስክሪፕትን

ቡትስትራፕ ንህንጸት ስርዓቱ Grunt ይጥቀም ፣ ምስቲ ፍሬምዎርክ ንምስራሕ ምቹእ ሜላታት ኣለዎ። ኮድና ብኸመይ ከም እንጥርንፎ፡ ፈተነታት ከም እነካይድን ካልእን እዩ።

ምትካል ግራንት

Grunt ንምትካል መጀመርታ node.js (npm ዘጠቓልል) ኣውሪድካ ክትጭብጦ ኣለካ ። npm ን node packaged modules ዝብል ትርጉም ዘለዎ ኮይኑ ብመንገዲ node.js ኣቢልካ ንናይ ምዕባለ ጽግዕተኛታት ንምምሕዳር ዝሕግዝ መንገዲ እዩ።

1. ብዓለም grunt-cliደረጃ ምስ npm install -g grunt-cli.
2. ናብቲ ሱር /bootstrap/ማህደር ንኺድ፣ ድሕሪኡ ንስራሕ npm install። npm ነቲ package.jsonፋይል ርእዩ ኣብኡ ዝተዘርዘሩ ኣድለይቲ ሎካል ጽግዕተኛታት ብኣውቶማቲክ ክተክል እዩ።

ምስ ተዛዘመ፡ ካብ መስመር ትእዛዝ ዝቐረቡ ዝተፈላለዩ ናይ Grunt ትእዛዛት ከተካይድ ትኽእል ኢኻ።

ዝርከቡ ናይ Grunt ትእዛዛት።

grunt dist(ሲኤስኤስን ጃቫስክሪፕትን ጥራይ ምጥርናፍ)

ነቲ /dist/ማህደር ብዝተጠርነፉን ዝተቐነሱን CSSን JavaScriptን ፋይላት ዳግማይ ይፈጥሮ። ከም ተጠቃሚ ቡትስትራፕ መጠን እዚ ንቡር እቲ እትደልዮ ትእዛዝ እዩ።

grunt watch(ተመልከት)

ነቶም Less ምንጪ ፋይላት ይከታተሎምን ለውጢ ኣብ እትዕቅበሉ እዋን ብኣውቶማቲክ ናብ CSS ዳግማይ ይጥርንፎምን።

grunt test(ፈተናታት ምጉያይ)

JSHint የካይድን ሳላ ካርማ ኣብ ሓቀኛታት ዳህሰስቲ ናይ QUnit ፈተነታት የካይድን ።

grunt docs(ናይ docs ንብረት ምህናጽን ምፍታንን)

ብመንገዲ bundle exec jekyll serve.

grunt(ፍጹም ኩሉ ሃኒጽካ ፈተነታት ኣካይድ)

CSSን JavaScriptን ይጥርንፍን የጉድልን፣ ናይ ሰነድ መርበብ ሓበሬታ ይሃንጽ፣ ነቲ HTML5 validator ኣንጻር docs የካይድ፣ ናይ Customizer assets ዳግማይ ይፈጥርን ካልእን ይሰርሕ። ጀኪል ይሓትት . መብዛሕትኡ ግዜ ኣድላዪ ኣብ ቡትስትራፕ ባዕሉ ትሃርም እንተኾንካ ጥራይ እዩ።

ምፍታሕ ጸገማት

ኣብ ምትካል ጽግዕተኛታት ወይ ኣብ ምዝዋር ትእዛዛት Grunt ጸገማት እንተ ኣጋጢሙካ፡ መጀመርታ ነቲ /node_modules/ብnpm ዝፍጠር ማህደር ደምስሶ። ድሕሪኡ፡ ዳግማይ ምዝዋር npm install.

መሰረታዊ ቅጥዒ

በዚ መሰረታዊ ናይ HTML ቅጥዒ ጀምር፣ ወይ ነዞም ኣብነታት ኣዐርዮም . ንቕጥዕታትናን ኣብነታትናን ንዓኻትኩም ዝምጥን ብምትዕርራይ ክትቅይርዎም ተስፋ ንገብር።

ብውሑድ ቡትስትራፕ ሰነድ ስራሕ ንምጅማር ኣብ ታሕቲ ዘሎ HTML ቅዳሕ።

<!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 repository ብምውራድ ረኸብ ። ኣብነታት ኣብቲ docs/examples/ማህደር ክትረኽቡ ትኽእሉ ኢኹም።

ነቲ ማዕቀፍ ምጥቃም

መበገሲ ቅጥዒ

ብዘይካ መሰረታዊ ነገራት ካልእ የለን: CSSን ጃቫስክሪፕትን ምስ ኮንተይነር ዝተጠርነፈ።

ቡትስትራፕ ዝብል ቴማ

ብዓይኒ ዝተማዕበለ ተመክሮ ንምርካብ ነቲ ኣማራጺ ቡትስትራፕ ቴማ ጽዓኖ።

ሽቦታት

ብዙሓት ኣብነታት ናይ ሽቦ ኣቀማምጣ ምስ ኣርባዕቲኦም ደረጃታት፡ ምድቃልን ካልእን።

ጃምቦትሮን ዝበሃል እዩ።

ኣብ ዙርያ ጃምቦትሮን ብናቭባርን ገለ መሰረታዊ ሽቦ ዓምድታትን ምህናጽ።

ጸቢብ ጃምቦትሮን።

ነቲ ነባሪ መትሓዚን ጃምቦትሮንን ብምጽባብ ዝያዳ ብሕታዊ ገጽ ምህናጽ።

ናቭባርስ ኣብ ተግባር

ናቭባር

ን navbar ምስ ገለ ተወሳኺ ትሕዝቶ ዘጠቓለለ ሱፐር መሰረታዊ ቅጥዒ።

ስታትቲክ ላዕለዋይ ናቭባር

ሱፐር መሰረታዊ ቅጥዒ ምስ ስታትቲክ ላዕለዋይ ናቭባር ምስ ገለ ተወሳኺ ትሕዝቶ።

ጽኑዕ ናቭባር

ሱፐር መሰረታዊ ቅጥዒ ምስ ጽኑዕ ላዕለዋይ ናቭባር ምስ ገለ ተወሳኺ ትሕዝቶ።

ብሕታዊ ኣካላት

ሽፋን

ቀለልትን ጽቡቓትን ናይ መጀመርታ ገጻት ንምህናጽ ዝሕግዝ ናይ ሓደ ገጽ ቅጥዒ።

ካሮሰል

ነቲ navbarን carouselን ብዝጥዕመካ ኣገባብ ኣመዓራርዮ፣ ድሕሪኡ ገለ ሓደስቲ ኣካላት ወስኸሉ።

ብሎግ

ቀሊል ክልተ ዓምዲ ዘለዎ ኣቀማምጣ ብሎግ ምስ ብሕታዊ ምድህሳስ፣ ርእስን ዓይነትን።

ዳሽቦርድ

መሰረታዊ ኣቃውማ ናይ ኣድሚን ዳሽቦርድ ምስ ጽኑዕ ጎድናዊ ባርን ናቭባርን።

ናይ ምእታው ገጽ

ብሕታዊ ቅጥዒ ኣቀማምጣን ዲዛይንን ንቐሊል ምልክት ኣብ ቅጥዒ።

ዝተመኽነየ nav

ምኽኑይ ዝኾነ መላግቦታት ዘለዎ ብሕታዊ ናቭባር ፍጠር። ርእሲ ንላዕሊ! ብዙሕ ሳፋሪ ምሕዝነታዊ ኣይኮነን።

ተጣባቒ እግረ ጽሑፍ

ትሕዝቶ ካብኡ ዝሓጽር ምስ ዝኸውን ኣብ ታሕቲ ናይቲ ቪውፖርት እግረ ጽሑፍ ኣተሓሕዞ።

ተጣባቒ እግሪ ምስ navbar

ኣብ ታሕቲ ናይቲ ቪውፖርት እግረ ጽሑፍ ብቐዋሚ ናቭባር ኣብ ላዕሊ ኣተሓሕዞ።

ፈተነታት

መልሲ ዘይህብ ቡትስትራፕ

ብቐሊሉ መልሲ ናይ Bootstrap per our docs ኣሰናኽል ።

ካብ ካንቫስ ወጻኢ

ምስ ቡትስትራፕ ንኽትጥቀመሉ እትኽእል ካብ ካንቫስ ወጻኢ ዝኾነ ናይ ምድህሳስ ዝርዝር ምህናጽ።

መሳረሕታት

ቡትሊንት ዝበሃል ትካል

ቡትሊንት ወግዓዊ መሳርሒ ቡትስትራፕ ኤችቲኤምኤል ሊንተር እዩ። ኣብ ቡትስትራፕ ብመጠኑ "ቫኒላ" መንገዲ ዝጥቀሙ ዘለዉ ገጻት መርበብ ሓበሬታ ሓያሎ ልሙዳት ጌጋታት ኤችቲኤምኤል ብኣውቶማቲክ ይምርምር። ናይ ቫኒላ ቡትስትራፕ ኣካላት/ዊጀት ክፋላቶም ናይ DOM ምስ ዝተወሰኑ ኣቃውማታት ክሰማምዑ ይጠልቡ። ቡትሊንት ኣጋጣሚታት ናይ ቡትስትራፕ ኣካላት ብትኽክል ዝተዋደደ ኤችቲኤምኤል ከምዘለዎም ይምርምር። ካብቶም ልሙዳት ጌጋታት ዝኾነ ይኹን ንልምዓት ፕሮጀክትካ ከየዝሕሎ Bootlint ኣብ Bootstrap web development toolchain ምውሳኽ ኣብ ግምት ኣእቱ።

ማሕበረሰብ

ብዛዕባ ምዕባለ ቡትስትራፕ እዋናዊ ሓበሬታ ክትረኽቡን በዞም ሓገዝቲ ጸጋታት ናብ ሕብረተሰብ ክትበጽሑን ትኽእሉ ኢኹም።

• ን The Official Bootstrap Blog ኣንብቡን ሳብስክራይብ ግበሩን ።
• ኣብቲ ሰርቨር IRC ብምጥቃም ምስ ብጾትካ Bootstrappers ዕላል ግበር irc.freenode.net፣ ኣብ ##bootstrap channel ።
• ቡትስትራፕ ኣብ ምጥቃም ሓገዝ ንምርካብ፡ ኣብ ስታክኦቨርፍሎው ነቲ መለለዪ ተጠቒምካtwitter-bootstrap-3 ሕተት ።
• ዲቨሎፐራት ንዝለዓለ ርኽበት ብመንገዲ npmbootstrap ወይ ተመሳሳሊ ናይ ኣወሃህባ ኣገባባት ክዝርግሑ ከለዉ ንተግባራዊነት ቡትስትራፕ ዝቕይሩ ወይ ዝውስኹ ፓኬጃት ነቲ ቁልፊ ቃል ክጥቀሙሉ ይግባእ ።
• ኣብ ቡትስትራፕ ኤክስፖ ብቡትስትራፕ ዝሃንጹ ሰባት ዘነቓቕሑ ኣብነታት ርኸቡ ።

ብተወሳኺ ኣብ ትዊተር @getbootstrap ክትከታተሉ ትኽእሉ ኢኹም ፡ እዋናዊ ሕሜታን ዘደንቑ ሙዚቃዊ ቪድዮታትን ንምርካብ።

ምላሽ ምሃብ ምዝንባዕ

ቡትስትራፕ ገጻትካ ብዝተፈላለየ ዓቐን ስክሪን ብኣውቶማቲክ የመዓራርዮም። ገጽካ ከምዚ መልሲ ዘይህብ ኣብነት ንኽሰርሕ ነዚ ባህሪ ከመይ ጌርካ ከም እትዓጽዎ ኣብዚ ኣሎ ።

ንገጽ ምላሽ ንምስንኻል ዝሕግዙ ስጉምትታት

1. ኣብ CSS docs<meta> ዝተጠቕሰ viewport ንገድፎ
2. ነቲ widthon the .containerንነፍሲ ​​ወከፍ ሽቦ ደረጃ ብሓደ ስፍሓት ምግልባጥ፣ ንኣብነት width: 970px !important;እዚ ድሕሪ ነባሪ Bootstrap CSS ከም ዝመጽእ ኣረጋግጽ። ብኣማራጺ ካብቲ !importantምስ ሚድያ ሕቶታት ወይ ገለ መምረጺ-ፉ ክትድሕን ትኽእል ኢኻ።
3. navbars ትጥቀም እንተኾንካ ኩሉ navbar ዝፈርስን ምስፋሕን ባህርያት ኣወግድ።
4. ንኣቀማምጣ ሽቦ .col-xs-*፡ ኣብ ርእሲ፡ ወይ ኣብ ክንዲ ናይቶም ማእከላይ/ዓበይቲ ክፍልታት ተጠቐም። ኣይትሻቐሉ፣ እቲ ተወሳኺ-ንእሽቶ መሳርሒ ሽቦ ናብ ኩሉ ርዝነት ይመጣጠን።

ሕጂ ውን Respond.js ንIE8 ከድልየካ እዩ (ናይ ሚድያ ሕቶታትና ጌና ስለዘለዉን ክስርሑ ስለዘድልዮምን)። እዚ ድማ ነቲ "ሞባይል ሳይት" ዝብል መዳያት ናይ ቡትስትራፕ የሰናኽሎ።

ቡትስትራፕ ቅጥዒ ምስ ምላሽ ተሰናኺሉ።

ነዞም ስጉምትታት ኣብ ሓደ ኣብነት ተግባራዊ ጌርናዮም ኣለና። ፍሉይ ለውጢ ተግባራዊ ኮይኑ ንምርኣይ ምንጪ ኮዱ ኣንብብ።

መልሲ ዘይህብ ኣብነት ርአ

ናይ መርበብ ሓበሬታን መሳርሒን ደገፍ

ቡትስትራፕ ኣብቶም ዝሓለፉ ናይ ዴስክቶፕን ሞባይልን ዳህሰስቲ ዝበለጸ ንኽሰርሕ ዝተሃንጸ ኮይኑ፡ ማለት ዝኣረጉ ዳህሰስቲ ዝተፈላለየ ቅዲ ዘለዎም፡ ዋላ’ኳ ምሉእ ብምሉእ ዝሰርሑ እንተኾኑ፡ ናይ ዝተወሰኑ ኣካላት ምቕራብ ከርእዩ ይኽእሉ።

ዝድገፉ ዳህሰስቲ

ብፍላይ ድማ ናይዞም ዝስዕቡ መርበባት ሓበሬታን መድረኻትን ዝሓለፉ ስሪት ንድግፍ ።

ብቐጥታ ይኹን ብመንገዲ ናይቲ መድረኽ ዌብ ቪው ኤፒኣይ፡ ናይ መወዳእታ ስሪት ዌብኪት፡ ብሊንክ፡ ወይ ጌኮ ዝጥቀሙ ኣማራጺ መርበባት ሓበሬታ፡ ብግልጺ ኣይድገፉን እዮም። ይኹን እምበር፡ Bootstrap (ኣብ መብዛሕትኡ እዋን) ኣብዞም ዳህሰስቲ እውን ብትኽክል ከርኢን ክሰርሕን ኣለዎ። ዝያዳ ፍሉይ ናይ ደገፍ ሓበሬታ ኣብ ታሕቲ ተዋሂቡ ኣሎ።

ሞባይል መሳርሒታት

ብሓፈሻ ቡትስትራፕ ናይ ነፍሲ ወከፍ ዓቢ መድረኽ ነባሪ ዳህሰስቲ እዋናዊ ስሪት ይድግፍ። ፕሮክሲ ዳህሰስቲ (ከም ኦፔራ ሚኒ፡ ኦፔራ ሞባይል ተርቦ ሞድ፡ ዩሲ ብራውዘር ሚኒ፡ ኣማዞን ሲልክ) ከምዘይድገፉ ኣስተውዕል።

ናይ ዴስክቶፕ ዳህሰስቲ

ብተመሳሳሊ መንገዲ ናይ መብዛሕትኦም ናይ ዴስክቶፕ ዳህሰስቲ ናይ መወዳእታ ስሪት ይድገፉ።

ኣብ ዊንዶውስ ፡ ኢንተርነት ኤክስፕሎረር 8-11 ንድግፍ ።

ንፋየርፎክስ፡ ብዘይካ እቲ ናይ መወዳእታ ንቡር ርጉእ ምውጻእ፡ ነቲ ናይ መወዳእታ ዝተዘርግሐ ደገፍ ምውጻእ (ESR) ስሪት ፋየርፎክስ እውን ንድግፍ።

ብዘይወግዓዊ መንገዲ፡ ቡትስትራፕ ኣብ ክሮሚየምን ክሮምን ንሊኑክስ፡ ፋየርፎክስ ንሊኑክስ፡ ከምኡ’ውን ኢንተርነት ኤክስፕሎረር 7፡ ከምኡ’ውን ኣብ ማይክሮሶፍት ኤጅ፡ ዋላ’ኳ ብወግዒ እንተዘይተደገፉ፡ እኹል መልክዕን ባህርን ክህልዎ ይግባእ።

ዝርዝር ናይ ገለ ካብቶም ቡትስትራፕ ክገጥሞም ዘለዎ ናይ መርበብ ሓበሬታ ስሕተታት ንምርካብ፡ መንደቕና ስሕተት መርበብ ሓበሬታና ርአ ።

ኢንተርነት ኤክስፕሎረር 8ን 9ን።

ኢንተርነት ኤክስፕሎረር 8ን 9ን እውን ይድገፉ እዮም፣ ይኹን እምበር ገለ CSS3 ባህርያትን HTML5 ባእታታትን በዞም ዳህሰስቲ ምሉእ ብምሉእ ከምዘይድገፉ ኣስተውዕሉ። ብተወሳኺ ፡ ኢንተርነት ኤክስፕሎረር 8 ንናይ ሚድያ ሕቶ ደገፍ ንምንቅስቓስ Respond.js ምጥቃም የድሊ ።

ንዝርዝር ሓበሬታ ብዛዕባ ናይ መርበብ ሓበሬታ ደገፍ ናይ CSS3ን HTML5ን ባህርያት ንምርካብ Can I use... ተወከሱ ።

ኢንተርነት ኤክስፕሎረር 8 ከምኡ’ውን Respond.js ዝበሃሉ ምዃኖም ይፍለጥ

ኣብ ምምዕባልን ምፍራይን ከባቢታት ንኢንተርነት ኤክስፕሎረር 8 Respond.js ክትጥቀም ከለኻ ካብዞም ዝስዕቡ መጠንቀቕታታት ተጠንቀቕ።

Respond.js ከምኡ’ውን ስግረ-ዶመይን CSS ዝበሃሉ ምዃኖም ይፍለጥ

Respond.js ምስ CSS ኣብ ዝተፈላለየ (ንኡስ)ዶመይን (ንኣብነት ኣብ CDN) ዝተኣንገደ ምጥቃም ገለ ተወሳኺ ምድላው የድልዮ። ንዝርዝር ሓበሬታ ኣብ Respond.js docs ርአ ።

Respond.js ከምኡ’ውን...file://

ብሰንኪ ሕግታት ድሕነት መርበብ ሓበሬታ፡ Respond.js ምስቶም ብመንገዲ ፕሮቶኮል ዝረኣዩ ገጻት ኣይሰርሕን እዩ file://(ከምቲ ሎካል ኤችቲኤምኤል ፋይል ክትከፍት ከለኻ)። ኣብ IE8 ምላሽ ዝህቡ ባህርያት ንምፍታን፡ ገጻትካ ብመንገዲ HTTP(S) ርአ። ንዝርዝር ሓበሬታ ኣብ Respond.js docs ርአ ።

Respond.js ከምኡ’ውን...@import

Respond.js ምስቲ ብመንገዲ ዝተወከሰ CSS ኣይሰርሕን እዩ @import። ብፍላይ ገለ ድሩፓል ውቅርታት ከም ዝጥቀሙ ይፍለጥ @import። ንዝርዝር ሓበሬታ ኣብ Respond.js docs ርአ ።

ኢንተርነት ኤክስፕሎረር 8 ከምኡ’ውን ቦክስ-ሳይዚንግ

IE8 ምስ , , , ወይ box-sizing: border-box;ክውሃሃድ ከሎ ምሉእ ብምሉእ ኣይድግፍን እዩ ። በዚ ምኽንያት እዚ ካብ v3.0.1 ጀሚሩ ኣብ s ኣይንጥቀምን ኢና።min-widthmax-widthmin-heightmax-heightmax-width.container

ኢንተርነት ኤክስፕሎረር 8 ከምኡ’ውን @font-face ዝበሃሉ ምዃኖም ይፍለጥ

@font-faceIE8 ምስ ክውሃሃድ ከሎ ገለ ጸገማት ኣለዎ :before. ቡትስትራፕ ነዚ ውህደት ምስ ግሊፊኮናቱ ይጥቀመሉ። ሓደ ገጽ ኣብ መኽዘን እንተተቐሚጡ፣ ከምኡውን ብዘይ ማውስ ኣብ ልዕሊ መስኮት እንተተጻዒኑ (ማለት ነቲ ናይ ምሕዳስ መጠወቒ ምህራም ወይ ኣብ iframe ገለ ነገር ምጽዓን) ሽዑ እቲ ገጽ ቅድሚ እቲ ቅርጺ ምጽዓኑ ይቐርብ። ኣብ ልዕሊ እቲ ገጽ (ኣካል) ምሕንባስ ገለ ካብቶም ምልክታት ከርእየካ ኣብ ልዕሊ እቶም ዝተረፉ ምልክታት ምሕንባስ ድማ ነቶም እውን ከርእየካ እዩ። ንዝርዝር ሓበሬታ ኣብ ሕታም #13863 ርአ ።

IE ናይ ምትእስሳር ሞድታት

ቡትስትራፕ ኣብቲ ናይ ቀደም ናይ ኢንተርነት ኤክስፕሎረር ምትእስሳር ሞድታት ኣይድገፍን እዩ። ንIE ዝኸውን ናይ መወዳእታ ናይ ምቕራብ ሞድ ትጥቀም ከም ዘለኻ ንምርግጋጽ <meta>፡ ኣብ ገጻትካ ነቲ ዝምጥን መለለዪ ምእታው ኣብ ግምት ኣእቱ፤

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

ናይ ምእራም መሳርሒታት ብምኽፋት ነቲ ናይ ሰነድ ሞድ ኣረጋግጽ: F12"Document Mode" ጸቒጥካ መርምሮ።

እዚ መለለዪ ኣብ ነፍሲ ወከፍ ዝድገፍ ስሪት ኢንተርነት ኤክስፕሎረር ዝበለጸ ምቕራብ ንምርግጋጽ ኣብ ኩሉ ሰነዳትን ኣብነታትን ቡትስትራፕ ተኻቲቱ ኣሎ።

ንዝያዳ ሓበሬታ ነዚ StackOverflow ዝብል ሕቶ ርአ ።

ኢንተርነት ኤክስፕሎረር 10 ኣብ ዊንዶውስ 8ን ዊንዶውስ ፎን 8ን።

ኢንተርነት ኤክስፕሎረር 10 ስፍሓት መሳርሒ ካብ ስፍሓት ቪውፖርት ኣይፈልዮን እዩ , በዚ ኸኣ ኣብ ቡትስትራፕ ሲኤስኤስ ንዘሎ ናይ ሚድያ ሕቶታት ብግቡእ ኣይትግብሮን እዩ። ንቡር ነዚ ንምእራም ቅልጡፍ ቁንጣሮ CSS ጥራይ ምወሰኽካ፤

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

ይኹን እምበር፡ እዚ ነቶም ካብ Update 3 (aka 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)
}

ንዝያዳ ሓበሬታን መምርሒ ኣጠቓቕማን ፡ ዊንዶውስ ፎን 8ን መሳርሒ-ስፍሓትን ኣንብብ ።

ከም heads up ነዚ ኣብ ኩሉ ናይ Bootstrap ሰነዳትን ኣብነታትን ከም መርኣያ ነካትቶ ኣለና።

ሳፋሪ ሚእታዊት ምኽባብ

ቅድሚ v7.1 ንOS Xን ሳፋሪ ን iOS v8.0ን ዝነበረ ስሪት ሳፋሪ ዝነበረ ሞተር ምቕራጽ ኣብ ቁጽሪ ናይቶም ኣብ .col-*-1ግሪድ ክፍልታትና ዝጥቀሙሉ ዝነበሩ ዓስራይ ቦታታት ገለ ጸገም ነይርዎ። ስለዚ 12 ውልቃዊ ሽቦ ዓምድታት እንተዝህልዉኻ፡ ምስ ካልኦት መስርዕ ዓምድታት ክነጻጸሩ ከለዉ ሓጸርቲ ከም ዝመጹ ምተዓዘብካ። ሳፋሪ/ኣይኦኤስ ካብ ምዕባይ ብተወሳኺ ገለ ኣማራጺታት ንመፍትሒታት ኣለዉኻ፤

• .pull-rightኣብቲ ናይ መወዳእታ ሽቦ ዓምድኻ ወስኸሉ ነቲ ተሪር-የማናይ ኣሰላልፋ ንምርካብ
• ንሳፋሪ ፍጹም ምኽባብ ንምርካብ ሚእታዊትካ ብኢድካ ምትዕርራይ (ካብቲ ቀዳማይ ኣማራጺ ዝኸበደ)

ሞዳላት፡ ናቭባርን ቨርቹዋል ኪቦርድን ይርከብዎም

ምፍሳስን ምዝዋርን

overflow: hiddenን on the element ዝኸውን ደገፍ <body>ኣብ iOSን Androidን ኣዝዩ ድሩት እዩ። ነዚ ንምትግባር ድማ፡ ኣብ ክልቲኡ ናይቶም መሳርሒታት ዳህሰስቲ ላዕለዋይ ወይ ታሕተዋይ ክፋል ናይ ሓደ ሞዳል ሓሊፍካ ምስ እትስክሮል፡ እቲ <body>ትሕዝቶ ምዝዋር ክጅምር እዩ። Chrome bug #175502 ( ኣብ Chrome v40 ተኣሪሙ) ከምኡ’ውን WebKit bug #153852 ርአ ።

ናይ iOS ናይ ጽሑፍ ዓውድታትን ምዝዋርን

ካብ iOS 9.3 ጀሚሩ፡ ሓደ ሞዳል ክፉት እንከሎ፡ ናይ መጀመርታ ምትንኻፍ ናይ ሓደ ጥቕላል ምልክት ኣብ ውሽጢ ዶብ ናይ ሓደ ጽሑፋዊ <input>ወይ a <textarea>እንተኾይኑ፡ እቲ ኣብ <body>ትሕቲ እቲ ሞዳል ዘሎ ትሕዝቶ ኣብ ክንዲ እቲ ሞዳል ባዕሉ ክሽክርከር እዩ። ዌብኪት ስሕተት #153856 ርአ ።

ቨርቹዋል ቁልፊ ሰሌዳታት

ከምኡ’ውን፡ ጽኑዕ ናቭባር ትጥቀም እንተኾንካ ወይ ኣብ ውሽጢ ሞዳል እታዎታት ትጥቀም እንተኾንካ፡ iOS ናይ ምቕራጽ ስሕተት ኣለዎ፡ እዚ ድማ እቲ ቨርቹዋል ኪቦርድ ክጅምር ከሎ፡ ኣቀማምጣ ናይቶም ጽኑዓት ባእታታት ዘየመሓይሽ ምዃኑ ኣስተውዕል። ነዚ ዝኸውን ውሑዳት መፍትሒታት፡ ባእታታትካ ናብ ምቕያር position: absoluteወይ ኣብ ፎኮስ ዘሎ ታይመር ምጽዋዕ ነቲ ኣቀማምጣ ብኢድካ ከተዐርዮ ምፍታን የጠቓልል። እዚ ብቡትስትራፕ ኣይሕዞን እዩ፣ ስለዚ ኣየናይ ፍታሕ ንኣፕሊኬሽንካ ዝበለጸ ምዃኑ ምውሳን ናትካ ዕማም እዩ።

ናቭባር ድሮፕዳውንድስ

እቲ .dropdown-backdropባእታ ኣብ iOS ኣብ nav ኣይጥቀምን እዩ ብሰንኪ ዝተሓላለኸ z-indexing። በዚ ኸምዚ፡ ኣብ navbars ንዝርከቡ ንቑልቁል ዝወርድ ነገራት ንምዕጻው፡ ብቐጥታ ነቲ ንቑልቁል ዝወርድ ባእታ (ወይ ዝኾነ ካልእ ባእታ ኣብ iOS ናይ ምጥዋቕ ፍጻመ ዝትኩስ ) ክትጥውቕ ኣለካ።

ምጉላሕ መርበብ ሓበሬታ

ገጽ ምዕባይ ኣብ ገለ ኣካላት፡ ኣብ ቡትስትራፕን ዝተረፈ መርበብ ሓበሬታን፡ ናይ ምቕራጽ ቅርስታት ምቕራብ ዘይተርፍ እዩ። ከከምቲ ጉዳይ ክንእርሞ ንኽእል ንኸውን (መጀመርታ ድለዩ ድሕሪኡ ኣድላዪ እንተኾይኑ ጉዳይ ከፊትና)። ይኹን እምበር፡ መብዛሕትኡ ግዜ ብዘይካ ሃኪ መፍትሒታት ካልእ ቀጥታዊ ፍታሕ ስለዘይብሎም፡ ነዚኦም ሸለል ክንብሎም ንፍትን።

ተጣባቒ :hover/ :focusኣብ ሞባይል

ዋላ'ኳ ኣብ መብዛሕትኦም ተንከስካሲ ስክሪናት ናይ ብሓቂ ምትሕንፋጽ እንተዘይተኻእለ፡ መብዛሕትኦም ሞባይል ዳህሰስቲ ግን ናይ ምትሕንፋጽ ደገፍ ብምምሳል :hover"ተጣባቒ" ይገብሩ። ብኻልእ ኣዘራርባ :hover፡ ቅዲታት ንሓደ ባእታ ድሕሪ ምጥዋቕካ ምትግባር ይጅምሩ፡ ተጠቃሚ ገለ ካልእ ባእታ ምስ ጠወቐ ጥራይ ድማ ምትግባር የቋርጹ። እዚ ድማ ናይ ቡትስትራፕ :hoverኩነታት ኣብ ከምዚኦም ዝኣመሰሉ ዳህሰስቲ ብዘይተደልየ መንገዲ "ክዕንቀፉ" ክገብሮም ይኽእል። ገለ ሞባይል ብራውዘር እውን :focusብተመሳሳሊ ተጣባቒ ይገብሩ። ኣብዚ እዋን እዚ ከምዚኦም ዝኣመሰሉ ቅዲታት ምሉእ ብምሉእ ካብ ምእላይ ወጻኢ ነዞም ጉዳያት ዝኸውን ቀሊል መፍትሒ የለን።

ሕትመት

ኣብ ገለ ዘመናውያን ዳህሰስቲ እውን ከይተረፈ፡ ሕትመት ቅልል ዝበለ ክኸውን ይኽእል እዩ።

ብፍላይ ካብ Chrome v32 ጀሚሩን ቅጥዕታት ወሰን ብዘየገድስን፡ Chrome ንሓደ መርበብ ሓበሬታ ኣብ ዝሕትመሉ እዋን ንዝቐርቡ ሕቶታት ሚድያ ኣብ ዝፈትሕሉ እዋን ካብቲ ፊዚካዊ ዓቐን ወረቐት ብኣግባቡ ዝጸበበ ስፍሓት ቪውፖርት ይጥቀም። እዚ ድማ ኣብ እዋን ሕትመት ናይ ቡትስትራፕ ተወሳኺ ንእሽቶ ሽቦ ብዘይተጸበናዮ መንገዲ ክነጥፍ ይኽእል። ንገለ ዝርዝር ሓበሬታ ኣብ ሕታም #12078 ን Chrome bug #273306 ን ርአ። ዝቐረቡ መፍትሒታት፤

• ነቲ ተወሳኺ ንእሽቶ ሽቦ ሓቚፍካ ገጽካ ኣብ ትሕቲኡ ቅቡል ከም ዝመስል ኣረጋግጽ።
• @screen-*ናይ መሕተሚ ወረቐትካ ካብ ተወሳኺ-ንእሽቶ ዝዓበየ ተባሂሉ ንኽቑጸር፡ ክብርታት ናይቶም Less ተለዋዋጢ ረቛሒታት ኣመዓራርዮም።
• ንሕትመት ሚድያ ጥራይ ዝኸውን ናይ ሽቦ ዓቐን ምብታኽ ነጥብታት ንምቕያር ብሕታዊ ናይ ሚድያ ሕቶታት ወስኽ።

ከምኡ’ውን፡ ካብ ሳፋሪ v8.0 ጀሚሩ፡ fixed-width .containers፡ ሳፋሪ ኣብ ዝሕትመሉ እዋን ዘይተለምደ ንእሽቶ ቅርጺ ፊደል ክጥቀም ክገብሮ ይኽእል። ንዝያዳ ዝርዝር ሓበሬታ #14868 ን WebKit bug #138192 ን ርአ ። ሓደ ነዚ ክኸውን ዝኽእል መፍትሒ ነዚ ዝስዕብ CSS ምውሳኽ እዩ፤

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

ኣንድሮይድ ስቶክ መርበብ ሓበሬታ

ካብቲ ሳንዱቕ ወጻኢ፡ ኣንድሮይድ 4.1 (ዋላ ገለ ሓደስቲ ዝወጹ ይመስሉ) ምስ Browser app ከም ነባሪ ምርጫ መርበብ ሓበሬታ (ኣንጻር Chrome) ይለኣኽ። እቲ ዘሕዝን ግን Browser app ብዙሕ ስሕተታትን ብሓፈሻ ምስ CSS ዘይምስምማዕን ኣለዎ።

ምልክታታት ምረጽ

ኣብ <select>ባእታታት፡ እቲ ናይ ኣንድሮይድ ስቶክ ዳህሳሲ እንተሃልዩን border-radius/ወይ borderተግባራዊ እንተኾይኑን፡ ናይ ጎኒ መቆጻጸሪታት ኣየርእን እዩ። (ንዝርዝር ሓበሬታ ነዚ StackOverflow ሕቶ ርአ ።) ኣብ ታሕቲ ዘሎ ቁንጣሮ ኮድ ተጠቐም ነቲ ዘበሳጭፍ CSS ንምእላይን ነቲ <select>ከም unstyled element ኣብ Android stock browser ንምቕራብን። እቲ ናይ ተጠቃሚ ወኪል ምሽታት ኣብ ክሮም፡ ሳፋሪን ሞዚላን ዳህሰስቲ ምትእትታው የወግድ።

<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 ዲሞ ርኣይዎ።

ኣረጋጊጾም

ንኣረጊትን ስሕተት ዘለዎምን ዳህሰስቲ ዝበለጸ ተመክሮ ንምሃብ፡ ቡትስትራፕ ኣብ ሓያሎ ቦታታት ዝርከቡ ናይ CSS መርበብ ሓበሬታ ምጥፍፋእ ብምጥቃም ፡ ኣብቶም ዳህሰስቲ ባዕሎም ንዘጋጥሙ ስሕተታት ንምፍታሕ፡ ፍሉይ CSS ናብ ዝተወሰኑ ስሪት መርበብ ሓበሬታ ዒላማ ይገብር። እዞም ሃክስ እዚኦም ንCSS validators ትኽክል ከምዘይኮኑ ከማርሩ ከምዝገብሩ ርዱእ እዩ። ኣብ ሓደ ክልተ ቦታታት፡ ገና ምሉእ ብምሉእ ደረጃ ዘይተሓዙ ደም ዝፈስስ CSS ባህርያት እውን ንጥቀም፡ እዚኦም ግን ንገስጋሲ ምዕባይ ጥራይ እዮም ዝጥቀሙ።

እዞም ናይ ምጽዳቕ መጠንቀቕታታት ብተግባር ቁምነገር የብሎምን ምኽንያቱ እቲ ዘይሃኪ ዝኾነ ክፋል ናይ CSSና ምሉእ ብምሉእ ይረጋገጽን እቶም ሃኪ ዝኾኑ ክፋላት ኣብ ግቡእ ኣሰራርሓ ናይቲ ዘይሃኪ ክፋል ስለዘይዕንቅፉን፡ ካብዚ እዩ ድማ ነዞም ፍሉያት መጠንቀቕታታት ኮነ ኢልና ሸለል እንብሎም።

ናትና ኤችቲኤምኤል ዶክስ ብተመሳሳሊ ንዝተወሰነ ፋየርፎክስ ስሕተት መፍትሒ ብምእታውና ገለ ንእሽቶን ሳዕቤን ዘይብሉን ኤችቲኤምኤል ምጽዳቕ መጠንቀቕታታት ኣለዎም ።

ናይ ሳልሳይ ወገን ደገፍ

ዝኾነ ናይ ሳልሳይ ወገን ፕላግ-ኢን ወይ ተወሳኺ ብወግዒ እኳ እንተዘይደግፍና፡ ኣብ ፕሮጀክትታትካ ክመጽእ ዝኽእል ጸገማት ንኸይፍጠር ዝሕግዝ ገለ ጠቓሚ ምኽሪ ንህብ።

ሳንዱቕ-ዓቐን ምግባር

ገለ ናይ ሳልሳይ ወገን ሶፍትዌር፡ Google Mapsን Google Custom Search Engineን ሓዊስካ፡ ምስ 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();
}

ተበጻሕነት

ቡትስትራፕ ልሙዳት ደረጃታት መርበብ ሓበሬታ ዝኽተል ኮይኑ፡-ብውሑድ ተወሳኺ ጻዕሪ-ነቶም AT ዝጥቀሙ ሰባት ዝበጽሑ መርበባት ሓበሬታ ንምፍጣር ክጥቀመሉ ይኽእል ።

ንመገሻ ምዝላል

ናትካ ምድህሳስ ብዙሓት መላግቦታት ዝሓዘን ቅድሚ እቲ ቀንዲ ትሕዝቶ ኣብ DOM ዝመጽእን እንተኾይኑ Skip to main content፡ ቅድሚ እቲ ምድህሳስ መላግቦ ወስኸሉ (ንቐሊል መብርሂ፡ ነዚ ጽሑፍ A11Y Project ብዛዕባ skip navigation links ርአ)። ነቲ ክፍሊ ምጥቃም ነቲ .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 ን ፍለጡ ።

ንጽጽር ሕብሪ

ኣብዚ እዋን እዚ፡ ገለ ካብቶም ኣብ ቡትስትራፕ ዝርከቡ ነባሪ ውህደት ሕብርታት (ከም ዝተፈላለዩ ቅዲ ዘለዎም ክፍልታት መጠወቒታት፡ ገለ ካብቶም ንመሰረታዊ ኮድ ብሎኮታት ዝጥቀሙ ሕብርታት ዘጉልሑ ኮድ ፡ ክፍሊ ሓጋዚ .bg-primary ድሕረ ባይታ ዓውዲ፡ ከምኡ’ውን ኣብ ጻዕዳ ድሕረ ባይታ ኣብ ዝጥቀመሉ እዋን ነባሪ ሕብሪ መላግቦ) ትሑት ንጽጽር ሬሽዮ ኣለዎም (ትሕቲ እቲ ዝምከር ሬሽዮ 4.5:1 )። እዚ ድማ ትሑት ምርኣይ ንዘለዎም ወይ ድማ ሕብሪ ዘይብሎም ተጠቀምቲ ጸገም ከስዕብ ይኽእል። እዞም ነባሪ ሕብርታት ንጽጽርኦምን ተነባብነቶምን ንምዕባይ ምቕያር ከድልዮም ይኽእል እዩ።

ተወሳኺ ጸጋታት

• ንጉዳያት ተበጻሕነት ንምልላይ ዝሕግዝ "HTML Codesniffer" ዝብል ዕልባ
• ናይ Chrome ናይ ተበጻሕነት መማዕበሊ መሳርሒታት መቐጸልታ
• ተንታኒ ንጽጽር ሕብሪ
• ፕሮጀክት A11Y ዝበሃል ትካል
• ናይ MDN ተበጻሕነት ሰነድ

ናይ ፍቓድ ሕቶታት

Bootstrap ብመሰረት ፍቓድ MIT ዝተዘርግሐ ኮይኑ መሰል ቅዳሕ 2019 Twitter እዩ። ናብ ንኣሽቱ ቁርጽራጻት ተፈልሒሉ፡ በዞም ዝስዕቡ ኩነታት ክግለጽ ይከኣል።

ንሱ ድማ፤

• ኣብ ስርሓትካ ክትጥቀመሎም ከለኻ ኣብ ፋይላት ቡትስትራፕ ሲኤስኤስን ጃቫስክሪፕትን ፋይላት ፍቓድን መሰል ቅዳሕን ተኻቲቱ ኣቐምጦ

ንኽትገብር ድማ የፍቅደልካ፤

• ንውልቃዊ፡ ብሕታዊ፡ ንውሽጣዊ ትካል ወይ ንንግዳዊ ዕላማታት ቡትስትራፕ ምሉእ ብምሉእ ወይ ብኸፊል ብናጻ ኣውሪድካ ተጠቐመሉ።
• ኣብ እትፈጥሮም ፓኬጃት ወይ ምክፍፋላት Bootstrap ተጠቐም
• ነቲ ምንጪ ኮድ ኣዐርዮ
• ቡትስትራፕ ኣብቲ ፍቓድ ንዘይተኻተቱ ሳልሳይ ወገን ንምቕያርን ንምዝርጋሕን ንኡስ ፍቓድ ምሃብ

ንኸይትገብር ይኽልክለካ፤

• ቡትስትራፕ ብዘይ ዋሕስ ስለዝተዋህበ ንጸሓፍትን ወነንቲ ፍቓድን ንዝበጽሖ ጉድኣት ተሓተትቲ ግበር
• ንፈጠርቲ ወይ ወነንቲ መሰል ዋንነት ቡትስትራፕ ተሓተትቲ ግበር
• ዝኾነ ቁራጽ ቡትስትራፕ ብዘይ ግቡእ ምምስሳል ዳግማይ ምዝርጋሕ
• ትዊተር ንዝርግሐኻ ከም ዝድግፍ ብዝኾነ ይኹን መንገዲ ትዊተር ዝውነን ምልክት ተጠቐም
• ዝኾነ ይኹን ብትዊተር ዝውነን ምልክት፡ ነቲ ኣብ ሕቶ ዘሎ ናይ ትዊተር ሶፍትዌር ከም ዝፈጠርካዮ ዝገልጽ ወይ ዘመልክት ብዝኾነ መንገዲ ተጠቐም

ኣይጠልበካን እዩ፤

• ምንጪ ናይ ቡትስትራፕ ባዕሉ፡ ወይ ዝኾነ ኣብ ልዕሊኡ ዝገበርካዮ ምምሕያሻት፡ ኣብ ዝኾነ ንዕኡ ዘጠቓልል ክትእክቦ እትኽእል ዳግመ-ምክፍፋል ኣካትት።
• ኣብ ቡትስትራፕ ዝገበርካዮ ለውጢ ናብ ፕሮጀክት ቡትስትራፕ ምምላስ (ዋላ እኳ ከምዚ ዓይነት ግብረ መልሲ እንተተባባዕ)

ምሉእ ፍቓድ ቡትስትራፕ ኣብ መኽዘን ፕሮጀክት ንዝያዳ ሓበሬታ ይርከብ።

ትርጉማት

ኣባላት ማሕበረሰብ ንናይ ቡትስትራፕ ሰነዳት ናብ ዝተፈላለዩ ቋንቋታት ተርጒሞምዎ ኣለዉ። ብወግዒ ዝድገፍ የለን ኩሉ ግዜ እዋናዊ ዘይክኸውን ይኽእል እዩ።

• ቡትስትራፕ 中文文档 (ቻይናዊ)
• ቡትስትራፕ på ዳንስክ (ዴንማርክ)
• ቡትስትራፕ ኤን ፍራንቸስ (ፈረንሳዊ)
• ቡትስትራፕ ኣውፍ ዶች (ጀርመናዊ)
• ቡትስትራፕ ብቋንቋ ኢጣልያኖ (ጣልያንኛ)
• ቡትስትራፕ 한국어 (ኮርያዊ)
• Bootstrap em Português do Brasil (ብራዚላዊ ፖርቱጋልኛ)
• ቡትስትራፕ по-русски (ሩስያዊ)
• ቡትስትራፕ ኤን ስፓኒሽ (ስጳንኛ)
• Türkçe ቡትስትራፕ (ቱርካዊ)
• ቡትስትራፕ українською (ዩክሬናዊ)
• ቡትስትራፕ bằng tiếng Việt (ቬትናማዊ)

ትርጉማት ኣብ ምውዳብ ወይ ምእንጋድ ኣይንሕግዝን ኢና፡ ምስኦም ጥራይ ኢና ንተሓሓዝ።

ሓድሽ ወይ ዝሓሸ ትርጉም ወዲእካ? ኣብ ዝርዝርና ንምውሳኽ ናይ ስሕበት ሕቶ ክፈት።