ምጅማር · ቡትስትራፕ ብቋንቋ ትግርኛ

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

ቡትስትራፕ

ሲኤስኤስ፡ ጃቫስክሪፕትን ቅርጺ ፊደላትን ኣጠቓሊሉን ኣጉዲሉን። ዝኾነ ዶክስ ወይ ኦርጅናል ምንጪ ፋይላት ኣይተሓወሶን።

ቡትስትራፕ ኣውርድ

ምንጪ ኮድ

ምንጪ ውሑድ፡ ጃቫስክሪፕት፡ ከምኡ’ውን ቅርጺ ፋይላት፡ ምስ ዶክስና ። Less compilerን ገለ setupን የድልዮ።

ምንጪ ኣውርድ

ሳስ

ቡትስትራፕ ካብ Less ናብ Sass ተሰጋጊሩ ኣብ Rails, Compass, ወይ Sass-only ፕሮጀክትታት ብቐሊሉ ንኽካተት ተገይሩ።

Download ሳስ ዝብል ጽሑፍ ኣሎ።

ቡትስትራፕ ሲዲኤን

እቶም ኣብ jsDelivr ዘለዉ ሰባት ብጸጋ ንናይ Bootstrap CSSን JavaScriptን CDN ደገፍ ይህቡ። በቃ ነዞም Bootstrap CDN ዝበሃሉ ሊንክታት ተጠቐሙ።

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 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ና ተዋሃሂዱ ስለዘሎ፡ ብዛዕባ እዚ ምጭናቕ ኣየድልየኩምን እዩ።

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

jQuery የድሊ

ኩሎም ናይ ጃቫስክሪፕት ፕላጊናት jQuery ክሕወስ ከም ዘድልዮም ኣስተውዕል ፣ ከምቲ ኣብቲ ናይ መጀመርታ ቅጥዒ ዝርአ ። ኣየኖት ስሪት ናይ jQuery ከም ዝድገፉ ንምርኣይ ናትና ተወከሱ ።bower.json

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

ምስ ወረድና ነቲ ዝተጸቕጠ ፎልደር ንፈትሖ እሞ ኣቃውማ ናይ (እቲ ዝተጠርነፈ) 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 ኣቢልካ ንናይ ምዕባለ ጽግዕተኛታት ንምምሕዳር ዝሕግዝ መንገዲ እዩ።

ድሕሪኡ፡ ካብ መስመር ትእዛዝ፤

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

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

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

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

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

`grunt watch`(ተመልከት)

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

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

JSHint የካይድን ኣብ PhantomJS ርእሲ ዘይብሉ ናይ 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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></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 ክትከታተሉ ትኽእሉ ኢኹም ፡ እዋናዊ ሕሜታን ዘደንቑ ሙዚቃዊ ቪድዮታትን ንምርካብ።

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

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

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

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

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

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

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

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

ዝድገፉ ዳህሰስቲ

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

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

ሞባይል መሳርሒታት

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

	ክሮም ዝበሃል ምዃኑ’ዩ።	ፋየርፎክስ	ሳፋሪ
ኣንድሮይድ	ዝድገፍ እዩ።	ዝድገፍ እዩ።	N/A
iOS ዝበሃል ትካል እዩ።	ዝድገፍ እዩ።	ዝድገፍ እዩ።	ዝድገፍ እዩ።

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

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

	ክሮም ዝበሃል ምዃኑ’ዩ።	ፋየርፎክስ	ኢንተርነት ኤክስፕሎረር	ኦፔራ	ሳፋሪ
ማክ ዝበሃል ትካል እዩ።	ዝድገፍ እዩ።	ዝድገፍ እዩ።	N/A	ዝድገፍ እዩ።	ዝድገፍ እዩ።
ዊንዶውስ	ዝድገፍ እዩ።	ዝድገፍ እዩ።	ዝድገፍ እዩ።	ዝድገፍ እዩ።	ኣይድገፍን እዩ።

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

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

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

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

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

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

መለለዩ	ኢንተርነት ኤክስፕሎረር 8	ኢንተርነት ኤክስፕሎረር 9
`border-radius`	ኣይድገፍን እዩ።	ዝድገፍ እዩ።
`box-shadow`	ኣይድገፍን እዩ።	ዝድገፍ እዩ።
`transform`	ኣይድገፍን እዩ።	ዝድገፍ፣ ምስ `-ms`ቅድመ-ጥብቆ
`transition`	ኣይድገፍን እዩ።
`placeholder`	ኣይድገፍን እዩ።

ንዝርዝር ሓበሬታ ብዛዕባ ናይ መርበብ ሓበሬታ ደገፍ ናይ 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-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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ክፍሊ ድማ እቲ መላግቦ ሓንሳብ ትኹረት ምስ ተገብረሉ (ንዓይኒ ዘለዎም ተጠቀምቲ ሰሌዳ ቁልፊ) ርኡይ ምዃኑ ከረጋግጽ እዩ።

ብሰንኪ ነዊሕ ዝጸንሐ ጉድለታት/ስሕተታት ኣብ Chrome ( ኣብ Chromium bug tracker ሕታም 262171 ርአ ) ከምኡ’ውን ኢንተርነት ኤክስፕሎረር (ነዚ ጽሑፍ ብዛዕባ ኣብ ውሽጢ ገጽ ዝርከቡ መላግቦታትን ትኹረት ቅደም ተኸተልን ርአ)፡ ዕላማ ናይቲ ዝዘለለ መላግቦኻ ምዃኑ ከተረጋግጽ ከድልየካ እዩ። ብምውሳኽ ብውሑዱ ብፕሮግራም ትኹረት ዝገብር tabindex="-1".

ብተወሳኺ፡ ኣብቲ ዕላማ ዝርአ ምልክት ትኹረት ብግልጺ ክትዓብጦ ትኽእል ኢኻ (ብፍላይ ኣብዚ እዋን’ዚ Chrome’ውን ትኹረት ኣብ ባእታታት ምስ tabindex="-1"ብማውስ ክጥወቑ ከለዉ የቐምጥ) ብ #content:focus { outline: none; }።

እዚ ስሕተት እዚ ንዝኾነ ካልእ መርበብ ሓበሬታኻ ክጥቀመሉ ዝኽእል ናይ ውሽጢ ገጽ መላግቦታት እውን ከም ዝጸልዎ ኣስተውዕል፣ እዚ ድማ ንተጠቀምቲ ሰሌዳ ቁልፊ ዘይጠቅም ይገብሮም እዩ። ንኹሎም ካልኦት ከም ዕላማ መላግቦ ዝሰርሑ ዝተሰምዩ መልህቕ / መለለዪ ቁንጣሮ ተመሳሳሊ ናይ ደውታ-ሃጓፍ መአረምታ ምውሳኽ ኣብ ግምት ከተእቱ ትኽእል ኢኻ።

<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 )። እዚ ድማ ትሑት ምርኣይ ንዘለዎም ወይ ድማ ሕብሪ ዘይብሎም ተጠቀምቲ ጸገም ከስዕብ ይኽእል። እዞም ነባሪ ሕብርታት ንጽጽርኦምን ተነባብነቶምን ንምዕባይ ምቕያር ከድልዮም ይኽእል እዩ።

ተወሳኺ ጸጋታት

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

ንሱ ድማ፤

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

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

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

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

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

ኣይጠልበካን እዩ፤

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

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

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

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

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

ምጅማር ስራሕ

ምውራድ