सुरु गर्दै

बुटस्ट्र्याप (हाल v3.4.1) मा छिट्टै सुरु गर्नका लागि केही सजिलो तरिकाहरू छन्, प्रत्येकले फरक कौशल स्तर र प्रयोगको मामलामा अपील गर्दछ। तपाइँको विशेष आवश्यकताहरु के अनुरूप हेर्न को लागी पढ्नुहोस्।

बुटस्ट्र्याप

कम्पाइल गरिएको र सीएसएस, जाभास्क्रिप्ट, र फन्टहरू सानो। कुनै कागजात वा मूल स्रोत फाइलहरू समावेश छैनन्।

बूटस्ट्र्याप डाउनलोड गर्नुहोस्

स्रोत कोड

स्रोत कम, JavaScript, र फन्ट फाइलहरू, हाम्रा कागजातहरू सहित। कम कम्पाइलर र केही सेटअप आवश्यक छ ।

स्रोत डाउनलोड गर्नुहोस्

सास

रेल, कम्पास, वा Sass-मात्र परियोजनाहरूमा सजिलै समावेश गर्नको लागि बुटस्ट्र्यापलाई Less देखि Sass मा पोर्ट गरियो।

Sass डाउनलोड गर्नुहोस्

jsDelivr

jsDelivr मा रहेका मानिसहरूले बुटस्ट्र्यापको 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 संग स्थापना गर्नुहोस्

तपाईंले Bower प्रयोग गरेर Bootstrap को Less, CSS, JavaScript, र फन्टहरू पनि स्थापना र व्यवस्थापन गर्न सक्नुहुन्छ :

bower install bootstrap

npm को साथ स्थापना गर्नुहोस्

तपाइँ पनि npm प्रयोग गरेर Bootstrap स्थापना गर्न सक्नुहुन्छ :

npm install bootstrap@3

