अवाहरन

Bootstrap (वर्तमानं v3.4.1) शीघ्रं आरम्भं कर्तुं कतिपयानि सुलभानि उपायानि सन्ति, प्रत्येकं भिन्नं कौशलस्तरं उपयोगप्रकरणं च आकर्षयति । भवतः विशेषापेक्षाणां अनुरूपं किं भवति इति ज्ञातुं पठन्तु।

बूटस्ट्रैप

CSS, JavaScript, फन्ट् च संकलितं लघुकृतं च । न कोऽपि docs अथवा मूलस्रोतसञ्चिकाः समाविष्टाः सन्ति ।

बूटस्ट्रैप डाउनलोड करें

स्रोत कोड

Source Less, JavaScript, तथा font files, अस्माकं docs इत्यनेन सह । Less compiler इत्यस्य आवश्यकता अस्ति तथा च किञ्चित् setup इत्यस्य आवश्यकता अस्ति ।

स्रोत डाउनलोड करें

सस्स

Rails, Compass, अथवा Sass-only परियोजनासु सुलभसमावेशार्थं Bootstrap Less तः Sass मध्ये पोर्ट् कृतम् ।

डाउनलोड करें Sass

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>

बावर के साथ स्थापित करें

Bower इत्यस्य उपयोगेन Bootstrap इत्यस्य Less, CSS, JavaScript, तथा च फन्ट् इत्येतत् संस्थापयितुं प्रबन्धयितुं च शक्नुवन्ति :

bower install bootstrap

npm इत्यनेन सह संस्थापयन्तु

npm इत्यस्य उपयोगेन Bootstrap इत्येतत् अपि संस्थापयितुं शक्नुवन्ति :

npm install bootstrap@3

