Internet atanga thil lachhawng

Bootstrap (tuna v3.4.1) hian rang taka tan theihna kawng awlsam tlemte a nei a, pakhat zel hian skill level leh use case hrang hrangah a hip thei a ni. I mamawh bikte nena inmil tur chu chhiar chhuak rawh.

jsDelivr a ni

jsDelivr -a folks over te chuan khawngaihnain Bootstrap-a CSS leh JavaScript CDN support an pe a. Heng jsDelivr link te hi hmang mai rawh.

<!-- 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 nen install rawh

Bootstrap-a Less, CSS, JavaScript, leh fonts te chu Bower hmangin install leh enkawl theih a ni bawk :

bower install bootstrap

npm hmangin install rawh

Bootstrap pawh npm hmangin i install thei bawk :

npm install bootstrap@3

require('bootstrap')Bootstrap-a jQuery plugin zawng zawng chu jQuery object-ah a load vek ang. Module bootstrapngei pawh hian engmah a export lo. /js/*.jsBootstrap-a jQuery plugins te chu package-a top-level directory hnuaia file awmte load-in pakhat zel manual-in i load thei ang .

Bootstrap’s package.jsonah hian a hnuaia key te hnuaiah hian metadata dang thenkhat a awm a:

• less- Bootstrap-a Less source file bulpui ber panna kawng
• style- Bootstrap-a non-minified CSS default settings hmanga precompiled tawh kalna kawng (customization awm lo)

Composer hmangin install rawh

Bootstrap-a Less, CSS, JavaScript, leh fonts te chu Composer hmangin install leh enkawl theih a ni bawk :

composer require twbs/bootstrap

Less/Sass tan Autoprefixer hman a ngai a ni

Bootstrap hian Autoprefixer hmangin CSS vendor prefix te a buaipui thin . Bootstrap hi a Less/Sass source atanga i compile a, kan Gruntfile i hmang lo a nih chuan Autoprefixer hi i build process ah nangmah ngeiin i integrate a ngai ang. Precompiled Bootstrap i hmang emaw kan Gruntfile i hmang emaw a nih chuan Autoprefixer hi kan Gruntfile ah hian a inzawm tawh avangin he thil hi i ngaihtuah a ngai lo.

Eng nge a tel

Bootstrap hi form hnih a download theih a, a chhungah hian a hnuaia directory leh file te hi i hmu ang a, common resources te chu logically grouping in compiled leh minified variation te a pe thei ang.

Bootstrap chu a lo awm tawh a

Download zawh chuan compressed folder chu unzip la, (a compiled) Bootstrap structure chu i hmu ang. Hetiang hi i hmu ang:

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

Hei hi Bootstrap form bulpui ber a ni: web project eng pawha rang taka drop-in hman theihna tur precompiled files. Compiled CSS leh JS ( ) kan pe a bootstrap.*, chubakah compile leh minified CSS leh JS ( bootstrap.min.*) te pawh kan pe bawk. CSS source maps ( bootstrap.*.map) hi browser thenkhat developer tools nena hman theih a ni. Glyphicons atanga fonts te pawh a awm a, chutiang bawkin optional Bootstrap theme pawh a tel bawk.

Bootstrap a source code a ni

Bootstrap source code download-ah hian CSS, JavaScript leh font assets te, source Less, JavaScript leh documentation te pawh a awm a. A bik takin, a hnuaia mi leh thil dang tam tak a huam a ni:

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

, less/, js/leh fonts/te hi kan CSS, JS, leh icon font (a hnuaia mi ang hian) source code a ni. Folder ah hian dist/a chunga precompiled download section-a tarlan zawng zawng a awm vek a. Folder ah hian docs/kan documentation atana source code te, leh examples/Bootstrap hman dan tur te a awm bawk. Chumi piah lamah chuan file dang dah tel apiangin package, license information leh development te tanpuina a pe a ni.

CSS leh JavaScript te compile a ni

Bootstrap hian a build system atan Grunt a hmang a, framework nena hnathawh dan awlsam tak tak a awm bawk. Kan code kan compile dan te, test kan run dan te, leh thil dang tam tak kan tih dan te a ni.

Grunt install mek a ni

Grunt install tur chuan node.js (npm pawh a tel) download la, install hmasa phawt ang che. npm hi node packaged module tihna a ni a, node.js hmanga development dependencies enkawl dan a ni.

1. grunt-cliKhawvel pum huapin install rawh npm install -g grunt-cli.
2. Root /bootstrap/directory ah kal la, chutah chuan run rawh npm install. npm chuan file chu a en ang a, package.jsonchutah chuan local dependencies mamawh list te chu automatic in a install ang.

A zawh chuan command line atanga Grunt command hrang hrang pek te chu i run thei tawh ang.

Grunt command awm thei te

grunt dist(CSS leh JavaScript compile mai rawh)

/dist/CSS leh JavaScript file compiled leh minified te hmangin directory chu a siam thar leh thin . Bootstrap hmangtu angin hei hi a tlangpuiin i duh ang command a ni.

grunt watch(Thlir)

Less source files te a en a, i save apiangin CSS ah automatic in a recompile leh thin.

grunt test(Test te tlan rawh)

JSHint a run a, Karma vangin browser tak takah QUnit tests a run bawk.

grunt docs(Docs assets te chu siam & test rawh)

CSS, JavaScript, leh assets dangte chu a siam a, a test a, chu chu documentation local-a kalpui huna hman thin chu via bundle exec jekyll serve.

grunt(Engkim vek siam la, test run rawh)

CSS leh JavaScript te a compile a, a ti tlem a, documentation website a siam a, docs te nen HTML5 validator a run a, Customizer assets te a regenerate a, a dang tam tak a siam bawk. Jekyll a mamawh a ni . A tlangpuiin Bootstrap ngeia i hack a nih chauhvin a ngai thin.

Harsatna chinfel dan

Depencies install emaw Grunt command run emaw-a harsatna i tawh chuan /node_modules/npm-in a siam directory kha delete hmasa phawt ang che. Tichuan, rerun npm installrawh .

Template bulpui ber

He HTML template bulpui hmang hian tan la la, a nih loh leh heng entirnan te hi siam danglam rawh . Kan template leh entirnan te hi i duh angin i siam danglam ngei kan beisei.

A hnuaia HTML hi copy la, Bootstrap document tlem ber hmanga hnathawh tan rawh.

<!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>

Entirna te

A chunga basic template hi Bootstrap-a component tam tak hmangin siam rawh. I project pakhat zel mamawh ang zela Bootstrap chu i duh angin siam la, i siam danglam turin kan fuih a che.

A hnuaia entirnan source code zawng zawng chu Bootstrap repository download la . Entirna chu docs/examples/directory ah hian kan hmu thei ang.

Framework hmangin

Starter template a ni

Basics tih loh chu engmah a awm lo: container nen CSS leh JavaScript compiled.

Bootstrap tih thupui hmangin

Optional Bootstrap theme chu load la, hmuhnawm tak i hmu thei ang.

Grids te a awm

Tier pali zawng zawng nei grid layout entir tam tak, nesting leh a dangte.

Jumbotron a ni

Jumbotron vel chu navbar leh basic grid column thenkhat hmangin siam rawh.

Jumbotron tawi tak a ni

Default container leh jumbotron te tihtlem hmangin custom page tam zawk siam rawh.

Navbars te chu action ah an awm

Navbar a ni

Super basic template ah chuan navbar bakah additional content thenkhat a awm bawk.

Static chunglam navbar

Super basic template ah chuan static top navbar a awm a, chutah chuan additional content thenkhat a awm bawk.

Navbar tihfel a ni

Super basic template ah chuan fixed top navbar a awm a, chutah chuan additional content thenkhat a awm bawk.

Custom components te pawh a awm bawk

Khuh

Home page awlsam leh mawi tak tak siamna tur phek khata sei template.

Carousel hmanga siam a ni

Navbar leh carousel chu customize la, chutah chuan component thar thenkhat dah la.

Blog a ni

Column pahnih nei blog layout awlsam tak, custom navigation, header, leh type te a awm bawk.

Dashboard ah a awm

Admin dashboard atana structure bulpui ber, sidebar leh navbar fixed a awm.

Sign-in tur a ni

Form layout leh design awlsam tak atan form in form siam theih a ni.

A dikna chanvo nav

Link dik tak awmna custom navbar siam rawh. Lu a ti sang a! Safari friendly lutuk lo.

A sticky footer a ni

Viewport hnuai lamah a content a tawi zawk chuan footer dah la.

Footer sticky tak leh navbar

Viewport hnuai lamah footer dah la, a chung lamah fixed navbar dah rawh.

Experiment hrang hrang te

A chhang thei lo Bootstrap

Kan docs angin Bootstrap responsiveness awlsam takin disable rawh .

Off-canvas a ni

Bootstrap nena hman tur off-canvas navigation menu toggleable siam rawh.

Hmanrua

Bootlint a ni

Bootlint hi Bootstrap HTML linter tool official a ni a, a hman dan tur pawh a inang lo hle. Bootstrap hmang mek webpage-a HTML tihsual tlanglawn engemaw zat chu "vanilla" takin a check nghal vek a ni. Vanilla Bootstrap-a component/widget te hian DOM a an part te chu structure thenkhat nena inmil turin a mamawh a ni. Bootlint hian Bootstrap component instance hrang hrangah HTML dik taka siam a nih leh nih loh a enfiah thin. I Bootstrap web development toolchain-ah Bootlint dah belh hi ngaihtuah la, chutiang chuan tihsual tlanglawn pakhat mah hian i project hmasawnna a tikhawtlai lo ang.

Khawtlang

Bootstrap siam dan tur hriat reng la, heng thil \angkai tak tak hmang hian khawtlang hnenah thlen rawh.

• The Official Bootstrap Blog hi chhiar la, subscribe rawh .
• irc.freenode.netServer -ah IRC hmangin Bootstrapper puite nen inbiakna nei la , ##bootstrap channel-ah .
• Bootstrap hman dan tur tanpui duh chuan tag hmangin StackOverflow ah zawt rawhtwitter-bootstrap-3 zawt rawh .
• Developer te chuan npmbootstrap hmanga distribute an tih hunah Bootstrap functionality modify emaw add emaw package-ah keyword hi an hmang tur a ni emaw a ang chi delivery mechanism
• Bootstrap Expo ah hian Bootstrap hmanga mi in sak dan entirnan inspiring tak tak zawng rawh .

Twitter-ah @getbootstrap hi i follow thei bawk a , thuthang thar leh music video mak tak tak i hmu thei bawk.

Responsive theihna tihtawp

Bootstrap hian i page te chu screen size hrang hrang atan a siam danglam nghal vek a ni. Hetah hian he feature hi disable dan tur chu i page hian he non-responsive example ang hian a thawk thei ang .

Page responsiveness tihtawp dan tur

1. CSS docs<meta> -a kan sawi tawh viewport kha paih chhuak rawh
2. Override the widthon the .containerfor each grid tier with a single width, entirnan width: 970px !important;Hei hi default Bootstrap CSS hnuah a lo thleng tih chian rawh. I duh duhin !importantmedia zawhna emaw selector-fu thenkhat emaw chu i pumpelh thei bawk.
3. Navbars i hman chuan navbar collapsing leh expanding behavior zawng zawng paih vek tur a ni.
4. Grid layout atan chuan .col-xs-*class te bakah, a aiah emaw, medium/large te hmang la. Ngaihtuah buai suh, extra-small device grid hian resolution zawng zawngah a scale vek a ni.

IE8 atan Respond.js i la mamawh dawn a ni (kan media query te hi a la awm a, process a ngai a ni). Hei hian Bootstrap a "mobile site" aspects te chu a titawp a ni.

Bootstrap template chu a chhanna tihtawp a ni

Heng step te hi entirnan kan hmang ta a ni. A source code chhiar la, a bik taka tihdanglamna kalpui dan tur chu i hmu ang.

Non-responsive entirnan en rawh

Browser leh device hmanga support theih a ni

Bootstrap hi desktop leh mobile browser thar ber bertea a thawk tha ber tura siam a ni a, chu chu browser hlui zawkte chuan component thenkhat rendering style danglam tak, fully functional mahse, an lantir thei tihna a ni.

Browser supported te pawh a awm bawk

A bik takin, a hnuaia browser leh platform hrang hrangte version thar ber berte kan support a ni.

WebKit, Blink, Gecko version thar ber hmang browser dang, direct emaw, platform-a web view API hmang emaw pawh nise, chiang taka support a ni lo. Mahse, Bootstrap hian (a tam zawkah chuan) heng browser-ah hian a lantir dik tur a ni a, a thawk tha tur a ni bawk. Support information chiang zawk chu a hnuaiah hian tarlan a ni.

Mobile hmanrua te

A tlangpuiin Bootstrap hian platform lian tinte default browser version thar ber ber a support a ni. Proxy browser (Opera Mini, Opera Mobile-a Turbo mode, UC Browser Mini, Amazon Silk ang chi) te hi a support lo tih hre reng ang che.

Desktop hmanga browser te pawh a awm bawk

Chutiang bawkin desktop browser tam zawk version thar ber ber pawh a support bawk.

Windows ah chuan Internet Explorer 8-11 kan support a.

Firefox tan chuan normal stable release thar ber bakah Extended Support Release (ESR) thar ber pawh kan support bawk. version thar ber pawh kan support bawk.

Unofficial-ah chuan Bootstrap hi Chromium leh Chrome for Linux, Firefox for Linux, leh Internet Explorer 7 bakah Microsoft Edge-ah te pawh official taka support ni lo mah se, a hmel leh a che tha tawk tur a ni.

Bootstrap-in a hmachhawn tur browser bug thenkhat list chu kan Wall of browser bugs ah hian en la .

Internet Explorer 8 leh 9 ah te a awm a

Internet Explorer 8 leh 9 te pawh hi a support a, mahse, CSS3 property thenkhat leh HTML5 element thenkhat hi heng browser te hian an support kim lo tih hre reng ang che. Tin, Internet Explorer 8 hian media query support theihna turin Respond.js hman a ngai bawk.

CSS3 leh HTML5 features browser support chungchang chipchiar zawka hriat duh chuan Can I use... ah hian lut la .

Internet Explorer 8 leh Respond.js te a awm bawk

Internet Explorer 8 tana i development leh production environment-a Respond.js i hman hunah a hnuaia caveat te hi fimkhur rawh.

Respond.js leh cross-domain CSS te a awm bawk

Respond.js hi (sub)domain dang (entir nan, CDN-a) host-a CSS hman tur chuan setup dang engemaw zat a ngai a ni. A chipchiar zawkna chu Respond.js docs ah hian en rawh .

Respond.js lehfile://

Browser security rules avang hian Respond.js hian file://protocol hmanga page en (local HTML file hawn ang chi) te nen a thawk thei lo. IE8-a responsive features test tur chuan HTTP(S) hmangin i page te chu en la. A chipchiar zawkna chu Respond.js docs ah hian en rawh .

Respond.js leh@import

Respond.js hian CSS hmanga reference a nih chuan a thawk thei lo @import. A bik takin Drupal configuration thenkhatah chuan @import. A chipchiar zawkna chu Respond.js docs ah hian en rawh .

Internet Explorer 8 leh box-sizing te pawh a awm bawk

IE8 hian box-sizing: border-box;, min-width, max-width, min-heightemaw max-height. Chuvang chuan v3.0.1 atang max-widthkhan .containers.

Internet Explorer 8 leh @font-face hmangin a rawn lang ang

IE8 hian issue engemaw zat a nei a @font-face, :before. Bootstrap hian chu combination chu a Glyphicons nen a hmang a. Page pakhat chu cach a nih a, window chungah mouse tel lovin load a nih chuan (chu chu refresh button hit emaw iframe-a thil load emaw a nih chuan) font load hmain page chu rendered a ni. Page (body) chungah i hover chuan icon thenkhat a rawn lang ang a, icon dang chungah i hover chuan chutiang bawk chu a rawn lang ang. A chipchiar zawkna chu issue #13863 en rawh .

IE Compatibility modes te pawh a awm bawk

Internet Explorer compatibility mode hluiah chuan Bootstrap hi a support lo. IE tana rendering mode thar ber i hmang tih chian nan, <meta>i page-ah tag dik tak dah tel tum ang che:

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

Debugging tools hawngin document mode chu nemnghet rawh: F12"Document Mode" kha hmet la, check rawh.

He tag hi Bootstrap-a documentation leh entirnan zawng zawngah dah vek a ni a, chu chu Internet Explorer supported version tinah rendering tha ber a nih theih nan a ni.

Hriat belh duh chuan he StackOverflow zawhna hi en la .

Internet Explorer 10 ah hian Windows 8 leh Windows Phone 8 ah te hman theih a ni

Internet Explorer 10 hian device width leh viewport width a thliar hrang lo va , chuvangin Bootstrap-a CSS-a media query te chu a apply tha lo hle. A tlangpuiin hei hi siamthat nan CSS snippet rang tak i dah mai ang:

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

Mahse, hei hian Update 3 (aka GDR3) aia Windows Phone 8 version hlui zawk hmang device-te tan chuan a thawk thei lo a , chutiang device-te chuan "phone" view tawi tak ai chuan a tam zawk chu desktop view a lantir a ni. Hei hi chinfel tur chuan a hnuaia CSS leh JavaScript te hi i dah tel a ngai ang a, chu chuan bug chu a titawp ang .

@-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)
}

Hriat belh duh leh hman dan tur kaihhruaina hriat duh chuan Windows Phone 8 leh Device-Width te chhiar la .

Heads up angin Bootstrap documentation leh entirnan zawng zawngah hei hi entir nan kan dah tel vek a ni.

Safari za zela rounding a ni

OS X tan v7.1 hmaa Safari version leh iOS v8.0 tan Safari version te rendering engine khan kan .col-*-1grid class-a decimal place hman zat chungchangah harsatna engemaw zat a nei a. Chuvangin grid column hrang hrang 12 i neih chuan column row dang nena khaikhin chuan an rawn lang tawi hle tih i hmu ang. Safari/iOS upgrade bakah hian workaround tur option thenkhat i nei bawk:

• I grid column hnuhnung berah khan dah la .pull-right, hard-right alignment i hmu ang
• Safari tana rounding tha ber hmuh theih nan i percentage te chu manual-in tweak la (option hmasa aiin a harsa zawk)

Modal, navbar, leh virtual keyboard te pawh a awm bawk

Overflow leh scroll a awm bawk

overflow: hiddeniOS leh Android ah chuan on the element support <body>hi a tlem hle. Chumi atân chuan, chu device-a browser pahnih zinga pakhata modal chung lam emaw, hnuai lam emaw i scroll paltlang chuan, a <body>thuziak chu a scroll ṭan ang. Chrome bug #175502 ( Chrome v40-ah siamthat a ni) leh WebKit bug #153852 en rawh.

iOS text field leh scroll a awm bawk

iOS 9.3 atang khan modal hawn laiin scroll gesture initial touch chu textual <input>emaw a boundary chhungah a awm a nih <textarea>chuan <body>modal hnuaia content awm chu modal ngei ni lovin scroll a ni ang. WebKit bug #153856 ah hian en rawh .

Virtual keyboard hmanga siam a ni

Tin, fixed navbar i hman emaw, modal chhunga input i hman emaw chuan iOS hian rendering bug a nei a, chu chuan virtual keyboard trigger a nih hunah fixed elements awmna hmun a update lo tih hre bawk ang che. Chumi atana workaround tlemte chu i elements te chu focus-a transform position: absoluteemaw, timer on focus emaw invoke emaw, positioning chu manual-a siam\hat tum emaw a ni. Hei hi Bootstrap hian a buaipui lo a, chuvangin i application tana solution tha ber tur chu nangmahin i ngaihtuah tur a ni.

Navbar a rawn tla thla thei

.dropdown-backdropz-indexing a buaithlak em avangin nav-ah iOS-ah element hi hman a ni lo . Chutiang chuan, navbar-a dropdowns khar tur chuan dropdown element (or element dang eng pawh iOS-a click event fire thei tur ) chu direct-in i click tur a ni.

Browser a zoom theih

Page zooming hian component thenkhatah rendering artifact a rawn present ngei ang, Bootstrap leh web dang zawng zawngah pawh. Issue a zirin kan siam tha thei mai thei (search hmasa la, a tul chuan issue hawng rawh). Mahse, hengte hi kan ngaihthah fo thin a, hacky workaround tih loh chu direct solution dang an neih loh fo avangin.

Sticky :hover/ :focusmobile ah a awm

Touchscreen tam zawkah chuan real hovering awm thei lo mah se, mobile browser tam zawk chuan hovering support an emulate a, :hover"sticky" an siam a ni. Phên dangin sawi ila, :hoverstyles te hi element pakhat a tap hnuah a apply tan a, user-in element dang a tap hnuah chauh a apply tawp mai a ni. Hei hian Bootstrap :hoverstate te chu chutiang browser-ah chuan duh loh takin a "stuck" thei a ni. Mobile browser thenkhat :focuspawhin chutiang bawk chuan sticky an siam bawk. Tunah hian heng thilte hi chutiang style te chu paih vek mai loh chu workaround awlsam tak a awm lo.

Printing tih a ni

Tunlai browser thenkhatah pawh printing hi a quirky thei hle.

A bik takin, Chrome v32 atang khan leh margin setting eng pawh ni se, Chrome hian webpage print laiin media query a chinfel hunah physical paper size aiin viewport width a tawi zawk hle. Hei hian Bootstrap-a extra-small grid chu print laiin beisei loh takin a activate thei a ni. A chipchiar zawkna chu issue #12078 leh Chrome bug #273306 ah te en la. Hnathawh dan tur rawtna:

• Extra-small grid chu pawm la, a hnuaiah i page chu pawm theiha lang turin siam rawh.
• @screen-*I printer paper chu extra-small aiin a lian zawka ngaih a nih theih nan Less variable value te chu customize rawh.
• Print media tan chauh grid size breakpoint thlak danglam turin custom media query te add ang che.

Tin, Safari v8.0 atang khan fixed-width .containers hian Safari chu print laiin font size tlemte danglam tak a hmang thei bawk. A chipchiar zawkna chu # 14868 leh WebKit bug #138192 ah te en la. Chumi atana workaround awm thei pakhat chu a hnuaia CSS te hi dah belh hi a ni:

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

Android stock browser ah a awm a

Out of the box, Android 4.1 (leh release thar thenkhat pawh nise) chu Browser app nen hian default web browser duh ber atan an rawn thawn a (Chrome nen a danglam hle). Vanduaithlak takin Browser app hian bug tam tak a nei a, CSS a tlangpuiin inmil lohna a nei bawk.

Menu te thlang rawh

Element -ah <select>chuan Android stock browser hian side controls a awm border-radiusleh/ emaw borderhman a nih chuan a rawn tarlang dawn lo. (A chipchiar zawkna chu he StackOverflow zawhna hi en la .) A hnuaia code snippet hmang hian CSS tichhe thei chu paih la, <select>Android stock browser-ah as an unstyled element render rawh. User agent sniffing hian Chrome, Safari, leh Mozilla browser te a tibuai lo.

<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>

Entirna hmuh i duh em? He JS Bin demo hi lo en ve teh.

Validators te an ni

Browser hlui leh buggy te tana experience tha ber pek theih nan Bootstrap hian hmun engemaw zatah CSS browser hack hmangin browser version thenkhatah special CSS target a siam a, chu chu browser-a bug awmte ngei pawh a tihbo theih nan a ni. Heng hack te hian hriatthiam theih takin CSS validator te chu an dik lo tih an sawisel thin. Hmun pahnih khatah chuan bleeding-edge CSS features kan hmang bawk a, chu chu fully standardized a la ni lo a, mahse hengte hi progressive enhancement atan chauh hman a ni.

Kan CSS-a non-hacky portion hian fully validate a nih avangin heng validation warning te hi practice-ah a pawimawh lo a, hacky portion te hian non-hacky portion hnathawh dan dik a tibuai lo a, chuvang chuan heng warning bikte hi tumruh taka kan ngaihthah chhan a ni.

Kan HTML docs pawh hian Firefox bug engemaw tak workaround kan dah tel avangin HTML validation warning tlemte leh pawimawh lo tak tak a nei a

Third party thlawpna a ni

Official takin third party plugin emaw add-ons emaw kan support loh laiin, i project-a harsatna awm thei tur venna atan thurawn \angkai tak tak kan pe a ni.

Box-sizing a ni

Third party software thenkhat, Google Maps leh Google Custom Search Engine te pawhin Bootstrap nen an inhnial a * { box-sizing: border-box; }, chuvang chuan , chutianga siamtu dan chuan paddingelement pakhat final computed width a nghawng lo. Box model leh sizing chungchang hi CSS Tricks ah hian zir belh rawh .

Context a zirin, a tul angin i override thei (Option 1) emaw, region pum pui tana box-sizing chu i reset thei bawk (Option 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();
}

A thlen theihna tur

Bootstrap hian web standard hman tlanglawn tak tak a zawm a,—extra effort tlemte chauh hmangin— AT hmangtute tana hman theih tur site siam nan a hmang thei bawk bawk.

Navigation chu skip rawh

I navigation-ah hian link tam tak a awm a, DOM-a thupui ber hmaah a lo awm a nih chuan, Skip to main contentnavigation hmain link dah belh rawh (a hrilhfiahna awlsam tak atan he A11Y Project article hi skip navigation links chungchang hi en la ). Class hman hian .sr-onlyskip link chu hmuh theihin a thup ang a, .sr-only-focusableclass chuan link chu focus a nih veleh hmuh theih a nih theih nan a enkawl ang (keyboard hmangtu mit nei tan).

<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>

Nested headings te a awm

Headings ( <h1>- <h6>) i nesting hunah i primary document header chu <h1>. A hnuaia heading-te hian a dik taka hman tur a ni <h2>- <h6>chutiang chuan screen reader-te chuan i page-te tana table of contents an siam thei ang.

HTML CodeSniffer leh Penn State-a AccessAbility -ah te zir belh rawh .

Color hrang hrang a awm

Tunah hian Bootstrap-a default color combination awm ṭhenkhat ( styled button class hrang hrang, basic code block- a hman ṭhin code highlighting color ṭhenkhat , contextual .bg-primary background helper class, leh white background-a hman a nih chuan default link color ang chi) contrast ratio hniam tak nei ( 4.5:1 ratio rawt aia hniam ). Hei hian mitdel emaw, color blind emaw hmangtute tan harsatna a thlen thei a ni. Heng default color te hi an contrast leh legibility tihpun nan siam danglam a ngai mai thei.

Resources dangte pawh a awm bawk

• Accessibility chungchanga harsatna awmte hriat theihna tur "HTML Codesniffer" bookmarklet
• Chrome hian Accessibility Developer Tools a hmang a, a hman dan tur pawh a inang lo hle
• Color Contrast Analyzer hmanga siam a ni
• A11Y Project chu a ni
• MDN hman theihna tur documentation

License chungchanga zawhna leh chhanna

Bootstrap hi MIT license hnuaiah tihchhuah a ni a, copyright 2019 Twitter a ni. Chunks tenau zawka boiled down a nih chuan a hnuaia condition hmang hian sawifiah theih a ni.

A mamawh a ni:

• I hnathawhnaah i hman hunah Bootstrap-a CSS leh JavaScript file-a license leh copyright hriattirna te chu dah tel reng ang che

A phalsak che a ni:

• Bootstrap hi a pum pui emaw, a then emaw, mimal, mimal, company chhung, emaw sumdawnna atana hman tur atan zalen takin download la, hmang rawh
• I siam package emaw distribution emaw ah Bootstrap hmang thin ang che
• Source code chu siam danglam rawh
• Bootstrap chu license-a tel lo third party-te hnena siam danglam leh sem chhuah theihna tur sublicense pe rawh

A khap che a ni:

• Bootstrap hi warranty nei lovin pek a nih avangin a ziaktu leh license neitute chu chhiatna thlengah mawhphurtuah puh rawh
• Bootstrap siamtu emaw copyright neitute emaw chu mawhphurtuah puh rawh
• Bootstrap piece eng pawh attribution dik tak awm lovin redistribute theih a ni
• Twitter-in i sem chhuah a thlawp tih emaw, Twitter-in a thlawp tih emaw sawina emaw, a lantir theihna tur emaw, Twitter-in a neih mark eng pawh hmang rawh
• Twitter-in a neih mark eng pawh hmang la, Twitter software sawi tur chu i siam tih emaw, a lantir emaw theihna tur kawng engkimah hmang ang che

A tih tur a ni lo:

• Bootstrap source ngei pawh, emaw, a tihdanglamna i neihte pawh, a telna redistribution i assemble theih apiangah telh bawk ang che
• Bootstrap-a i tihdanglamte chu Bootstrap project-ah submit leh rawh (chutiang feedback chu fuih ni mah se)

Bootstrap license kimchang chu project repository-ah a awm a , hriat belh duh tan a awm bawk.

Lehlin te

Khawtlang mipuiten Bootstrap-a documentation te hi tawng hrang hrangah an letling a. Official-a thlawp an awm lo va, an update reng lo mai thei bawk.

• A rilru a buai em em a, a rilru a hah em em bawk a. 中文文档 (Chinese)
• Bootstrap på Dansk (Danish tawng) a ni a, a man pawh a tlawm hle.
• Bootstrap en Français (French tawng) a ni a, a man pawh a tlawm hle.
• Bootstrap auf Deutsch (German tawng) a ni a, a man pawh a tlawm hle.
• Bootstrap hi Italiano (Italian tawng) tawngin a awm a.
• A rilru a buai em em a, a rilru a hah em em bawk a. 한국어 (Korean) .
• A rilru a buai em em a, a rilru a hah em em bawk a. bootstrap em Português do Brasil (Brazilian Portuguese)
• A rilru a buai em em a, a rilru a hah em em bawk a. bootstrap по-русски (Russian)
• Bootstrap en Español (Spanish tawng) a ni.
• Türkçe Bootstrap (Turki tawng) a ni a, a man pawh a tlawm hle.
• A rilru a buai em em a, a rilru a hah em em bawk a. bootstrap українською (Ukrainian)
• Bootstrap bằng tiếng Việt (Vietnamese tawng) tih hi a ni.

Lehlin buatsaih emaw host emaw kan pui lo va, kan link mai mai a ni.

Lehlin thar emaw, a tha zawk emaw i zo tawh em? Kan list-a dah tur chuan pull request hawng rawh.