require('bootstrap')सबै बुटस्ट्र्यापको jQuery प्लगइनहरू jQuery वस्तुमा लोड गर्नेछ। bootstrapमोड्युल आफैले केहि निर्यात गर्दैन । /js/*.jsतपाईंले प्याकेजको शीर्ष-स्तर डाइरेक्टरी अन्तर्गत फाइलहरू लोड गरेर व्यक्तिगत रूपमा Bootstrap को jQuery प्लगइनहरू लोड गर्न सक्नुहुन्छ।

बुटस्ट्र्यापले package.jsonनिम्न कुञ्जीहरू अन्तर्गत केही अतिरिक्त मेटाडेटा समावेश गर्दछ:

less- बुटस्ट्र्यापको मुख्य कम स्रोत फाइलको लागि मार्ग
style- बुटस्ट्र्यापको गैर-मिनिफाइड CSS को मार्ग जुन पूर्वनिर्धारित सेटिङहरू प्रयोग गरेर पूर्व-कम्पाइल गरिएको छ (कुनै अनुकूलन छैन)

कम्पोजरसँग स्थापना गर्नुहोस्

तपाइँ कम्पोजर प्रयोग गरेर Bootstrap को Less, CSS, JavaScript, र फन्टहरू पनि स्थापना र व्यवस्थापन गर्न सक्नुहुन्छ :

composer require twbs/bootstrap

Less/Sass को लागि Autoprefixer आवश्यक छ

बुटस्ट्र्यापले CSS विक्रेता उपसर्गहरूसँग व्यवहार गर्न Autoprefixer प्रयोग गर्दछ । यदि तपाइँ यसको Less/Sass स्रोतबाट बुटस्ट्र्याप कम्पाइल गर्दै हुनुहुन्छ र हाम्रो Gruntfile प्रयोग नगर्दै हुनुहुन्छ भने, तपाइँले Autoprefixer लाई तपाइँको निर्माण प्रक्रियामा आफैं एकीकृत गर्न आवश्यक छ। यदि तपाइँ पूर्वकम्पाइल गरिएको बुटस्ट्र्याप प्रयोग गर्दै हुनुहुन्छ वा हाम्रो ग्रन्टफाइल प्रयोग गर्दै हुनुहुन्छ भने, तपाइँले यसको बारेमा चिन्ता लिनु पर्दैन किनभने Autoprefixer पहिले नै हाम्रो Gruntfile मा एकीकृत छ।

बुटस्ट्र्याप दुई ढाँचाहरूमा डाउनलोड गर्न सकिन्छ, जस भित्र तपाईंले निम्न डाइरेक्टरीहरू र फाइलहरू फेला पार्नुहुनेछ, तार्किक रूपमा साझा स्रोतहरूलाई समूहबद्ध गरी र दुवै कम्पाइल गरिएको र मिनिफाइड भिन्नताहरू उपलब्ध गराउने।

jQuery आवश्यक छ

कृपया ध्यान दिनुहोस् कि सबै JavaScript प्लगइनहरूलाई 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

यो बुटस्ट्र्यापको सबैभन्दा आधारभूत रूप हो: लगभग कुनै पनि वेब परियोजनामा द्रुत ड्रप-इन प्रयोगको लागि पूर्व-कम्पाइल गरिएका फाइलहरू। हामी कम्पाइल गरिएको CSS र JS ( bootstrap.*), साथै कम्पाइल गरिएको र minified CSS र JS ( bootstrap.min.*) प्रदान गर्दछौं। CSS स्रोत नक्साहरू ( bootstrap.*.map) निश्चित ब्राउजरहरूको विकासकर्ता उपकरणहरूसँग प्रयोगको लागि उपलब्ध छन्। Glyphicons बाट फन्टहरू समावेश छन्, जस्तै वैकल्पिक बुटस्ट्र्याप विषयवस्तु हो।

बुटस्ट्र्याप स्रोत कोड

बुटस्ट्र्याप स्रोत कोड डाउनलोडमा पूर्व-कम्पाइल गरिएको CSS, JavaScript, र फन्ट सम्पत्तिहरू, स्रोत कम, JavaScript, र कागजातहरू समावेश छन्। थप विशेष रूपमा, यसले निम्न र थप समावेश गर्दछ:

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.js मार्फत विकास निर्भरताहरू व्यवस्थापन गर्ने तरिका हो।

त्यसपछि, आदेश रेखाबाट:

grunt-cliविश्वव्यापी रूपमा स्थापना गर्नुहोस् npm install -g grunt-cli।
रूट /bootstrap/डाइरेक्टरीमा नेभिगेट गर्नुहोस्, त्यसपछि चलाउनुहोस् npm install। npm ले फाइल हेर्नेछ package.jsonर त्यहाँ सूचीबद्ध आवश्यक स्थानीय निर्भरताहरू स्वचालित रूपमा स्थापना गर्नेछ।

पूरा भएपछि, तपाइँ कमाण्ड लाइनबाट प्रदान गरिएका विभिन्न ग्रन्ट आदेशहरू चलाउन सक्षम हुनुहुनेछ।

Grunt आदेशहरू उपलब्ध छन्

`grunt dist`(केवल CSS र जाभास्क्रिप्ट कम्पाइल गर्नुहोस्)

संकलित र मिनिफाइड /dist/CSS र JavaScript फाइलहरूसँग डाइरेक्टरी पुन: उत्पन्न गर्दछ। बुटस्ट्र्याप प्रयोगकर्ताको रूपमा, यो सामान्यतया तपाईले चाहानु भएको आदेश हो।

`grunt watch`(हेर्नुहोस्)

कम स्रोत फाइलहरू हेर्छ र तपाईंले परिवर्तन बचत गर्दा तिनीहरूलाई स्वचालित रूपमा CSS मा पुन: कम्पाइल गर्छ।

`grunt test`(परीक्षणहरू चलाउनुहोस्)

JSHint चलाउँछ र वास्तविक ब्राउजरहरूमा QUnit परीक्षणहरू चलाउँछ Karma लाई धन्यवाद ।

`grunt docs`(कागजात सम्पत्तिहरू निर्माण र परीक्षण गर्नुहोस्)

CSS, JavaScript, र अन्य सम्पत्तिहरू निर्माण र परीक्षण गर्दछ जुन स्थानीय रूपमा मार्फत कागजातहरू चलाउँदा प्रयोग गरिन्छ bundle exec jekyll serve।

`grunt`(बिल्कुल सबै बनाउनुहोस् र परीक्षणहरू चलाउनुहोस्)

CSS र JavaScript कम्पाइल र मिनिफाइ गर्छ, कागजात वेबसाइट बनाउँछ, कागजातहरू विरुद्ध HTML5 मान्यकर्ता चलाउँछ, Customizer सम्पत्तिहरू पुन: उत्पन्न गर्छ, र थप। Jekyll आवश्यक छ । यदि तपाइँ बुटस्ट्र्यापमा ह्याक गर्दै हुनुहुन्छ भने सामान्यतया मात्र आवश्यक छ।

समस्या निवारण

यदि तपाइँ निर्भरताहरू स्थापना गर्न वा ग्रन्ट आदेशहरू चलाउनमा समस्याहरू सामना गर्नुहुन्छ भने, पहिले /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>

बुटस्ट्र्यापका धेरै कम्पोनेन्टहरूसँग माथिको आधारभूत टेम्प्लेटमा निर्माण गर्नुहोस्। हामी तपाइँलाई तपाइँको व्यक्तिगत परियोजनाको आवश्यकताहरु अनुरूप बुटस्ट्र्याप अनुकूलन गर्न र अनुकूलन गर्न प्रोत्साहन दिन्छौं।

बुटस्ट्र्याप भण्डार डाउनलोड गरेर तलको प्रत्येक उदाहरणको लागि स्रोत कोड प्राप्त गर्नुहोस् । docs/examples/उदाहरणहरू निर्देशिकामा फेला पार्न सकिन्छ ।

फ्रेमवर्क प्रयोग गर्दै

स्टार्टर टेम्प्लेट

आधारभूत कुराहरू बाहेक केही छैन: कन्टेनरको साथ कम्पाइल गरिएको CSS र JavaScript।

बुटस्ट्र्याप विषयवस्तु

दृश्यात्मक रूपमा परिष्कृत अनुभवको लागि वैकल्पिक बुटस्ट्र्याप विषयवस्तु लोड गर्नुहोस्।

ग्रिडहरू

सबै चार तहहरू, नेस्टिङ, र थपको साथ ग्रिड लेआउटहरूको बहु उदाहरणहरू।

जम्बोट्रोन

नेभबार र केही आधारभूत ग्रिड स्तम्भहरूको साथ जम्बोट्रोन वरिपरि बनाउनुहोस्।

साँघुरो जम्बोट्रोन

पूर्वनिर्धारित कन्टेनर र जम्बोट्रोनलाई संकीर्ण गरेर थप अनुकूलन पृष्ठ बनाउनुहोस्।

कार्यमा Navbars

नवबार

सुपर आधारभूत टेम्प्लेट जसमा केही अतिरिक्त सामग्री सहित navbar समावेश छ।

स्थिर शीर्ष नवबार

केही अतिरिक्त सामग्रीको साथ स्थिर शीर्ष नेभबारको साथ सुपर आधारभूत टेम्प्लेट।

निश्चित नवबार

केही अतिरिक्त सामग्रीको साथ निश्चित शीर्ष नेभबारको साथ सुपर आधारभूत टेम्प्लेट।

अनुकूलन अवयवहरू

कभर

सरल र सुन्दर गृह पृष्ठहरू निर्माण गर्नको लागि एक-पृष्ठ टेम्प्लेट।

क्यारोसेल

नेभबार र क्यारोसेललाई आफू अनुकूल पार्नुहोस्, त्यसपछि केही नयाँ कम्पोनेन्टहरू थप्नुहोस्।

ब्लग

अनुकूलन नेभिगेसन, हेडर, र प्रकारको साथ साधारण दुई-स्तम्भ ब्लग लेआउट।

ड्यासबोर्ड

निश्चित साइडबार र नेभबारको साथ प्रशासक ड्यासबोर्डको लागि आधारभूत संरचना।

साइन इन पृष्ठ

सरल साइन इन फारमको लागि अनुकूलन फारम लेआउट र डिजाइन।

उचित nav

उचित लिङ्कहरूको साथ अनुकूलन नेभबार सिर्जना गर्नुहोस्। हेड अप! सफारी धेरै अनुकूल छैन।

टाँसिने फुटर

सामग्री यो भन्दा छोटो हुँदा भ्यूपोर्टको तल फुटर संलग्न गर्नुहोस्।

navbar संग टाँसिने फुटर

शीर्षमा निश्चित नेभबारको साथ भ्यूपोर्टको तल फुटर संलग्न गर्नुहोस्।

प्रयोगहरू

गैर-उत्तरदायी बुटस्ट्र्याप

हाम्रो कागजात अनुसार बुटस्ट्र्यापको प्रतिक्रियाशीलतालाई सजिलै असक्षम गर्नुहोस् ।

अफ-क्यानभास

Bootstrap को साथ प्रयोगको लागि टगल गर्न मिल्ने अफ-क्यानभास नेभिगेसन मेनु बनाउनुहोस्।

बुटलिन्ट

Bootlint आधिकारिक Bootstrap HTML linter उपकरण हो। यसले स्वचालित रूपमा वेबपेजहरूमा धेरै सामान्य HTML गल्तीहरूको लागि जाँच गर्दछ जुन "भेनिला" तरिकामा बुटस्ट्र्याप प्रयोग गर्दैछ। भ्यानिला बुटस्ट्र्यापका कम्पोनेन्टहरू/विजेटहरूलाई DOM को भागहरू निश्चित संरचनाहरू अनुरूप हुन आवश्यक छ। Bootlint ले जाँच गर्दछ कि बुटस्ट्र्याप कम्पोनेन्टहरूमा HTML सही रूपमा संरचित छ। तपाईको बुटस्ट्र्याप वेब विकास टूलचेनमा बुटलिन्ट थप्ने विचार गर्नुहोस् ताकि कुनै पनि सामान्य गल्तीले तपाईको परियोजनाको विकासलाई ढिलो नगरोस्।

बुटस्ट्र्यापको विकासमा अद्यावधिक रहनुहोस् र यी सहयोगी स्रोतहरूसँग समुदायमा पुग्नुहोस्।

आधिकारिक बुटस्ट्र्याप ब्लग पढ्नुहोस् र सदस्यता लिनुहोस् ।
##bootstrap च्यानलमाirc.freenode.net सर्भरमा IRC प्रयोग गरेर साथी बुटस्ट्र्यापरहरूसँग कुराकानी गर्नुहोस् ।
बुटस्ट्र्याप प्रयोग गर्न मद्दतको लागि , ट्याग प्रयोग गरेर StackOverflowtwitter-bootstrap-3 मा सोध्नुहोस् ।
विकासकर्ताहरूले प्याकेजहरूमा कुञ्जी शब्द प्रयोग गर्नुपर्छ जसले अधिकतम खोज योग्यताको लागि npm वा समान वितरण संयन्त्रहरू bootstrapमार्फत वितरण गर्दा बुटस्ट्र्यापको कार्यक्षमतामा परिमार्जन वा थप गर्दछ ।
बुटस्ट्र्याप एक्सपोमा बुटस्ट्र्यापको साथ मानिसहरू निर्माण गर्ने प्रेरणादायी उदाहरणहरू फेला पार्नुहोस् ।

तपाईले ट्विटरमा @getbootstrap लाई पनि पछ्याउन सक्नुहुन्छ भर्खरको गफ र अद्भुत संगीत भिडियोहरूको लागि।

बुटस्ट्र्यापले स्वचालित रूपमा विभिन्न स्क्रिन आकारहरूको लागि तपाइँको पृष्ठहरू अनुकूलन गर्दछ। तपाईंको पृष्ठले यो गैर-उत्तरदायी उदाहरण जस्तै काम गर्नको लागि यो सुविधालाई कसरी असक्षम गर्ने भन्ने यहाँ छ ।

पृष्ठ प्रतिक्रिया असक्षम गर्न चरणहरू

CSS कागजातहरूमा<meta> उल्लेख गरिएको भ्युपोर्ट हटाउनुहोस्
एकल चौडाइको साथ प्रत्येक ग्रिड टियरको लागि ओभरराइड गर्नुहोस् width, .containerउदाहरणका लागि width: 970px !important;यो पूर्वनिर्धारित बुटस्ट्र्याप CSS पछि आउँछ भनेर निश्चित गर्नुहोस्। तपाईं वैकल्पिक !importantरूपमा मिडिया प्रश्नहरू वा केही चयनकर्ता-फूबाट बच्न सक्नुहुन्छ।
यदि navbars प्रयोग गर्दै हुनुहुन्छ भने, सबै navbar को पतन र विस्तार गर्ने व्यवहार हटाउनुहोस्।
ग्रिड लेआउटहरूको लागि .col-xs-*, मध्यम/ठूलाहरूका अतिरिक्त वा सट्टामा कक्षाहरू प्रयोग गर्नुहोस्। चिन्ता नगर्नुहोस्, अतिरिक्त-सानो उपकरण ग्रिडले सबै रिजोल्युसनहरूमा स्केल गर्दछ।

तपाईलाई अझै पनि IE8 को लागि Respond.js को आवश्यकता पर्नेछ (हाम्रो मिडिया प्रश्नहरू अझै पनि त्यहाँ छन् र प्रशोधन गर्न आवश्यक छ)। यसले बुटस्ट्र्यापको "मोबाइल साइट" पक्षहरूलाई असक्षम पार्छ।

प्रतिक्रियाशीलताको साथ बुटस्ट्र्याप टेम्प्लेट असक्षम पारियो

हामीले यी चरणहरूलाई उदाहरणमा लागू गरेका छौं। कार्यान्वयन गरिएका विशिष्ट परिवर्तनहरू हेर्नको लागि यसको स्रोत कोड पढ्नुहोस्।

गैर-उत्तरदायी उदाहरण हेर्नुहोस्

v2.x बाट v3.x मा माइग्रेट गर्दै

Bootstrap को पुरानो संस्करणबाट v3.x मा माइग्रेट गर्न खोज्दै हुनुहुन्छ? हाम्रो माइग्रेसन गाइड हेर्नुहोस् ।

बुटस्ट्र्याप नवीनतम डेस्कटप र मोबाइल ब्राउजरहरूमा राम्रो काम गर्नको लागि बनाइएको छ, यसको मतलब पुराना ब्राउजरहरूले फरक शैली प्रदर्शन गर्न सक्छन्, यद्यपि पूर्ण रूपमा कार्यात्मक, निश्चित कम्पोनेन्टहरूको रेन्डरिङहरू।

समर्थित ब्राउजरहरू

विशेष रूपमा, हामी निम्न ब्राउजरहरू र प्लेटफर्महरूको नवीनतम संस्करणहरूलाई समर्थन गर्छौं।

वैकल्पिक ब्राउजरहरू जसले WebKit, Blink, वा Gecko को नवीनतम संस्करण प्रयोग गर्दछ, चाहे प्रत्यक्ष वा प्लेटफर्मको वेब दृश्य API मार्फत, स्पष्ट रूपमा समर्थित छैन। यद्यपि, बुटस्ट्र्यापले (अधिकांश अवस्थामा) यी ब्राउजरहरूमा पनि सही रूपमा प्रदर्शन र कार्य गर्नुपर्छ। थप विशिष्ट समर्थन जानकारी तल प्रदान गरिएको छ।

मोबाइल उपकरणहरू

सामान्यतया, बुटस्ट्र्यापले प्रत्येक प्रमुख प्लेटफर्मको पूर्वनिर्धारित ब्राउजरहरूको नवीनतम संस्करणहरूलाई समर्थन गर्दछ। ध्यान दिनुहोस् कि प्रोक्सी ब्राउजरहरू (जस्तै ओपेरा मिनी, ओपेरा मोबाइलको टर्बो मोड, UC ब्राउजर मिनी, अमेजन सिल्क) समर्थित छैनन्।

	क्रोम	फायरफक्स	सफारी
एन्ड्रोइड	समर्थित	समर्थित	N/A
iOS	समर्थित	समर्थित	समर्थित

डेस्कटप ब्राउजरहरू

त्यस्तै, अधिकांश डेस्कटप ब्राउजरहरूको नवीनतम संस्करणहरू समर्थित छन्।

	क्रोम	फायरफक्स	इन्टरनेट एक्सप्लोरर	ओपेरा	सफारी
म्याक	समर्थित	समर्थित	N/A	समर्थित	समर्थित
विन्डोज	समर्थित	समर्थित	समर्थित	समर्थित	मेला खाएन

Windows मा, हामी Internet Explorer 8-11 लाई समर्थन गर्छौं ।

फायरफक्सको लागि, पछिल्लो सामान्य स्थिर रिलीजको अतिरिक्त, हामी फायरफक्सको पछिल्लो विस्तारित समर्थन रिलीज (ESR) संस्करणलाई पनि समर्थन गर्छौं।

अनौपचारिक रूपमा, बुटस्ट्र्यापले क्रोमियम र लिनक्सको लागि क्रोम, लिनक्सको लागि फायरफक्स, र इन्टरनेट एक्सप्लोरर 7, साथै माइक्रोसफ्ट एजमा राम्रोसँग हेर्नु र व्यवहार गर्नुपर्छ, यद्यपि तिनीहरू आधिकारिक रूपमा समर्थित छैनन्।

केही ब्राउजर बगहरूको सूचीको लागि जुन बुटस्ट्र्यापले सामना गर्नुपर्दछ, हाम्रो ब्राउजर बगहरूको पर्खाल हेर्नुहोस् ।

इन्टरनेट एक्सप्लोरर ८ र ९

इन्टरनेट एक्सप्लोरर 8 र 9 पनि समर्थित छन्, तथापि, कृपया ध्यान दिनुहोस् कि केहि CSS3 गुणहरू र HTML5 तत्वहरू यी ब्राउजरहरूद्वारा पूर्ण रूपमा समर्थित छैनन्। थप रूपमा, इन्टरनेट एक्सप्लोरर 8 लाई मिडिया क्वेरी समर्थन सक्षम गर्न Respond.js को प्रयोग आवश्यक छ।

सुविधा	इन्टरनेट एक्सप्लोरर 8	इन्टरनेट एक्सप्लोरर ९
`border-radius`	मेला खाएन	समर्थित
`box-shadow`	मेला खाएन	समर्थित
`transform`	मेला खाएन	समर्थित, `-ms`उपसर्ग संग
`transition`	मेला खाएन
`placeholder`	मेला खाएन

भ्रमण गर्नुहोस्CSS3 र HTML5 सुविधाहरूको ब्राउजर समर्थनमा विवरणहरूको लागि के म प्रयोग गर्न सक्छु...

Internet Explorer 8 र Respond.js

Internet Explorer 8 को लागि तपाईंको विकास र उत्पादन वातावरणमा Respond.js प्रयोग गर्दा निम्न चेतावनीहरूबाट सावधान रहनुहोस्।

Respond.js र क्रस-डोमेन CSS

फरक (उप) डोमेनमा (उदाहरणका लागि, CDN मा) होस्ट गरिएको CSS को साथ Respond.js प्रयोग गर्न केही थप सेटअप आवश्यक पर्दछ। Respond.js कागजातहरू हेर्नुहोस् हेर्नुहोस्।

Respond.js र`file://`

ब्राउजर सुरक्षा नियमहरूको कारणले गर्दा, Respond.js ले प्रोटोकल मार्फत हेर्ने पृष्ठहरूसँग काम गर्दैन file://(जस्तै स्थानीय HTML फाइल खोल्दा)। IE8 मा उत्तरदायी सुविधाहरू परीक्षण गर्न, HTTP(S) मा आफ्नो पृष्ठहरू हेर्नुहोस्। Respond.js कागजातहरू हेर्नुहोस् हेर्नुहोस्।

Respond.js र`@import`

Respond.js ले CSS सँग काम गर्दैन जुन मार्फत सन्दर्भ गरिएको छ @import। विशेष रूपमा, केही Drupal कन्फिगरेसनहरू प्रयोग गर्न जानिन्छ @import। विवरणहरूको लागि Respond.js कागजातहरू हेर्नुहोस्।

इन्टरनेट एक्सप्लोरर 8 र बक्स साइजिङ

, , , वा box-sizing: border-box;सँग जोड्दा IE8 ले पूर्ण रूपमा समर्थन गर्दैन । त्यस कारणका लागि, v3.0.1 को रूपमा, हामी अब s मा प्रयोग गर्दैनौं।min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 र @font-face

IE8 सँग @font-faceसंयोजन गर्दा केही समस्याहरू छन् :before। बुटस्ट्र्यापले त्यस संयोजनलाई यसको ग्लाइफिकन्ससँग प्रयोग गर्दछ। यदि पृष्ठ क्यास गरिएको छ, र विन्डोमा माउस बिना लोड गरिएको छ (अर्थात् रिफ्रेस बटन थिच्नुहोस् वा iframe मा केहि लोड गर्नुहोस्) तब पृष्ठ फन्ट लोड हुनु अघि रेन्डर हुन्छ। पृष्ठ (बॉडी) मा होभर गर्दा केही आइकनहरू देखाउनेछ र बाँकी आइकनहरूमा होभर गर्दा ती पनि देखाउनेछ। हेर्नुहोस् अंक नम्बर १३८६३ हेर्नुहोस्।

IE अनुकूलता मोडहरू

पुरानो इन्टरनेट एक्सप्लोरर अनुकूलता मोडहरूमा बुटस्ट्र्याप समर्थित छैन। तपाईंले IE को लागि नवीनतम रेन्डरिङ मोड प्रयोग गरिरहनुभएको छ भनी सुनिश्चित गर्न, उपयुक्त समावेश गर्ने बारे विचार गर्नुहोस्<meta> तपाईंको पृष्ठहरूमा उपयुक्त ट्याग समावेश गर्ने विचार गर्नुहोस्:

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

डिबगिङ उपकरणहरू खोलेर कागजात मोड पुष्टि गर्नुहोस्: थिच्नुहोस्F12 र "कागजात मोड" जाँच गर्नुहोस्।

यो ट्याग इन्टरनेट एक्सप्लोररको प्रत्येक समर्थित संस्करणमा सम्भव उत्तम रेन्डरिङ सुनिश्चित गर्नका लागि सबै बुटस्ट्र्यापका कागजातहरू र उदाहरणहरूमा समावेश गरिएको छ।

थप जानकारीको लागि यो StackOverflow प्रश्न हेर्नुहोस् ।

Windows 8 र Windows Phone 8 मा Internet Explorer 10

इन्टरनेट एक्सप्लोरर 10 ले उपकरणको चौडाइलाई भ्युपोर्ट चौडाइबाट फरक गर्दैन , र यसैले बुटस्ट्र्यापको CSS मा मिडिया क्वेरीहरू ठीकसँग लागू गर्दैन। सामान्यतया तपाईले यसलाई ठीक गर्नको लागि CSS को द्रुत स्निपेट थप्नुहुनेछ:

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

यद्यपि, यसले अपडेट 3 (उर्फ GDR3) भन्दा पुरानो Windows Phone 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 पढ्नुहोस् ।

हेड अपको रूपमा, हामी यसलाई बुटस्ट्र्यापको सबै कागजात र उदाहरणहरूमा प्रदर्शनको रूपमा समावेश गर्दछौं।

सफारी प्रतिशत राउन्डिङ

OS X को लागि v7.1 अघिको Safari र iOS v8.0 को लागि Safari को संस्करणहरूको रेन्डरिङ इन्जिनमा हाम्रो .col-*-1ग्रिड कक्षाहरूमा प्रयोग हुने दशमलव स्थानहरूको संख्यामा केही समस्या थियो। त्यसोभए यदि तपाईंसँग 12 व्यक्तिगत ग्रिड स्तम्भहरू छन् भने, तपाईंले याद गर्नुहुनेछ कि तिनीहरू स्तम्भहरूको अन्य पङ्क्तिहरूको तुलनामा छोटो आए। सफारी/iOS अपग्रेड गर्नुको अलावा, तपाईंसँग समाधानका लागि केही विकल्पहरू छन्:

.pull-rightकडा-दायाँ पङ्क्तिबद्धता प्राप्त गर्न तपाईंको अन्तिम ग्रिड स्तम्भमा थप्नुहोस्
सफारीको लागि उत्तम राउन्डिङ प्राप्त गर्न आफ्नो प्रतिशत म्यानुअल रूपमा ट्वीक गर्नुहोस् (पहिलो विकल्प भन्दा बढी गाह्रो)

मोडलहरू, नेभबारहरू, र भर्चुअल किबोर्डहरू

ओभरफ्लो र स्क्रोलिङ

overflow: hiddenतत्वको लागि समर्थन <body>आईओएस र एन्ड्रोइडमा एकदम सीमित छ। त्यसको लागि, जब तपाइँ ती यन्त्रहरूको ब्राउजरहरूमा मोडलको माथि वा तल स्क्रोल गर्नुहुन्छ, <body>सामग्री स्क्रोल गर्न सुरु हुनेछ। हेर्नुहोस् Chrome बग #175502 (Chrome v40 मा फिक्स गरिएको) र WebKit बग #153852 ।

iOS पाठ क्षेत्रहरू र स्क्रोलिङ

<input>iOS 9.3 को रूपमा, मोडल खुला हुँदा, यदि स्क्रोल इशाराको प्रारम्भिक स्पर्श पाठ्य वा a को सीमा भित्र छ भने <textarea>, <body>मोडल मुनिको सामग्री मोडलको सट्टा स्क्रोल गरिनेछ। WebKit बग #153856 हेर्नुहोस् ।

भर्चुअल किबोर्डहरू

साथै, ध्यान दिनुहोस् कि यदि तपाइँ निश्चित नेभबार प्रयोग गर्दै हुनुहुन्छ वा मोडल भित्र इनपुटहरू प्रयोग गर्दै हुनुहुन्छ भने, iOS मा रेन्डरिङ बग छ जसले भर्चुअल किबोर्ड ट्रिगर हुँदा निश्चित तत्वहरूको स्थिति अद्यावधिक गर्दैन। यसका लागि केही समाधानहरूमा तपाईंको तत्वहरूलाई रूपान्तरण गर्ने position: absoluteवा म्यानुअल रूपमा स्थिति सुधार गर्ने प्रयास गर्न फोकसमा टाइमर बोलाउने समावेश छ। यो बुटस्ट्र्याप द्वारा ह्यान्डल गरिएको छैन, त्यसैले यो तपाइँमा निर्भर छ कि तपाइँको आवेदन को लागी कुन समाधान उत्तम छ।

.dropdown-backdropz-इन्डेक्सिङको जटिलताका कारण यो तत्व iOS मा nav मा प्रयोग गरिएको छैन। तसर्थ, navbars मा ड्रपडाउनहरू बन्द गर्न, तपाईंले ड्रपडाउन तत्व (वा iOS मा क्लिक घटना सक्रिय गर्ने कुनै अन्य तत्व ) लाई सीधै क्लिक गर्नुपर्छ ।

ब्राउजर जुम गर्दै

पृष्ठ जुमिङले अनिवार्य रूपमा बुटस्ट्र्याप र वेबको बाँकी भागहरूमा केही कम्पोनेन्टहरूमा रेन्डरिङ कलाकृतिहरू प्रस्तुत गर्दछ। मुद्दामा निर्भर गर्दै, हामी यसलाई समाधान गर्न सक्षम हुन सक्छौं (पहिले खोज्नुहोस् र आवश्यक भएमा मुद्दा खोल्नुहोस्)। यद्यपि, हामी तिनीहरूलाई बेवास्ता गर्छौं किनभने तिनीहरूसँग प्रायः ह्याकी वर्कअराउन्डहरू बाहेक कुनै प्रत्यक्ष समाधान हुँदैन।

टाँसिने `:hover`/ `:focus`मोबाइलमा

धेरैजसो टचस्क्रिनहरूमा वास्तविक होभरिङ सम्भव नभए पनि, धेरैजसो मोबाइल ब्राउजरहरूले होभरिङ सपोर्टको अनुकरण गर्छन् र :hover"स्टिकी" बनाउँछन्। अन्य शब्दहरूमा, :hoverशैलीहरू एक तत्व ट्याप गरेपछि लागू गर्न सुरु हुन्छ र प्रयोगकर्ताले केही अन्य तत्व ट्याप गरेपछि मात्र लागू गर्न रोक्छ। यसले बुटस्ट्र्यापको :hoverअवस्थाहरूलाई त्यस्ता ब्राउजरहरूमा अवांछनीय रूपमा "अडकिएको" हुन सक्छ। केही मोबाइल ब्राउजरहरू पनि :focusत्यस्तै टाँसिने बनाउँछन्। त्यस्ता शैलीहरूलाई पूर्ण रूपमा हटाउन बाहेक यी समस्याहरूको लागि हाल कुनै साधारण समाधान छैन।

मुद्रण

केही आधुनिक ब्राउजरहरूमा पनि, मुद्रण quirky हुन सक्छ।

विशेष गरी, Chrome v32 को रूपमा र मार्जिन सेटिङहरूको वास्ता नगरी, Chrome ले वेबपेज प्रिन्ट गर्दा मिडिया क्वेरीहरू समाधान गर्दा भौतिक कागजको आकार भन्दा महत्त्वपूर्ण रूपमा साँघुरो भ्यूपोर्ट चौडाइ प्रयोग गर्दछ। यसले प्रिन्ट गर्दा बुटस्ट्र्यापको अतिरिक्त-सानो ग्रिड अप्रत्याशित रूपमा सक्रिय हुन सक्छ। केही विवरणहरूको लागि मुद्दा #12078 र Chrome बग #273306 हेर्नुहोस्। सुझाव गरिएका उपायहरू:

अतिरिक्त-सानो ग्रिडलाई अँगाल्नुहोस् र निश्चित गर्नुहोस् कि तपाईंको पृष्ठ यसको मुनि स्वीकार्य देखिन्छ।
कम चरका मानहरू अनुकूलित गर्नुहोस् @screen-*ताकि तपाईंको प्रिन्टर पेपर अतिरिक्त-सानो भन्दा ठूलो मानिन्छ।
प्रिन्ट मिडियाका लागि मात्र ग्रिड साइज ब्रेकपोइन्टहरू परिवर्तन गर्न अनुकूलन मिडिया प्रश्नहरू थप्नुहोस्।

साथै, Safari v8.0 को रूपमा, निश्चित-चौडाइ .containers ले सफारीलाई मुद्रण गर्दा असामान्य रूपमा सानो फन्ट साइज प्रयोग गर्न सक्छ। थप विवरणहरूको लागि #14868 र WebKit बग #138192 हेर्नुहोस्। यसको लागि एउटा सम्भावित समाधान निम्न CSS थप्दैछ:

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

एन्ड्रोइड स्टक ब्राउजर

बक्सको बाहिर, एन्ड्रोइड 4.1 (र केही नयाँ रिलीजहरू पनि स्पष्ट रूपमा) ब्राउजर एपसँग छनोटको पूर्वनिर्धारित वेब ब्राउजरको रूपमा पठाइन्छ (क्रोमको विपरीत)। दुर्भाग्यवश, ब्राउजर एपमा सामान्य रूपमा CSS सँग धेरै बगहरू र असंगतताहरू छन्।

मेनू चयन गर्नुहोस्

तत्वहरूमा , <select>एन्ड्रोइड स्टक ब्राउजरले साइड नियन्त्रणहरू प्रदर्शन गर्दैन यदि त्यहाँ border-radiusर/वा borderलागू गरिएको छ। ( विवरणहरूको लागि यो StackOverflow प्रश्न<select> हेर्नुहोस्।) अपमानजनक CSS हटाउन र एन्ड्रोइड स्टक ब्राउजरमा अनस्टाइल तत्वको रूपमा प्रस्तुत गर्न तलको कोडको स्निपेट प्रयोग गर्नुहोस् । प्रयोगकर्ता एजेन्ट स्निफिङले क्रोम, सफारी र मोजिला ब्राउजरहरूमा हस्तक्षेप गर्नबाट जोगाउँछ।

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

उदाहरण हेर्न चाहनुहुन्छ? यो जेएस बिन डेमो जाँच गर्नुहोस्।

मान्यकर्ताहरू

पुराना र बग्गी ब्राउजरहरूलाई उत्कृष्ट सम्भावित अनुभव प्रदान गर्नको लागि, बुटस्ट्र्यापले धेरै ठाउँहरूमा CSS ब्राउजर ह्याकहरू प्रयोग गर्दछ विशेष CSS लाई निश्चित ब्राउजर संस्करणहरूमा लक्षित गर्नका लागि ब्राउजरहरूमा बगहरू वरपर काम गर्न। यी ह्याकहरूले CSS प्रमाणिकरणकर्ताहरूलाई तिनीहरू अमान्य छन् भनी गुनासो गर्नको लागि बुझिन्छ। केही स्थानहरूमा, हामीले ब्लीडिङ-एज CSS सुविधाहरू पनि प्रयोग गर्छौं जुन अझै पूर्ण रूपमा मानकीकृत छैन, तर यी पूर्ण रूपमा प्रगतिशील वृद्धिको लागि प्रयोग गरिन्छ।

यी प्रमाणीकरण चेतावनीहरूले व्यवहारमा फरक पार्दैन किनभने हाम्रो CSS को गैर-ह्याकी भागले पूर्ण रूपमा प्रमाणीकरण गर्छ र ह्याकी भागहरूले गैर-ह्याकी भागको उचित कार्यमा हस्तक्षेप गर्दैन, त्यसैले हामी किन जानाजानी यी विशेष चेतावनीहरूलाई बेवास्ता गर्छौं।

हाम्रो HTML कागजातहरूमा पनि निश्चित फायरफक्स बगको लागि समाधानको समावेशको कारणले गर्दा केही तुच्छ र अप्रासंगिक HTML प्रमाणीकरण चेतावनीहरू छन् ।

हामी आधिकारिक रूपमा कुनै पनि तेस्रो पक्ष प्लगइन वा एड-अनहरूलाई समर्थन गर्दैनौं, हामी तपाईंको परियोजनाहरूमा सम्भावित समस्याहरूबाट बच्न मद्दत गर्न केही उपयोगी सल्लाहहरू प्रस्ताव गर्छौं।

बक्स आकार

Google नक्सा र Google अनुकूलन खोज इन्जिन सहित केही तेस्रो पक्ष सफ्टवेयर, बुटस्ट्र्यापसँग द्वन्द्वको कारण * { 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 परियोजना लेख हेर्नुहोस् )। .sr-onlyक्लासको प्रयोगले स्किप लिंकलाई दृश्यात्मक रूपमा लुकाउनेछ, र क्लासले .sr-only-focusableयो सुनिश्चित गर्नेछ कि एक पटक फोकस गरेपछि (दृश्य किबोर्ड प्रयोगकर्ताहरूका लागि) लिङ्क देखिने छ।

क्रोममा लामो समयदेखि रहेका कमजोरीहरू/बगहरू ( क्रोमियम बग ट्र्याकरमा मुद्दा 262171 हेर्नुहोस्) र इन्टरनेट एक्सप्लोरर ( इन-पेज लिङ्कहरूमा यो लेख हेर्नुहोस् र फोकस अर्डर ) को कारणले गर्दा, तपाईंले आफ्नो स्किप लिङ्कको लक्ष्य सुनिश्चित गर्न आवश्यक छ। जोडेर कम्तिमा प्रोग्रामेटिक रूपमा फोकस गर्न योग्य छ tabindex="-1"।

यसका अतिरिक्त, तपाईंले लक्ष्यमा देखिने फोकस सङ्केतलाई स्पष्ट रूपमा दबाउन चाहनुहुन्छ (विशेष गरी क्रोमले हाल 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 लाइसेन्स अन्तर्गत जारी गरिएको छ र प्रतिलिपि अधिकार 2019 Twitter हो। साना टुक्राहरूमा उमालेको, यसलाई निम्न अवस्थाहरूसँग वर्णन गर्न सकिन्छ।

यसले तपाइँलाई आवश्यक छ:

बुटस्ट्र्यापको CSS र JavaScript फाइलहरूलाई आफ्नो काममा प्रयोग गर्दा लाइसेन्स र प्रतिलिपि अधिकार सूचना समावेश राख्नुहोस्।

यसले तपाईंलाई अनुमति दिन्छ:

व्यक्तिगत, निजी, कम्पनी आन्तरिक, वा व्यावसायिक उद्देश्यका लागि पूर्ण वा आंशिक रूपमा बुटस्ट्र्याप डाउनलोड र प्रयोग गर्नुहोस्।
तपाईंले सिर्जना गर्नुभएको प्याकेज वा वितरणहरूमा बुटस्ट्र्याप प्रयोग गर्नुहोस्
स्रोत कोड परिमार्जन गर्नुहोस्
इजाजतपत्रमा समावेश नभएको तेस्रो पक्षहरूलाई बुटस्ट्र्याप परिमार्जन गर्न र वितरण गर्न उप-लाइसेन्स प्रदान गर्नुहोस्

यसले तपाईंलाई निषेध गर्दछ:

लेखक र इजाजतपत्र मालिकहरूलाई क्षतिको लागि उत्तरदायी होल्ड गर्नुहोस् किनकि बुटस्ट्र्याप वारेन्टी बिना प्रदान गरिएको छ
बुटस्ट्र्यापका सिर्जनाकर्ता वा प्रतिलिपि अधिकार धारकहरूलाई उत्तरदायी होल्ड गर्नुहोस्
बुटस्ट्र्यापको कुनै पनि टुक्रा उचित एट्रिब्युशन बिना पुन: वितरण गर्नुहोस्
Twitter को स्वामित्वमा रहेका कुनै पनि चिन्हहरू प्रयोग गर्नुहोस् जुन उल्लेख गर्न वा संकेत गर्न सक्छ कि Twitter ले तपाइँको वितरणलाई समर्थन गर्दछ
Twitter को स्वामित्वमा रहेका कुनै पनि चिन्हहरू प्रयोग गर्नुहोस् जुन तपाइँले प्रश्नमा ट्विटर सफ्टवेयर सिर्जना गर्नुभयो भनेर बताउन वा संकेत गर्न सक्छ

यसले तपाईंलाई आवश्यक पर्दैन:

बुटस्ट्र्यापको स्रोत समावेश गर्नुहोस्, वा तपाईंले यसमा गर्नुभएका कुनै पनि परिमार्जनहरू, तपाईंले यसलाई समावेश गर्न सक्ने कुनै पनि पुन: वितरणमा समावेश गर्नुहोस्।
बुटस्ट्र्याप परियोजनामा तपाईंले बुटस्ट्र्यापमा गर्नुभएका परिवर्तनहरू पेस गर्नुहोस् (यद्यपि त्यस्ता प्रतिक्रियाहरूलाई प्रोत्साहन गरिन्छ)

थप जानकारीको लागि पूर्ण बुटस्ट्र्याप इजाजतपत्र परियोजना भण्डारमा अवस्थित छ ।

समुदायका सदस्यहरूले बुटस्ट्र्यापको कागजातलाई विभिन्न भाषाहरूमा अनुवाद गरेका छन्। कुनै पनि आधिकारिक रूपमा समर्थित छैन र तिनीहरू सधैं अद्यावधिक नहुन सक्छन्।

हामीले अनुवादहरूलाई व्यवस्थित गर्न वा होस्ट गर्न मद्दत गर्दैनौं, हामी तिनीहरूलाई लिङ्क मात्र गर्छौं।

नयाँ वा राम्रो अनुवाद समाप्त भयो? हाम्रो सूचीमा थप्नको लागि पुल अनुरोध खोल्नुहोस्।

डाउनलोड गर्नुहोस्