require('bootstrap')Bootstrap इत्यस्य सर्वाणि jQuery प्लगिन्स् jQuery ऑब्जेक्ट् इत्यत्र लोड् करिष्यति । मॉड्यूल स्वयं bootstrapकिमपि निर्यातं न करोति । /js/*.jsसंकुलस्य शीर्ष-स्तरीयनिर्देशिकायाः ​​अधः सञ्चिकाः लोड् कृत्वा भवान् Bootstrap इत्यस्य jQuery प्लगिन्स् व्यक्तिगतरूपेण मैन्युअल् रूपेण लोड् कर्तुं शक्नोति ।

Bootstrap's package.jsonइत्यत्र निम्नलिखितकुंजीनां अधः केचन अतिरिक्ताः मेटाडाटाः सन्ति ।

  • less- Bootstrap इत्यस्य मुख्यस्य Less स्रोतसञ्चिकायाः ​​मार्गः
  • style- Bootstrap इत्यस्य अ-मिनीफाइड् CSS इत्यस्य मार्गः यः पूर्वनिर्धारितसेटिंग्स् इत्यस्य उपयोगेन पूर्वसंकलितः अस्ति (अनुकूलनं नास्ति)

Composer इत्यनेन सह संस्थापयन्तु

Composer इत्यस्य उपयोगेन Bootstrap इत्यस्य Less, CSS, JavaScript, fonts इत्यादीनि अपि संस्थापयितुं प्रबन्धयितुं च शक्नुवन्ति :

composer require twbs/bootstrap

Less/Sass कृते स्वतः उपसर्गः आवश्यकः

Bootstrap CSS विक्रेता उपसर्गैः सह निबद्धुं Autoprefixer इत्यस्य उपयोगं करोति | यदि भवान् Bootstrap इत्यस्य Less/Sass स्रोतः संकलयति अस्माकं Gruntfile इत्यस्य उपयोगं न करोति तर्हि भवान् स्वयमेव स्वस्य निर्माणप्रक्रियायां Autoprefixer इत्यस्य एकीकरणं कर्तुं प्रवृत्तः भविष्यति । यदि भवान् पूर्वसंकलितं Bootstrap इत्यस्य उपयोगं करोति अथवा अस्माकं Gruntfile इत्यस्य उपयोगं करोति तर्हि भवान् एतस्य विषये चिन्तां कर्तुं न प्रयोजनम् यतः Autoprefixer अस्माकं Gruntfile इत्यस्मिन् पूर्वमेव एकीकृतः अस्ति ।

किं समाविष्टम् अस्ति

Bootstrap द्वयोः रूपयोः डाउनलोड् कर्तुं शक्यते, यस्य अन्तः भवान् निम्नलिखितनिर्देशिकाः सञ्चिकाश्च प्राप्स्यति, तार्किकरूपेण सामान्यसंसाधनानाम् समूहीकरणं कृत्वा संकलितं लघुकृतं च भिन्नतां प्रदास्यति

jQuery आवश्यकम्

कृपया ज्ञातव्यं यत् सर्वेषु जावास्क्रिप्ट् प्लगिन्स् मध्ये jQuery इत्यस्य समावेशस्य आवश्यकता वर्तते , यथा starter template मध्ये दर्शितम् अस्ति । 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 स्रोतनक्शाः ( bootstrap.*.map) कतिपयैः ब्राउजर्-विकासक-उपकरणैः सह उपयोगाय उपलभ्यन्ते । Glyphicons इत्यस्मात् फॉन्ट्स् समाविष्टाः सन्ति, यथा वैकल्पिकं Bootstrap विषयः अपि ।

बूटस्ट्रैप स्रोत कोड

Bootstrap स्रोतसङ्केत-अवलोकने पूर्व-संकलित-CSS, JavaScript, font-सम्पत्तयः च, स्रोत Less, JavaScript, दस्तावेजीकरणं च समाविष्टाः सन्ति । विशेषतः अस्मिन् निम्नलिखितम् अधिकानि च समाविष्टानि सन्ति ।

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

, less/, js/तथा fonts/अस्माकं CSS, JS, तथा च चिह्न-फॉन्ट् (क्रमशः) कृते स्रोत-सङ्केतः सन्ति । उपरि dist/पूर्वसंकलित-अवलोकन-विभागे सूचीकृतं सर्वं पुटे अन्तर्भवति । फोल्डर् मध्ये अस्माकं दस्तावेजीकरणस्य, तथा च Bootstrap उपयोगस्य docs/स्रोतसङ्केतः अन्तर्भवति । examples/ततः परं अन्यः कोऽपि समाविष्टः सञ्चिका संकुलानाम्, अनुज्ञापत्रसूचनाः, विकासस्य च समर्थनं प्रदाति ।

CSS तथा JavaScript संकलनम्

बूटस्ट्रैप् स्वस्य निर्माणप्रणाल्याः कृते Grunt इत्यस्य उपयोगं करोति , यत्र फ्रेमवर्क् इत्यनेन सह कार्यं कर्तुं सुविधाजनकाः पद्धतयः सन्ति । इदं कथं वयं अस्माकं कोडं संकलयामः, परीक्षणं चालयामः, इत्यादीनि च।

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(केवल CSS तथा JavaScript संकलित करें)

/dist/संकलितैः लघुकृतैः च CSS तथा JavaScript सञ्चिकाभिः सह निर्देशिकां पुनः जनयति । एकः Bootstrap उपयोक्तृत्वेन, सामान्यतया एषः आदेशः यः भवान् इच्छति ।

grunt watch(घटी)

Less स्रोतसञ्चिकाः पश्यति तथा च यदा कदापि परिवर्तनं रक्षति तदा स्वयमेव तान् CSS मध्ये पुनः संकलयति ।

grunt test(परीक्षां चालयन्तु) .

JSHint चालयति तथा च Karma इत्यस्य धन्यवादेन वास्तविकब्राउजर् मध्ये QUnit परीक्षणं चालयति |

grunt docs(docs assets इत्यस्य निर्माणं परीक्षणं च कुर्वन्तु)

CSS, JavaScript, अन्ये च सम्पत्तिः निर्माति परीक्षते च येषां उपयोगः भवति यदा दस्तावेजीकरणं स्थानीयतया चालयति bundle exec jekyll serve.

grunt(सर्वथा सर्वं निर्माय परीक्षणं चालयन्तु)

CSS तथा JavaScript संकलितं लघुकरणं च करोति, दस्तावेजीकरणजालस्थलस्य निर्माणं करोति, docs विरुद्धं HTML5 validator चालयति, Customizer सम्पत्तिं पुनः जनयति, इत्यादीनि च जेकिल् आवश्यकम् . सामान्यतः केवलं आवश्यकं यदि भवान् Bootstrap इत्यत्र एव हैकिंग् करोति।

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

यदि भवान् निर्भरतास्थापनस्य अथवा Grunt आदेशानां चालनस्य समस्यां प्राप्नुयात् तर्हि प्रथमं /node_modules/npm द्वारा उत्पन्नं निर्देशिकां विलोपयतु । ततः, पुनः चालयन्तु npm install.

मूल टेम्पलेट

एतेन मूलभूत HTML टेम्पलेट् इत्यनेन आरभ्यताम्, अथवा एतानि उदाहरणानि परिवर्तयन्तु . वयम् आशास्महे यत् भवान् अस्माकं टेम्पलेट् उदाहरणानि च अनुकूलितं करिष्यति, तान् स्वस्य आवश्यकतानुसारं अनुकूलयिष्यति।

न्यूनतमेन Bootstrap दस्तावेजेन सह कार्यं आरभ्यतुं अधोलिखितं 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 इत्यस्य अनुकूलनं अनुकूलनं च कुर्वन्तु।

Bootstrap भण्डारं डाउनलोड् कृत्वा अधोलिखितस्य प्रत्येकस्य उदाहरणस्य स्रोतसङ्केतं प्राप्नुवन्तु | docs/examples/उदाहरणानि निर्देशिकायां द्रष्टुं शक्यन्ते ।

ढांचा का प्रयोग करते हुए

प्रारम्भिक टेम्पलेट उदाहरण

प्रारम्भिक टेम्पलेट

मूलभूतविषयाणां अतिरिक्तं किमपि नास्ति: एकेन पात्रेण सह CSS तथा JavaScript संकलितम्।

बूटस्ट्रैप विषय उदाहरण

बूटस्ट्रैप विषय

दृग्गतरूपेण वर्धितस्य अनुभवस्य कृते वैकल्पिकं Bootstrap विषयं लोड् कुर्वन्तु ।

बहुजालम् उदाहरणम्

जालपुटाः

चतुर्भिः स्तरैः सह जालविन्यासस्य अनेकाः उदाहरणानि, नेस्टिंग्, इत्यादीनि च ।

जम्बोट्रॉन उदाहरण

जम्बोट्रोन्

नवबारेन सह जम्बोट्रॉन् इत्यस्य परितः निर्माणं कुर्वन्तु तथा च केचन मूलभूतजालस्तम्भाः ।

संकीर्ण जम्बोट्रॉन उदाहरण

संकीर्ण जम्बोट्रॉन

पूर्वनिर्धारितं पात्रं जम्बोट्रॉन् च संकुचितं कृत्वा अधिकं कस्टम् पृष्ठं निर्मायताम् ।

नवबराः कर्मणि

नवबर उदाहरण

नवबर

सुपर बेसिक टेम्पलेट जिसमें कुछ अतिरिक्त सामग्री के साथ नवबार शामिल है।

स्थिर शीर्ष नवबार उदाहरण

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

कुछ अतिरिक्त सामग्री के साथ एक स्थिर शीर्ष नवबार के साथ सुपर बेसिक टेम्पलेट।

नवबार उदाहरणं निश्चितम्

नवबार स्थिर

कुछ अतिरिक्त सामग्री के साथ एक निश्चित शीर्ष नवबार के साथ सुपर बेसिक टेम्पलेट।

कस्टम घटक

एकपृष्ठीयं टेम्पलेट् उदाहरणम्

आवरणं

सरलं सुन्दरं च मुखपृष्ठं निर्मातुं एकपृष्ठीयं टेम्पलेट्।

हिंडोला उदाहरण

हिंडोला

नवबारं हिंडोला च अनुकूलितं कुर्वन्तु, ततः केचन नूतनाः घटकाः योजयन्तु ।

ब्लॉग विन्यास उदाहरण

ब्लॉग

कस्टम नेविगेशन, हेडर, तथा प्रकार सहित सरल द्वि-स्तम्भ ब्लॉग विन्यास।

डैशबोर्ड उदाहरणम्

डैशबोर्ड

स्थिरपार्श्वपट्टिकायाः ​​नवबारस्य च सह व्यवस्थापकडैशबोर्डस्य मूलभूतसंरचना ।

साइन-इन पृष्ठ उदाहरण

साइन-इन पृष्ठ

प्रपत्रे सरलस्य चिह्नस्य कृते कस्टम् प्रपत्रविन्यासः डिजाइनः च ।

न्याय्य नव उदाहरण

न्याय्य नव

न्याय्यलिङ्कैः सह कस्टम् नवबारं रचयन्तु । शिरः उपरि ! न अति सफारी मैत्रीपूर्णम्।

चिपचिपा पादलेख उदाहरण

चिपचिपा पाद लेख

यदा सामग्री तस्मात् लघु भवति तदा viewport इत्यस्य अधः पादलेखं संलग्नं कुर्वन्तु ।

नवबार उदाहरण के साथ चिपचिपा पाद लेख

नवबार के साथ चिपचिपा पाद लेख

दृश्यपोर्ट् इत्यस्य अधः उपरि नियतं नवबारं कृत्वा पादलेखं संलग्नं कुर्वन्तु ।

प्रयोगाः

अप्रतिसादात्मकं उदाहरणम्

गैर-प्रतिक्रियाशील Bootstrap

अस्माकं docs प्रति Bootstrap इत्यस्य प्रतिक्रियाशीलतां सहजतया अक्षमं कुर्वन्तु .

ऑफ-कैनवास नेविगेशन उदाहरण

ऑफ-कैनवास

Bootstrap इत्यनेन सह उपयोगाय एकं टॉग्लेबलं ऑफ-कैनवास नेविगेशन मेनू निर्मायताम् ।

उपकरणाः

बूटलिण्ट् इति

Bootlint इति आधिकारिकं Bootstrap HTML linter tool अस्ति । इदं स्वयमेव जालपुटेषु अनेकाः सामान्याः HTML त्रुटयः परीक्षते ये Bootstrap इत्यस्य उपयोगं तुल्यरूपेण "वैनिला" प्रकारेण कुर्वन्ति । Vanilla Bootstrap इत्यस्य घटकानां/विजेट्-सम्बद्धानां DOM इत्यस्य तेषां भागानां कतिपयानां संरचनानां अनुरूपता आवश्यकी भवति । Bootlint परीक्षते यत् Bootstrap घटकानां उदाहरणेषु सम्यक्-संरचितं HTML अस्ति वा । भवतः Bootstrap जालविकाससाधनशृङ्खलायां Bootlint योजयितुं विचारयन्तु येन सामान्यदोषेषु कश्चन अपि भवतः परियोजनायाः विकासं मन्दं न करोति।

समुदाय

Bootstrap इत्यस्य विकासस्य विषये अद्यतनं भवन्तु तथा च एतैः सहायकसंसाधनैः समुदायं प्रति गच्छन्तु।

  • The Official Bootstrap Blog इति पठित्वा सदस्यतां गृह्यताम् .
  • irc.freenode.netसर्वरे IRC इत्यस्य उपयोगेन सहकारिभिः Bootstrappers इत्यनेन सह गपशपं कुर्वन्तु, ##bootstrap चैनल् मध्ये ।
  • Bootstrap इत्यस्य उपयोगेन सहायार्थं, टैग् इत्यस्य उपयोगेन StackOverflowtwitter-bootstrap-3 इत्यत्र पृच्छन्तु ।
  • विकासकाः अधिकतम-आविष्कार- क्षमतायै npmbootstrap अथवा तत्सदृश-वितरण-तन्त्राणां माध्यमेन वितरणं कुर्वन् Bootstrap इत्यस्य कार्यक्षमतां परिवर्तयन्ति वा योजयन्ति वा इति संकुलेषु कीवर्डस्य उपयोगं कुर्वन्तु
  • Bootstrap Expo इत्यत्र Bootstrap इत्यनेन सह निर्माणस्य जनानां प्रेरणादायकानि उदाहरणानि अन्वेष्टुम् .

नवीनतमं गपशपं भयानकं संगीतविडियो च द्रष्टुं भवान् ट्विट्टरे @getbootstrap इत्यस्य अनुसरणं अपि कर्तुं शक्नोति ।

प्रतिक्रियाशीलतां निष्क्रियं कृत्वा

Bootstrap स्वयमेव भवतः पृष्ठानि विविधपर्दे आकाराणां कृते अनुकूलयति । अत्र एतत् विशेषतां कथं निष्क्रियं कर्तव्यं येन भवतः पृष्ठम् एतत् अप्रतिसादात्मकं उदाहरणं इव कार्यं करोति .

पृष्ठप्रतिक्रियाशीलतां निष्क्रियं कर्तुं चरणाः

  1. CSS docs<meta> मध्ये उल्लिखितं viewport परित्यजन्तु
  2. एकेन विस्तारेण सह प्रत्येकस्य जालस्तरस्य कृते widthon the .containerअधिलिखतु, उदाहरणार्थं width: 970px !important;सुनिश्चितं कुर्वन्तु यत् एतत् पूर्वनिर्धारित Bootstrap CSS इत्यस्य अनन्तरं आगच्छति । भवान् वैकल्पिकरूपेण !importantwith media queries अथवा किञ्चित् selector-fu परिहर्तुं शक्नोति ।
  3. यदि navbars इत्यस्य उपयोगं करोति तर्हि सर्वं navbar collapsing and expanding व्यवहारं निष्कासयन्तु ।
  4. .col-xs-*जालविन्यासानां कृते मध्यम/बृहत्तानां अतिरिक्तं, अथवा स्थाने वर्गाणां उपयोगं कुर्वन्तु । चिन्ता न कुर्वन्तु, अतिरिक्त-लघु-यन्त्रजालं सर्वेषु संकल्पेषु स्केल करोति ।

भवद्भ्यः अद्यापि IE8 कृते Respond.js इत्यस्य आवश्यकता भविष्यति (यतोहि अस्माकं मीडिया-प्रश्नानि अद्यापि सन्ति, तेषां संसाधनं करणीयम् अस्ति) । एतेन Bootstrap इत्यस्य "mobile site" इति पक्षाः निष्क्रियाः भवन्ति ।

प्रतिक्रियाशीलता अक्षम सहित बूटस्ट्रैप टेम्पलेट

वयं एतानि पदानि एकस्मिन् उदाहरणे प्रयुक्तवन्तः। कार्यान्विताः विशिष्टपरिवर्तनानि द्रष्टुं तस्य स्रोतसङ्केतं पठन्तु ।

अप्रतिसादात्मकं उदाहरणं पश्यन्तु

v2.x तः v3.x मध्ये प्रवासनम्

Bootstrap इत्यस्य प्राचीनसंस्करणात् v3.x प्रति प्रवासं कर्तुं पश्यन् वा? अस्माकं प्रवासमार्गदर्शिकां पश्यन्तु .

ब्राउज़र एवं उपकरण समर्थन

बूटस्ट्रैप् नवीनतम-डेस्कटॉप्-मोबाइल-ब्राउजर्-मध्ये सर्वोत्तम-कार्यं कर्तुं निर्मितम् अस्ति, अर्थात् प्राचीन-ब्राउजर्-इत्येतत् कतिपयानां घटकानां भिन्न-शैली-युक्तानि, यद्यपि पूर्णतया कार्यात्मकानि, प्रतिपादनानि प्रदर्शयितुं शक्नुवन्ति

समर्थित ब्राउज़र

विशेषतः वयं निम्नलिखित-ब्राउजर्-मञ्चानां नवीनतम-संस्करणानाम् समर्थनं कुर्मः ।

वैकल्पिक ब्राउजर् ये WebKit, Blink, अथवा Gecko इत्यस्य नवीनतमं संस्करणं उपयुञ्जते, ते प्रत्यक्षतया वा मञ्चस्य web view API मार्गेण वा, ते स्पष्टतया समर्थिताः न सन्ति। तथापि, Bootstrap (अधिकांशप्रसङ्गेषु) एतेषु ब्राउजर्-मध्ये अपि सम्यक् प्रदर्शयितव्यं कार्यं च कर्तव्यम् । अधिकविशिष्टसमर्थनसूचना अधः प्रदत्ता अस्ति।

मोबाईल उपकरण

सामान्यतया, Bootstrap प्रत्येकस्य प्रमुखमञ्चस्य पूर्वनिर्धारितब्राउजरस्य नवीनतमसंस्करणं समर्थयति । ध्यानं कुर्वन्तु यत् प्रॉक्सी ब्राउजर् (यथा Opera Mini, Opera Mobile इत्यस्य Turbo मोड, UC Browser Mini, Amazon Silk) समर्थिताः न सन्ति ।

क्रोम इति फायरफॉक्स इति सफारी
एण्ड्रॉयड् इति समर्थित समर्थित न/अ
iOS इति समर्थित समर्थित समर्थित

डेस्कटॉप ब्राउज़र

तथैव अधिकांशस्य डेस्कटॉप् ब्राउजर् इत्यस्य नवीनतमसंस्करणं समर्थितम् अस्ति ।

क्रोम इति फायरफॉक्स इति अन्तर्जाल एक्स्प्लोरर ओपेरा सफारी
मैक समर्थित समर्थित न/अ समर्थित समर्थित
विण्डोजः समर्थित समर्थित समर्थित समर्थित न समर्थितम्

विण्डोज इत्यत्र वयं Internet Explorer 8-11 इत्यस्य समर्थनं कुर्मः

Firefox कृते, नवीनतमस्य सामान्यस्थिरविमोचनस्य अतिरिक्तं, वयं Firefox इत्यस्य नवीनतमस्य विस्तारितसमर्थनविमोचनस्य (ESR) संस्करणस्य अपि समर्थनं कुर्मः ।

अनधिकृतरूपेण, Bootstrap इत्येतत् Chromium तथा Chrome for Linux, Firefox for Linux, Internet Explorer 7 इत्येतयोः कृते पर्याप्तं सुन्दरं दृश्यते, व्यवहारं च कर्तव्यम्, तथा च Microsoft Edge इत्यत्र, यद्यपि ते आधिकारिकतया समर्थिताः न सन्ति

Bootstrap इत्यस्य केषाञ्चन ब्राउजर्-दोषाणां सूचीयाः कृते अस्माकं Wall of browser bugs पश्यन्तु ।

अन्तर्जाल एक्स्प्लोरर 8 तथा 9

Internet Explorer 8 तथा 9 अपि समर्थिताः सन्ति तथापि कृपया अवगच्छन्तु यत् केचन CSS3 गुणाः HTML5 तत्त्वानि च एतैः ब्राउजर्-द्वारा पूर्णतया समर्थिताः न सन्ति तदतिरिक्तं, Internet Explorer 8 इत्यत्र media query support सक्षमीकरणाय Respond.js इत्यस्य उपयोगः आवश्यकः अस्ति ।

गुणः अन्तर्जाल एक्स्प्लोरर 8 अन्तर्जाल एक्स्प्लोरर 9
border-radius न समर्थितम् समर्थित
box-shadow न समर्थितम् समर्थित
transform न समर्थितम् समर्थितम्, -msउपसर्गसहितम्
transition न समर्थितम्
placeholder न समर्थितम्

CSS3 तथा HTML5 विशेषतानां ब्राउजर् समर्थनविषये विवरणार्थं Can I use... इति पश्यन्तु ।

इन्टरनेट् एक्स्प्लोरर 8 तथा Respond.js इति

Internet Explorer 8 कृते स्वस्य विकासस्य उत्पादनस्य च वातावरणेषु Respond.js इत्यस्य उपयोगं कुर्वन् निम्नलिखित-सावधानीभ्यः सावधानाः भवन्तु ।

Respond.js तथा क्रॉस-डोमेन CSS

भिन्न (उप)डोमेन् (उदाहरणार्थं, CDN इत्यत्र) होस्ट् कृते CSS इत्यनेन सह Respond.js इत्यस्य उपयोगाय किञ्चित् अतिरिक्तं सेटअप आवश्यकम् अस्ति । विस्तरेण ज्ञातुं Respond.js docs पश्यन्तु ।

Respond.js इति चfile://

ब्राउजर् सुरक्षानियमानां कारणात्, Respond.js file://प्रोटोकॉलद्वारा दृष्टैः पृष्ठैः सह कार्यं न करोति (यथा स्थानीय HTML सञ्चिकां उद्घाटयति समये) । IE8 इत्यस्मिन् प्रतिक्रियाशीलविशेषतानां परीक्षणार्थं HTTP(S) इत्यनेन स्वपृष्ठानि पश्यन्तु । विस्तरेण ज्ञातुं Respond.js docs पश्यन्तु ।

Respond.js इति च@import

Respond.js इत्यनेन सह सन्दर्भितं CSS इत्यनेन सह कार्यं न करोति यत् @import. विशेषतः, केचन Drupal विन्यासाः उपयुज्यन्ते इति ज्ञायते @importविस्तरेण ज्ञातुं Respond.js docs पश्यन्तु ।

Internet Explorer 8 तथा बॉक्स-आकारीकरणम्

IE8 , , , अथवा box-sizing: border-box;इत्यनेन सह संयुक्ते सति पूर्णतया समर्थनं न करोति । तदर्थं v3.0.1 तः वयं s इत्यत्र न पुनः उपयुञ्ज्महे ।min-widthmax-widthmin-heightmax-heightmax-width.container

इन्टरनेट् एक्स्प्लोरर 8 तथा @font-face इति

IE8 इत्यस्य केचन समस्याः सन्ति @font-faceयदा :before. Bootstrap इत्येतत् संयोजनं स्वस्य Glyphicons इत्यनेन सह उपयुज्यते । यदि पृष्ठं संग्रहीतं भवति, तथा च विण्डो उपरि मूषकं विना लोड् भवति (अर्थात् refresh बटनं नुदन्तु अथवा iframe मध्ये किमपि लोड् कुर्वन्तु) तर्हि पृष्ठं font लोड् करणात् पूर्वं रेण्डर् भवति पृष्ठस्य (शरीरस्य) उपरि भ्रमन् केचन चिह्नानि दर्शयिष्यन्ति तथा च शेषचिह्नानां उपरि भ्रमन् तानि अपि दर्शयिष्यन्ति । विस्तरेण ज्ञातुं अंक #13863 पश्यन्तु।

IE संगतता मोड

पुरातन Internet Explorer संगतताविधाने बूटस्ट्रैप् समर्थितं नास्ति । IE कृते नवीनतमं प्रतिपादनविधिः उपयुज्यते इति सुनिश्चित्य, <meta>स्वपृष्ठेषु समुचितं टैग् समावेशयितुं विचारयन्तु:

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

त्रुटिनिवारणसाधनं उद्घाट्य दस्तावेजविधिं पुष्टयन्तु: F12"दस्तावेजविधिः" नुत्वा पश्यन्तु ।

Internet Explorer इत्यस्य प्रत्येकस्मिन् समर्थितसंस्करणे सम्भवतः उत्तमं प्रतिपादनं सुनिश्चित्य Bootstrap इत्यस्य सर्वेषु दस्तावेजेषु उदाहरणेषु च एतत् टैग् समाविष्टम् अस्ति ।

अधिकसूचनार्थं एतत् StackOverflow प्रश्नं पश्यन्तु ।

विण्डोज 8 तथा विण्डोज फोन 8 इत्यस्मिन् Internet Explorer 10 इति

Internet Explorer 10 यन्त्रविस्तारं viewport width इत्यस्मात् भिन्नं न करोति , तथा च Bootstrap इत्यस्य CSS मध्ये मीडियाप्रश्नानि सम्यक् न प्रयोजयति । सामान्यतया भवान् केवलं एतत् समाधातुं CSS इत्यस्य द्रुतं स्निपेट् योजयिष्यति स्म:

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

तथापि, एतत् Update 3 (उर्फ GDR3) इत्यस्मात् प्राचीनतरं Windows Phone 8 संस्करणं चालितानां उपकरणानां कृते कार्यं न करोति , यतः एतादृशानां उपकरणानां कारणेन संकीर्ण "फोन" दृश्यस्य स्थाने अधिकतया डेस्कटॉप् दृश्यं दर्शयति एतत् सम्बोधयितुं, भवद्भिः निम्नलिखितम् CSS तथा JavaScript समाविष्टं कर्तव्यं भविष्यति bug इत्यस्य परितः कार्यं कर्तुं

@-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 पठन्तु ।

एकः heads up इति रूपेण, वयं Bootstrap इत्यस्य सर्वेषु दस्तावेजेषु उदाहरणेषु च एतत् प्रदर्शनरूपेण समावेशयामः ।

सफारी प्रतिशत गोलीकरण

.col-*-1OS X कृते v7.1 तथा iOS v8.0 कृते सफारी इत्यस्मात् पूर्वं सफारी इत्यस्य संस्करणानाम् रेण्डरिंग् इञ्जिन् अस्माकं ग्रिड् वर्गेषु प्रयुक्तानां दशमलवस्थानानां संख्यायां किञ्चित् समस्या आसीत् अतः यदि भवतां समीपे १२ व्यक्तिगतजालस्तम्भाः आसन् तर्हि भवान् अवलोकयिष्यति यत् ते स्तम्भानां अन्यपङ्क्तयः अपेक्षया लघुः आगताः । Safari/iOS उन्नयनस्य अतिरिक्तं, भवतः समीपे कार्यपरिहारार्थं केचन विकल्पाः सन्ति:

  • .pull-rightकठिन-दक्षिण-संरेखणं प्राप्तुं स्वस्य अन्तिम-जाल-स्तम्भे योजयन्तु
  • सफारी कृते सम्यक् गोलीकरणं प्राप्तुं स्वस्य प्रतिशतं मैन्युअल् रूपेण ट्वीक् कुर्वन्तु (प्रथमविकल्पात् अधिकं कठिनम्)

मोडल्स्, नवबार्स्, वर्चुअल् कीबोर्ड्स् च

ओवरफ्लो एवं स्क्रॉलिंग

overflow: hiddenon the element इत्यस्य समर्थनं <body>iOS तथा Android इत्यत्र अत्यन्तं सीमितम् अस्ति । तदर्थं यदा भवान् तेषु द्वयोः अपि यन्त्रयोः ब्राउजर् मध्ये मोडल् इत्यस्य उपरि अधः वा स्क्रॉलं करोति तदा <body>सामग्री स्क्रॉल कर्तुं आरभेत । Chrome दोष #175502 ( Chrome v40 मध्ये निवारितम्) तथा WebKit दोष #153852 पश्यन्तु

iOS पाठक्षेत्राणि तथा स्क्रॉलिंग्

iOS 9.3 इत्यस्मात् आरभ्य, यदा कश्चन मोडल् उद्घाटितः अस्ति, यदि स्क्रॉल-इशारेः आरम्भिकः स्पर्शः पाठ्यस्य <input>अथवा a -इत्यस्य सीमायाः अन्तः अस्ति <textarea>, तर्हि <body>मोडल्-इत्यस्य अधः विद्यमाना सामग्री मोडल्-इत्यस्य एव स्थाने स्क्रॉल-कृता भविष्यति वेबकिट दोष #153856 देखें ।

वर्चुअल कीबोर्ड

अपि च, ध्यानं कुर्वन्तु यत् यदि भवान् नियतनवबारस्य उपयोगं करोति अथवा मोडालस्य अन्तः निवेशानां उपयोगं करोति तर्हि iOS इत्यत्र एकः रेण्डरिंग्-दोषः अस्ति यः वर्चुअल् कीबोर्ड्-प्रवर्तनस्य समये नियत-तत्त्वानां स्थितिं अद्यतनं न करोति अस्य कृते कतिपयानि कार्यपरिहाराः अन्तर्भवन्ति यत् भवतः तत्त्वानि परिवर्तयितुं position: absoluteवा फोकस इत्यत्र समयनिर्धारकं आह्वयितुं वा स्थितिनिर्धारणं मैन्युअल् रूपेण सम्यक् कर्तुं प्रयत्नः करणीयः । एतत् Bootstrap द्वारा न सम्पादितं भवति, अतः भवतः अनुप्रयोगाय कः समाधानः उत्तमः इति निर्णयः भवतः निर्णयः अस्ति ।

.dropdown-backdropz-indexing इत्यस्य जटिलतायाः कारणात् nav इत्यस्मिन् iOS इत्यत्र तत्त्वं न उपयुज्यते । एवं, navbars मध्ये dropdowns बन्दं कर्तुं, भवद्भिः प्रत्यक्षतया dropdown element (अथवा अन्यः कोऽपि element यः iOS मध्ये click event प्रज्वालयति ) क्लिक् कर्तव्यः ।

ब्राउज़र जूमिंग

पृष्ठस्य जूमिंग् अनिवार्यतया केषुचित् घटकेषु रेण्डरिंग आर्टिफैक्ट् प्रस्तुतं करोति, Bootstrap इत्यत्र अपि च शेषजालस्य मध्ये । मुद्देः आधारेण वयं तत् समाधातुं शक्नुमः (प्रथमं अन्वेषणं कुर्वन्तु ततः आवश्यकतानुसारं मुद्दाम् उद्घाटयन्तु)। तथापि वयं एतान् उपेक्षितुं प्रवृत्ताः स्मः यतः तेषु प्रायः हैकी-कार्यपरिहारात् परं प्रत्यक्षं समाधानं नास्ति ।

चिपचिपा :hover/ :focusमोबाइल पर

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

मुद्रणम्

केषुचित् आधुनिकब्राउजर्-मध्ये अपि मुद्रणं विचित्रं भवितुम् अर्हति ।

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

  • अतिरिक्त-लघु जालम् आलिंगयन्तु तथा च सुनिश्चितं कुर्वन्तु यत् भवतः पृष्ठं तस्य अधः स्वीकार्यं दृश्यते।
  • Less चरस्य मूल्यानि @screen-*अनुकूलयन्तु येन भवतः मुद्रकपत्रं अतिरिक्त-लघु-अपेक्षया बृहत्तरं मन्यते ।
  • केवलं मुद्रणमाध्यमानां कृते जाल-आकार-विच्छेद-बिन्दून् परिवर्तयितुं इष्ट-माध्यम-प्रश्नानि योजयन्तु ।

अपि च, Safari v8.0 इत्यस्य रूपेण, fixed-width .containers इत्यनेन मुद्रणकाले Safari इत्यस्य असामान्यरूपेण लघु font आकारस्य उपयोगः कर्तुं शक्यते । अधिकविवरणार्थं #14868 तथा WebKit bug #138192 पश्यन्तु । अस्य कृते एकं सम्भाव्यं कार्यपरिहारं निम्नलिखितम् CSS योजयितुं भवति ।

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

Android स्टॉक ब्राउज़र

पेटीतः बहिः, Android 4.1 (तथा अपि केचन नवीनाः विमोचनाः प्रत्यक्षतया) Browser app इत्यनेन सह चयनस्य पूर्वनिर्धारितजालब्राउजर् (Chrom इत्यस्य विरुद्धम्) रूपेण निर्यातयन्ति। दुर्भाग्येन Browser app इत्यस्मिन् सामान्यतया CSS इत्यनेन सह बहुधा दोषाः असङ्गतिः च अस्ति ।

मेनू चयनं कुर्वन्तु

तत्वेषु <select>, Android स्टॉक ब्राउज़रः पार्श्वनियन्त्रणानि न प्रदर्शयिष्यति यदि एकः अस्ति border-radiusतथा/वा borderप्रयुक्तः अस्ति। (विवरणार्थं एतत् StackOverflow प्रश्नं पश्यन्तु।) आपत्तिजनकं CSS निष्कासयितुं अधोलिखितस्य कोडस्य स्निपेटस्य उपयोगं कुर्वन्तु तथा <select>च Android स्टॉक ब्राउजरे the as an unstyled element render. उपयोक्तृ-एजेण्ट-स्निफिंग्-करणेन Chrome, Safari, Mozilla ब्राउजर्-मध्ये हस्तक्षेपः परिहरति ।

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

उदाहरणं द्रष्टुम् इच्छति वा ? एतत् JS Bin डेमो पश्यन्तु।

प्रमाणकर्त्ता

पुरातनं तथा दोषपूर्णं ब्राउजर् मध्ये उत्तमं सम्भवं अनुभवं प्रदातुं Bootstrap ब्राउजर् मध्ये एव दोषाणां परितः कार्यं कर्तुं कतिपयेषु ब्राउजर् संस्करणेषु विशेष CSS लक्ष्यं कर्तुं अनेकस्थानेषु CSS ब्राउज़र हैक्स् इत्यस्य उपयोगं करोति एते हैक्स् अवगम्यते यत् CSS प्रमाणकर्तृभ्यः ते अमान्यम् इति शिकायतुं प्रवृत्ताः भवन्ति। दम्पती स्थानेषु वयं रक्तस्राव-धार-CSS-विशेषतानां अपि उपयोगं कुर्मः ये अद्यापि पूर्णतया मानकीकृताः न सन्ति, परन्तु एतानि केवलं प्रगतिशील-वर्धनार्थं उपयुज्यन्ते ।

एतानि प्रमाणीकरणचेतावनी व्यवहारे महत्त्वं न ददति यतः अस्माकं CSS इत्यस्य गैर-हैकी भागः पूर्णतया प्रमाणीकरणं करोति तथा च हैकी भागाः गैर-हैकी भागस्य सम्यक् कार्ये बाधां न जनयन्ति, अतः वयं एतानि विशेषाणि चेतावनीनि किमर्थं जानी-बुझकर अवहेलयामः।

अस्माकं HTML दस्तावेजेषु अपि तथैव कतिपयस्य Firefox दोषस्य कृते अस्माकं कार्यपरिहारस्य समावेशस्य कारणेन केचन तुच्छाः अपरिणामिकाः च HTML प्रमाणीकरणचेतावनीः सन्ति |.

तृतीय पक्ष समर्थन

यद्यपि वयं आधिकारिकतया कस्यापि तृतीयपक्षस्य प्लगिन्स् अथवा ऐड-ऑन्स् इत्यस्य समर्थनं न कुर्मः तथापि भवतः परियोजनासु सम्भाव्यसमस्यानां परिहाराय सहायतार्थं किञ्चित् उपयोगी सल्लाहं प्रदामः।

पेटी-आकारः

Google Maps तथा Google Custom Search Engine सहितं केचन तृतीयपक्षस्य सॉफ्टवेयरं Bootstrap इत्यनेन सह विग्रहं कुर्वन्ति due to * { box-sizing: border-box; }, एकः नियमः यः एतत् करोति सः paddingकस्यचित् तत्त्वस्य अन्तिमगणितविस्तारं न प्रभावितं करोति CSS Tricks इत्यत्र बॉक्स मॉडल् तथा साइजिंग् विषये अधिकं ज्ञातुं शक्नुवन्ति .

सन्दर्भानुसारं, भवान् यथा-आवश्यकताम् (विकल्पः १) अधिलिखितुं शक्नोति अथवा सम्पूर्णप्रदेशानां कृते पेटी-आकारं पुनः सेट् कर्तुं शक्नोति (विकल्पः २) ।

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

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

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

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

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

सुलभता

Bootstrap सामान्यजालमानकानां अनुसरणं करोति तथा च—न्यूनतमं अतिरिक्तप्रयत्नेन— AT इत्यस्य उपयोगं कुर्वतां कृते सुलभानि साइट्-स्थानानि निर्मातुं उपयोक्तुं शक्यते ।

नेविगेशनं त्यजतु

यदि भवतां नेविगेशन इत्यत्र बहवः लिङ्काः सन्ति तथा च DOM मध्ये मुख्यसामग्रीतः पूर्वं आगच्छ���ि तर्हि नेविगेशनात् Skip to main contentपूर्वं लिङ्क् योजयन्तु (सरलव्याख्यानार्थं, skip navigation links इत्यस्य विषये एतत् A11Y Project लेखं पश्यन्तु ) वर्गस्य उपयोगेन .sr-onlyskip लिङ्क् दृग्गतरूपेण गोपनीयं भविष्यति, तथा च .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 इत्यस्य AccessAbility इत्यत्र अधिकं ज्ञातुं शक्नुवन्ति ।

वर्ण विपरीतता

सम्प्रति, Bootstrap मध्ये उपलभ्यमानाः केचन पूर्वनिर्धारितवर्णसंयोजनाः (यथा विविधशैलीयुक्ताः बटनवर्गाः , मूलभूतसङ्केतखण्डानां कृते प्रयुक्ताः केचन कोडप्रकाशनवर्णाः , .bg-primary सन्दर्भपृष्ठभूमिसहायकवर्गः , तथा च श्वेतपृष्ठभूमिषु प्रयुक्ते पूर्वनिर्धारितलिङ्कवर्णः) न्यूनविपरीततानुपातः भवति ( ४.५:१ अनुशंसितअनुपातात् अधः ) । एतेन न्यूनदृष्टियुक्तानां वा वर्णान्धानां वा उपयोक्तृणां समस्या भवितुम् अर्हति । एतेषां पूर्वनिर्धारितवर्णानां विपरीततां पठनीयतां च वर्धयितुं परिवर्तनस्य आवश्यकता भवेत् ।

अतिरिक्त संसाधन

अनुज्ञापत्र FAQs

Bootstrap MIT अनुज्ञापत्रस्य अन्तर्गतं विमोचितं अस्ति तथा च प्रतिलिपिधर्मः 2019 Twitter अस्ति। लघुखण्डेषु क्वाथं कृत्वा निम्नलिखितशर्तैः वर्णयितुं शक्यते ।

अस्य आवश्यकता अस्ति यत् - १.

  • यदा भवान् स्वकार्ययोः उपयोगं करोति तदा Bootstrap इत्यस्य CSS तथा JavaScript सञ्चिकासु अनुज्ञापत्रं प्रतिलिपिधर्मसूचना च समाविष्टा रक्षतु

एतत् भवन्तं अनुमन्यते यत् : १.

  • स्वतन्त्रतया डाउनलोड् कृत्वा Bootstrap इत्यस्य उपयोगं कुर्वन्तु, सम्पूर्णतया वा अंशतः वा, व्यक्तिगत-निजी-कम्पनी-आन्तरिक-व्यापारिक-उद्देश्यैः
  • भवन्तः यत् संकुलं वा वितरणं वा निर्मान्ति तस्मिन् Bootstrap इत्यस्य उपयोगं कुर्वन्तु
  • स्रोतसङ्केतं परिवर्तयन्तु
  • अनुज्ञापत्रे न समाविष्टानां तृतीयपक्षेभ्यः Bootstrap परिवर्तयितुं वितरितुं च उपअनुज्ञापत्रं प्रदातव्यम्

भवन्तं निषेधयति : १.

  • लेखकान् अनुज्ञापत्रस्वामिनः च क्षतिस्य उत्तरदायी धारयन्तु यतः Bootstrap वारण्टीं विना प्रदत्तम् अस्ति
  • Bootstrap के निर्माताओं या प्रतिलिपि अधिकार धारकों को उत्तरदायी रखें
  • Bootstrap इत्यस्य किमपि भागं सम्यक् विशेषणं विना पुनः वितरन्तु
  • ट्विटर-स्वामित्वयुक्तानि कानिचन चिह्नानि यथापि प्रकारेण उपयुज्यताम् यत् ट्विटर भवतः वितरणस्य समर्थनं करोति इति कथयितुं वा सूचयितुं वा शक्नोति
  • ट्विटर-स्वामित्वयुक्तानि कानिचन चिह्नानि यथापि प्रकारेण उपयुज्यताम् यत् भवान् प्रश्ने ट्विटर-सॉफ्टवेयरं निर्मितवान् इति कथयितुं वा सूचयितुं वा शक्नोति

न भवतः आवश्यकता अस्ति : १.

  • Bootstrap इत्यस्य स्रोतः एव, अथवा भवता तस्मिन् कृतस्य किमपि परिवर्तनस्य, यत्किमपि पुनर्वितरणं भवता संयोजितुं शक्यते यत् तत् समावेशितं भवति तस्मिन् समावेशयन्तु
  • भवन्तः यत् परिवर्तनं Bootstrap मध्ये कुर्वन्ति तत् Bootstrap परियोजनायां पुनः प्रस्तौतु (यद्यपि एतादृशी प्रतिक्रिया प्रोत्साहिता अस्ति)

अधिकसूचनार्थं पूर्णं Bootstrap अनुज्ञापत्रं परियोजनाभण्डारे स्थितम् अस्ति ।

अनुवादाः

समुदायस्य सदस्यैः Bootstrap इत्यस्य दस्तावेजीकरणं विविधभाषासु अनुवादितम् अस्ति । कोऽपि आधिकारिकतया समर्थितः नास्ति तथा च ते सर्वदा अद्यतनं न भवेयुः।

वयं अनुवादानाम् आयोजने वा आतिथ्यं कर्तुं वा साहाय्यं न कुर्मः, केवलं तेषां लिङ्क् कुर्मः।

नूतनः अथवा उत्तमः अनुवादः समाप्तः? अस्माकं सूचीयां योजयितुं पुल अनुरोधं उद्घाटयन्तु।