सुरु गर्दै
बुटस्ट्र्यापको एक सिंहावलोकन, कसरी डाउनलोड र प्रयोग गर्ने, आधारभूत टेम्प्लेटहरू र उदाहरणहरू, र थप।
बुटस्ट्र्यापको एक सिंहावलोकन, कसरी डाउनलोड र प्रयोग गर्ने, आधारभूत टेम्प्लेटहरू र उदाहरणहरू, र थप।
बुटस्ट्र्याप (हाल v3.3.7) मा छिट्टै सुरु गर्नका लागि केही सजिलो तरिकाहरू छन्, प्रत्येकले फरक कौशल स्तर र प्रयोगको मामलामा अपील गर्दछ। तपाइँको विशेष आवश्यकताहरु के अनुरूप हेर्न को लागी पढ्नुहोस्।
कम्पाइल गरिएको र सीएसएस, जाभास्क्रिप्ट, र फन्टहरू सानो। कुनै कागजात वा मूल स्रोत फाइलहरू समावेश छैनन्।
स्रोत कम, जाभास्क्रिप्ट, र फन्ट फाइलहरू, हाम्रा कागजातहरू सहित। कम कम्पाइलर र केही सेटअप आवश्यक छ ।
रेल, कम्पास, वा Sass-मात्र परियोजनाहरूमा सजिलै समावेश गर्नको लागि बुटस्ट्र्यापलाई Less देखि Sass मा पोर्ट गरियो।
jsDelivr मा रहेका मानिसहरूले बुटस्ट्र्यापको CSS र JavaScript को लागि CDN समर्थन प्रदान गर्दछ। केवल यी बुटस्ट्र्याप CDN लिङ्कहरू प्रयोग गर्नुहोस्।
तपाईंले Bower प्रयोग गरेर Bootstrap को Less, CSS, JavaScript, र फन्टहरू पनि स्थापना र व्यवस्थापन गर्न सक्नुहुन्छ :
तपाइँ पनि npm प्रयोग गरेर Bootstrap स्थापना गर्न सक्नुहुन्छ :
require('bootstrap')
सबै बुटस्ट्र्यापको jQuery प्लगइनहरू jQuery वस्तुमा लोड गर्नेछ। bootstrap
मोड्युल आफैले केहि निर्यात गर्दैन । /js/*.js
तपाईंले प्याकेजको शीर्ष-स्तर डाइरेक्टरी अन्तर्गत फाइलहरू लोड गरेर व्यक्तिगत रूपमा Bootstrap को jQuery प्लगइनहरू लोड गर्न सक्नुहुन्छ।
Bootstrap's package.json
ले निम्न कुञ्जीहरू अन्तर्गत केही अतिरिक्त मेटाडेटा समावेश गर्दछ:
less
- बुटस्ट्र्यापको मुख्य कम स्रोत फाइलको लागि मार्गstyle
- बुटस्ट्र्यापको गैर-मिनिफाइड CSS को मार्ग जुन पूर्वनिर्धारित सेटिङहरू प्रयोग गरेर पूर्व-कम्पाइल गरिएको छ (कुनै अनुकूलन छैन)तपाइँ कम्पोजर प्रयोग गरेर Bootstrap को Less, CSS, JavaScript, र फन्टहरू पनि स्थापना र व्यवस्थापन गर्न सक्नुहुन्छ :
बुटस्ट्र्यापले CSS विक्रेता उपसर्गहरूसँग व्यवहार गर्न Autoprefixer प्रयोग गर्दछ । यदि तपाइँ यसको Less/Sass स्रोतबाट बुटस्ट्र्याप कम्पाइल गर्दै हुनुहुन्छ र हाम्रो Gruntfile प्रयोग नगर्दै हुनुहुन्छ भने, तपाइँले Autoprefixer लाई तपाइँको निर्माण प्रक्रियामा आफैं एकीकृत गर्न आवश्यक छ। यदि तपाइँ पूर्वकम्पाइल गरिएको बुटस्ट्र्याप प्रयोग गर्दै हुनुहुन्छ वा हाम्रो ग्रन्टफाइल प्रयोग गर्दै हुनुहुन्छ भने, तपाइँले यसको बारेमा चिन्ता लिनु पर्दैन किनभने Autoprefixer पहिले नै हाम्रो Gruntfile मा एकीकृत छ।
बुटस्ट्र्याप दुई ढाँचाहरूमा डाउनलोड गर्न सकिन्छ, जस भित्र तपाईंले निम्न डाइरेक्टरीहरू र फाइलहरू फेला पार्नुहुनेछ, तार्किक रूपमा साझा स्रोतहरू समूहबद्ध गर्दै र दुवै संकलित र मिनिफाइड भिन्नताहरू प्रदान गर्दछ।
कृपया ध्यान दिनुहोस् कि सबै JavaScript प्लगइनहरूलाई jQuery समावेश गर्न आवश्यक छ, जस्तै स्टार्टर टेम्प्लेटमा देखाइएको छ । jQuery को कुन संस्करणहरू समर्थित छन् भनेर हेर्नको लागि हाम्रो सल्लाह लिनुहोस् ।bower.json
एक पटक डाउनलोड भएपछि, (कम्पाइल गरिएको) बुटस्ट्र्यापको संरचना हेर्न कम्प्रेस गरिएको फोल्डरलाई अनजिप गर्नुहोस्। तपाईंले यो जस्तै केहि देख्नुहुनेछ:
यो बुटस्ट्र्यापको सबैभन्दा आधारभूत रूप हो: लगभग कुनै पनि वेब परियोजनामा द्रुत ड्रप-इन प्रयोगको लागि पूर्व-कम्पाइल गरिएका फाइलहरू। हामी कम्पाइल गरिएको CSS र JS ( bootstrap.*
), साथै कम्पाइल गरिएको र minified CSS र JS ( bootstrap.min.*
) प्रदान गर्दछौं। CSS स्रोत नक्साहरू ( bootstrap.*.map
) निश्चित ब्राउजरहरूको विकासकर्ता उपकरणहरूसँग प्रयोगको लागि उपलब्ध छन्। Glyphicons बाट फन्टहरू समावेश छन्, जस्तै वैकल्पिक बुटस्ट्र्याप विषयवस्तु हो।
बुटस्ट्र्याप स्रोत कोड डाउनलोडमा पूर्व-कम्पाइल गरिएको CSS, JavaScript, र फन्ट सम्पत्तिहरू, स्रोत कम, JavaScript, र कागजातहरू समावेश छन्। थप विशेष रूपमा, यसले निम्न र थप समावेश गर्दछ:
less/
, js/
र fonts/
हाम्रो CSS, JS, र आइकन फन्टहरू (क्रमशः) को लागि स्रोत कोड हो । फोल्डरले माथिको dist/
पूर्वकम्पाइल गरिएको डाउनलोड सेक्सनमा सूचीबद्ध सबै चीजहरू समावेश गर्दछ। फोल्डरमा हाम्रो कागजात, र बुटस्ट्र्याप प्रयोगको docs/
स्रोत कोड समावेश छ । examples/
त्यस बाहेक, कुनै पनि अन्य समावेश गरिएको फाइलले प्याकेजहरू, इजाजतपत्र जानकारी, र विकासको लागि समर्थन प्रदान गर्दछ।
बुटस्ट्र्यापले यसको निर्माण प्रणालीको लागि ग्रन्ट प्रयोग गर्दछ , फ्रेमवर्कसँग काम गर्नका लागि सुविधाजनक विधिहरूको साथ। यो हामीले हाम्रो कोड कम्पाइल गर्ने, परीक्षणहरू चलाउने र थप कुराहरू गर्ने तरिका हो।
Grunt स्थापना गर्न, तपाईंले पहिले node.js डाउनलोड र स्थापना गर्नुपर्छ (जसमा npm समावेश छ)। npm नोड प्याकेज मोड्युलहरूको लागि खडा छ र node.js मार्फत विकास निर्भरताहरू व्यवस्थापन गर्ने तरिका हो।
त्यसपछि, आदेश रेखाबाट:grunt-cli
विश्वव्यापी रूपमा स्थापना गर्नुहोस् npm install -g grunt-cli
।/bootstrap/
डाइरेक्टरीमा नेभिगेट गर्नुहोस्, त्यसपछि चलाउनुहोस् npm install
। npm ले फाइल हेर्नेछ package.json
र त्यहाँ सूचीबद्ध आवश्यक स्थानीय निर्भरताहरू स्वचालित रूपमा स्थापना गर्नेछ।पूरा भएपछि, तपाइँ कमाण्ड लाइनबाट प्रदान गरिएका विभिन्न ग्रन्ट आदेशहरू चलाउन सक्षम हुनुहुनेछ।
grunt dist
(केवल CSS र जाभास्क्रिप्ट कम्पाइल गर्नुहोस्)संकलित र मिनिफाइड /dist/
CSS र JavaScript फाइलहरूसँग डाइरेक्टरी पुन: उत्पन्न गर्दछ। बुटस्ट्र्याप प्रयोगकर्ताको रूपमा, यो सामान्यतया तपाईले चाहानु भएको आदेश हो।
grunt watch
(हेर्नुहोस्)कम स्रोत फाइलहरू हेर्छ र तपाईंले परिवर्तन बचत गर्दा तिनीहरूलाई स्वचालित रूपमा CSS मा पुन: कम्पाइल गर्छ।
grunt test
(परीक्षणहरू चलाउनुहोस्)JSHint चलाउँछ र PhantomJS मा हेडविना QUnit परीक्षणहरू चलाउँछ ।
grunt docs
(कागजात सम्पत्तिहरू निर्माण र परीक्षण गर्नुहोस्)CSS, JavaScript, र अन्य सम्पत्तिहरू निर्माण र परीक्षण गर्दछ जुन स्थानीय रूपमा मार्फत कागजातहरू चलाउँदा प्रयोग गरिन्छ bundle exec jekyll serve
।
grunt
(बिल्कुल सबै बनाउनुहोस् र परीक्षणहरू चलाउनुहोस्)CSS र JavaScript कम्पाइल र मिनिफाइ गर्छ, कागजात वेबसाइट बनाउँछ, कागजातहरू विरुद्ध HTML5 मान्यकर्ता चलाउँछ, Customizer सम्पत्तिहरू पुन: उत्पन्न गर्छ, र थप। Jekyll आवश्यक छ । यदि तपाइँ बुटस्ट्र्यापमा ह्याक गर्दै हुनुहुन्छ भने सामान्यतया मात्र आवश्यक छ।
यदि तपाइँ निर्भरताहरू स्थापना गर्न वा ग्रन्ट आदेशहरू चलाउनमा समस्याहरू सामना गर्नुहुन्छ भने, पहिले /node_modules/
npm द्वारा उत्पन्न डाइरेक्टरी मेटाउनुहोस्। त्यसपछि, पुन: चलाउनुहोस् npm install
।
यो आधारभूत HTML टेम्प्लेटबाट सुरु गर्नुहोस्, वा यी उदाहरणहरू परिमार्जन गर्नुहोस् । हामी आशा गर्दछौं कि तपाईंले हाम्रा टेम्प्लेटहरू र उदाहरणहरूलाई आफ्नो आवश्यकता अनुरूप अनुकूलन गर्नुहुनेछ।
न्यूनतम बुटस्ट्र्याप कागजातसँग काम सुरु गर्न तलको HTML प्रतिलिपि गर्नुहोस्।
बुटस्ट्र्यापका धेरै कम्पोनेन्टहरूसँग माथिको आधारभूत टेम्प्लेटमा निर्माण गर्नुहोस्। हामी तपाइँलाई तपाइँको व्यक्तिगत परियोजनाको आवश्यकताहरु अनुरूप बुटस्ट्र्याप अनुकूलन गर्न र अनुकूलन गर्न प्रोत्साहन दिन्छौं।
बुटस्ट्र्याप भण्डार डाउनलोड गरेर तलको प्रत्येक उदाहरणको लागि स्रोत कोड प्राप्त गर्नुहोस् । docs/examples/
उदाहरणहरू निर्देशिकामा फेला पार्न सकिन्छ ।
हाम्रो कागजात अनुसार बुटस्ट्र्यापको प्रतिक्रियाशीलतालाई सजिलै असक्षम गर्नुहोस् ।
Bootlint आधिकारिक Bootstrap HTML linter उपकरण हो। यसले स्वचालित रूपमा वेबपेजहरूमा धेरै सामान्य HTML गल्तीहरूको लागि जाँच गर्दछ जुन "भेनिला" तरिकामा बुटस्ट्र्याप प्रयोग गर्दैछ। भ्यानिला बुटस्ट्र्यापका कम्पोनेन्टहरू/विजेटहरूलाई DOM को भागहरू निश्चित संरचनाहरू अनुरूप हुन आवश्यक छ। Bootlint ले जाँच गर्दछ कि बुटस्ट्र्याप कम्पोनेन्टहरूमा HTML सही रूपमा संरचित छ। तपाईको बुटस्ट्र्याप वेब विकास टूलचेनमा बुटलिन्ट थप्ने विचार गर्नुहोस् ताकि कुनै पनि सामान्य गल्तीले तपाईको परियोजनाको विकासलाई ढिलो नगरोस्।
बुटस्ट्र्यापको विकासमा अद्यावधिक रहनुहोस् र यी सहयोगी स्रोतहरूसँग समुदायमा पुग्नुहोस्।
irc.freenode.net
सर्भरमा IRC प्रयोग गरेर साथी बुटस्ट्र्यापरहरूसँग कुराकानी गर्नुहोस् ।twitter-bootstrap-3
मा सोध्नुहोस् ।bootstrap
मार्फत वितरण गर्दा बुटस्ट्र्यापको कार्यक्षमतामा परिमार्जन वा थप गर्दछ ।तपाईले ट्विटरमा @getbootstrap लाई पनि पछ्याउन सक्नुहुन्छ भर्खरको गफ र अद्भुत संगीत भिडियोहरूको लागि।
बुटस्ट्र्यापले स्वचालित रूपमा विभिन्न स्क्रिन आकारहरूको लागि तपाइँको पृष्ठहरू अनुकूलन गर्दछ। तपाईंको पृष्ठले यो गैर-उत्तरदायी उदाहरण जस्तै काम गर्नको लागि यो सुविधालाई कसरी असक्षम गर्ने भन्ने यहाँ छ ।
<meta>
उल्लेख गरिएको भ्युपोर्ट हटाउनुहोस्width
, .container
उदाहरणका लागि width: 970px !important;
यो पूर्वनिर्धारित बुटस्ट्र्याप CSS पछि आउँछ भनेर निश्चित गर्नुहोस्। तपाईं वैकल्पिक !important
रूपमा मिडिया प्रश्नहरू वा केही चयनकर्ता-फूबाट बच्न सक्नुहुन्छ।.col-xs-*
, मध्यम/ठूलाहरूका अतिरिक्त वा सट्टामा कक्षाहरू प्रयोग गर्नुहोस्। चिन्ता नगर्नुहोस्, अतिरिक्त-सानो उपकरण ग्रिडले सबै रिजोल्युसनहरूमा स्केल गर्दछ।तपाईलाई अझै पनि IE8 को लागि Respond.js को आवश्यकता पर्नेछ (हाम्रो मिडिया प्रश्नहरू अझै पनि त्यहाँ छन् र प्रशोधन गर्न आवश्यक छ)। यसले बुटस्ट्र्यापको "मोबाइल साइट" पक्षहरूलाई असक्षम पार्छ।
हामीले यी चरणहरूलाई उदाहरणमा लागू गरेका छौं। कार्यान्वयन गरिएका विशिष्ट परिवर्तनहरू हेर्नको लागि यसको स्रोत कोड पढ्नुहोस्।
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 प्रयोग गर्दा निम्न चेतावनीहरूबाट सावधान रहनुहोस्।
फरक (उप) डोमेनमा (उदाहरणका लागि, CDN मा) होस्ट गरिएको CSS को साथ Respond.js प्रयोग गर्न केही थप सेटअप आवश्यक पर्दछ। विवरणहरूको लागि Respond.js कागजातहरू हेर्नुहोस्।
file://
ब्राउजर सुरक्षा नियमहरूको कारण, Respond.js ले प्रोटोकल मार्फत हेर्ने पृष्ठहरूसँग काम गर्दैन file://
(जस्तै स्थानीय HTML फाइल खोल्दा)। IE8 मा उत्तरदायी सुविधाहरू परीक्षण गर्न, HTTP(S) मा आफ्नो पृष्ठहरू हेर्नुहोस्। विवरणहरूको लागि Respond.js कागजातहरू हेर्नुहोस्।
@import
Respond.js ले CSS सँग काम गर्दैन जुन मार्फत सन्दर्भ गरिएको छ @import
। विशेष रूपमा, केही Drupal कन्फिगरेसनहरू प्रयोग गर्न जानिन्छ @import
। विवरणहरूको लागि Respond.js कागजातहरू हेर्नुहोस्।
, , , वा box-sizing: border-box;
सँग जोड्दा IE8 ले पूर्ण रूपमा समर्थन गर्दैन । त्यस कारणका लागि, v3.0.1 को रूपमा, हामी अब s मा प्रयोग गर्दैनौं।min-width
max-width
min-height
max-height
max-width
.container
IE8 सँग @font-face
संयोजन गर्दा केही समस्याहरू छन् :before
। बुटस्ट्र्यापले त्यस संयोजनलाई यसको ग्लिफिकन्ससँग प्रयोग गर्दछ। यदि पृष्ठ क्यास गरिएको छ, र विन्डोमा माउस बिना लोड गरिएको छ (अर्थात् रिफ्रेस बटन थिच्नुहोस् वा iframe मा केहि लोड गर्नुहोस्) तब पृष्ठ फन्ट लोड हुनु अघि रेन्डर हुन्छ। पृष्ठ (बॉडी) मा होभर गर्दा केही आइकनहरू देखाउनेछ र बाँकी आइकनहरूमा होभर गर्दा ती पनि देखाउनेछन्। विवरणको लागि अंक #13863 हेर्नुहोस्।
पुरानो इन्टरनेट एक्सप्लोरर अनुकूलता मोडहरूमा बुटस्ट्र्याप समर्थित छैन। तपाईंले IE को लागि नवीनतम रेन्डरिङ मोड प्रयोग गरिरहनुभएको छ भनी सुनिश्चित गर्न, <meta>
तपाईंको पृष्ठहरूमा उपयुक्त ट्याग समावेश गर्ने विचार गर्नुहोस्:
डिबगिङ उपकरणहरू खोलेर कागजात मोड पुष्टि गर्नुहोस्: थिच्नुहोस् F12र "कागजात मोड" जाँच गर्नुहोस्।
यो ट्याग इन्टरनेट एक्सप्लोररको प्रत्येक समर्थित संस्करणमा सम्भव उत्तम रेन्डरिङ सुनिश्चित गर्नका लागि सबै बुटस्ट्र्यापका कागजातहरू र उदाहरणहरूमा समावेश गरिएको छ।
थप जानकारीको लागि यो StackOverflow प्रश्न हेर्नुहोस् ।
इन्टरनेट एक्सप्लोरर 10 ले उपकरणको चौडाइलाई भ्युपोर्ट चौडाइबाट फरक गर्दैन , र यसैले बुटस्ट्र्यापको CSS मा मिडिया क्वेरीहरू ठीकसँग लागू गर्दैन। सामान्यतया तपाईले यसलाई ठीक गर्��को लागि CSS को द्रुत स्निपेट थप्नुहुनेछ:
यद्यपि, यसले अपडेट 3 (उर्फ GDR3) भन्दा पुरानो Windows Phone 8 संस्करणहरू चलाउने यन्त्रहरूका लागि काम गर्दैन , किनकि यसले त्यस्ता यन्त्रहरूलाई साँघुरो "फोन" दृश्यको सट्टा प्रायः डेस्कटप दृश्य देखाउँछ। यसलाई सम्बोधन गर्न, तपाईंले बगको वरिपरि काम गर्न निम्न CSS र JavaScript समावेश गर्न आवश्यक छ ।
थप जानकारी र उपयोग दिशानिर्देशहरूको लागि, 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 ।
<input>
iOS 9.3 को रूपमा, मोडल खुला हुँदा, यदि स्क्रोल इशाराको प्रारम्भिक स्पर्श पाठ्य वा a को सीमा भित्र छ भने <textarea>
, <body>
मोडल मुनिको सामग्री मोडलको सट्टा स्क्रोल गरिनेछ। WebKit बग #153856 हेर्नुहोस् ।
साथै, ध्यान दिनुहोस् कि यदि तपाइँ निश्चित नेभबार प्रयोग गर्दै हुनुहुन्छ वा मोडल भित्र इनपुटहरू प्रयोग गर्दै हुनुहुन्छ भने, iOS मा रेन्डरिङ बग छ जसले भर्चुअल किबोर्ड ट्रिगर हुँदा निश्चित तत्वहरूको स्थिति अद्यावधिक गर्दैन। यसका लागि केही समाधानहरूमा तपाइँको तत्वहरूलाई रूपान्तरण गर्ने position: absolute
वा म्यानुअल रूपमा स्थिति सुधार गर्ने प्रयास गर्न फोकसमा टाइमर बोलाउने समावेश छ। यो बुटस्ट्र्याप द्वारा ह्यान्डल गरिएको छैन, त्यसैले यो तपाइँमा निर्भर छ कि तपाइँको आवेदन को लागी कुन समाधान उत्तम छ।
.dropdown-backdrop
z-इन्डेक्सिङको जटिलताका कारण यो तत्व iOS मा nav मा प्रयोग गरिएको छैन। तसर्थ, navbars मा ड्रपडाउनहरू बन्द गर्न, तपाईंले सीधै ड्रपडाउन तत्व क्लिक गर्नुपर्छ (वा iOS मा क्लिक घटना फायर गर्ने कुनै अन्य तत्व )।
पृष्ठ जुमिङले अनिवार्य रूपमा बुटस्ट्र्याप र बाँकी वेबमा केही कम्पोनेन्टहरूमा रेन्डरिङ कलाकृतिहरू प्रस्तुत गर्दछ। मुद्दामा निर्भर गर्दै, हामी यसलाई समाधान गर्न सक्षम हुन सक्छौं (पहिले खोज्नुहोस् र आवश्यक भएमा मुद्दा खोल्नुहोस्)। यद्यपि, हामी यी बेवास्ता गर्छौं किनकि तिनीहरूसँग प्रायः ह्याकी वर्कअराउन्डहरू बाहेक कुनै प्रत्यक्ष समाधान हुँदैन।
:hover
/ :focus
मोबाइलमाधेरैजसो टचस्क्रिनहरूमा वास्तविक होभरिङ सम्भव नभए पनि, धेरैजसो मोबाइल ब्राउजरहरूले होभरिङ सपोर्टको अनुकरण गर्छन् र :hover
"स्टिकी" बनाउँछन्। अन्य शब्दहरूमा, :hover
शैलीहरू एक तत्व ट्याप गरेपछि लागू गर्न सुरु हुन्छ र प्रयोगकर्ताले केही अन्य तत्व ट्याप गरेपछि मात्र लागू गर्न रोक्छ। यसले बुटस्ट्र्यापको :hover
अवस्थाहरूलाई त्यस्ता ब्राउजरहरूमा अवांछनीय रूपमा "अडकिएको" हुन सक्छ। केही मोबाइल ब्राउजरहरू पनि :focus
त्यस्तै टाँसिने बनाउँछन्। त्यस्ता शैलीहरूलाई पूर्ण रूपमा हटाउन बाहेक यी समस्याहरूको लागि हाल कुनै साधारण समाधान छैन।
केही आधुनिक ब्राउजरहरूमा पनि, मुद्रण quirky हुन सक्छ।
विशेष गरी, Chrome v32 को रूपमा र मार्जिन सेटिङहरूको वास्ता नगरी, Chrome ले वेबपेज प्रिन्ट गर्दा मिडिया प्रश्नहरू समाधान गर्दा भौतिक कागजको आकार भन्दा महत्त्वपूर्ण रूपमा साँघुरो भ्यूपोर्ट चौडाइ प्रयोग गर्दछ। यसले प्रिन्ट गर्दा बुटस्ट्र्यापको अतिरिक्त-सानो ग्रिड अप्रत्याशित रूपमा सक्रिय हुन सक्छ। केही विवरणहरूको लागि मुद्दा #12078 र Chrome बग #273306 हेर्नुहोस्। सुझाव गरिएका उपायहरू:
@screen-*
ताकि तपाईंको प्रिन्टर पेपर अतिरिक्त-सानो भन्दा ठूलो मानिन्छ।साथै, Safari v8.0 को रूपमा, निश्चित-चौडाइ .container
s ले सफारीलाई मुद्रण गर्दा असामान्य रूपमा सानो फन्ट साइज प्रयोग गर्न सक्छ। थप विवरणहरूको लागि #14868 र WebKit बग #138192 हेर्नुहोस्। यसको लागि एउटा सम्भावित समाधान निम्न CSS थप्दैछ:
बक्सको बाहिर, एन्ड्रोइड 4.1 (र केही नयाँ रिलीजहरू पनि स्पष्ट रूपमा) ब्राउजर एपसँग छनोटको पूर्वनिर्धारित वेब ब्राउजरको रूपमा पठाइन्छ (क्रोमको विपरीत)। दुर्भाग्यवश, ब्राउजर एपमा सामान्य रूपमा CSS सँग धेरै बगहरू र असंगतताहरू छन्।
तत्वहरूमा , <select>
एन्ड्रोइड स्टक ब्राउजरले साइड नियन्त्रणहरू प्रदर्शन गर्दैन यदि त्यहाँ border-radius
र/वा border
लागू गरिएको छ। ( विवरणहरूको लागि यो StackOverflow प्रश्न<select>
हेर्नुहोस्।) अपमानजनक CSS हटाउन र एन्ड्रोइड स्टक ब्राउजरमा अनस्टाइल तत्वको रूपमा प्रस्तुत गर्न तलको कोडको स्निपेट प्रयोग गर्नुहोस् । प्रयोगकर्ता एजेन्ट स्निफिङले क्रोम, सफारी र मोजिला ब्राउजरहरूमा हस्तक्षेप गर्नबाट जोगाउँछ।
उदाहरण हेर्न चाहनुहुन्छ? यो जेएस बिन डेमो जाँच गर्नुहोस्।
पुराना र बग्गी ब्राउजरहरूलाई उत्कृष्ट सम्भावित अनुभव प्रदान गर्नको लागि, बुटस्ट्र्यापले धेरै ठाउँहरूमा CSS ब्राउजर ह्याकहरू प्रयोग गर्दछ विशेष CSS लाई निश्चित ब्राउजर संस्करणहरूमा लक्षित गर्नका लागि ब्राउजरहरूमा बगहरू वरपर काम गर्न। यी ह्याकहरूले CSS प्रमाणिकरणकर्ताहरूलाई तिनीहरू अमान्य छन् भनी गुनासो गर्नको लागि बुझिन्छ। केही स्थानहरूमा, हामीले ब्लीडिङ-एज CSS सुविधाहरू पनि प्रयोग गर्छौं जुन अझै पूर्ण रूपमा मानकीकृत छैन, तर यी पूर्ण रूपमा प्रगतिशील वृद्धिको लागि प्रयोग गरिन्छ।
यी प्रमाणीकरण चेतावनीहरूले व्यवहारमा फरक पार्दैन किनभने हाम्रो CSS को गैर-ह्याकी भागले पूर्ण रूपमा प्रमाणीकरण गर्छ र ह्याकी भागहरूले गैर-ह्याकी भागको उचित कार्यमा हस्तक्षेप गर्दैन, त्यसैले हामी किन जानाजानी यी विशेष चेतावनीहरूलाई बेवास्ता गर्छौं।
हाम्रो HTML कागजातहरूमा पनि निश्चित फायरफक्स बगको लागि समाधानको समावेशको कारणले गर्दा केही तुच्छ र अप्रासंगिक HTML प्रमाणीकरण चेतावनीहरू छन् ।
हामी आधिकारिक रूपमा कुनै पनि तेस्रो पक्ष प्लगइन वा एड-अनहरूलाई समर्थन गर्दैनौं, हामी तपाईंको परियोजनाहरूमा सम्भावित समस्याहरूबाट बच्न मद्दत गर्न केही उपयोगी सल्लाहहरू प्रस्ताव गर्छौं।
Google नक्सा र Google अनुकूलन खोज इन्जिन सहित केही तेस्रो पक्ष सफ्टवेयर, बुटस्ट्र्यापसँग द्वन्द्वको कारण * { box-sizing: border-box; }
, एउटा नियम जसले यसलाई padding
तत्वको अन्तिम गणना चौडाइलाई असर गर्दैन। CSS Tricks मा बक्स मोडेल र साइजिङ बारे थप जान्नुहोस् ।
सन्दर्भमा निर्भर गर्दै, तपाईंले आवश्यकता अनुसार ओभरराइड गर्न सक्नुहुन्छ (विकल्प 1) वा सम्पूर्ण क्षेत्रहरूको लागि बक्स-साइज रिसेट गर्नुहोस् (विकल्प 2)।
बुटस्ट्र्यापले सामान्य वेब मापदण्डहरू पछ्याउँछ र - न्यूनतम अतिरिक्त प्रयासको साथ - AT प्रयोग गर्नेहरूका लागि पहुँचयोग्य साइटहरू सिर्जना गर्न प्रयोग गर्न सकिन्छ ।
यदि तपाईंको नेभिगेसनले धेरै लिङ्कहरू समावेश गर्दछ र DOM मा मुख्य सामग्रीको अगाडि आउँछ भने Skip to main content
, नेभिगेसन अघि एउटा लिङ्क थप्नुहोस् (साधारण व्याख्याको लागि, नेभिगेसन लिङ्कहरू छोड्नुहोस् मा यो A11Y परियोजना लेख हेर्नुहोस् )। .sr-only
क्लासको प्रयोगले स्किप लिंकलाई दृश्यात्मक रूपमा लुकाउनेछ, र क्लासले .sr-only-focusable
यो सुनिश्चित गर्नेछ कि एक पटक फोकस गरेपछि (दृश्य किबोर्ड प्रयोगकर्ताहरूका लागि) लिङ्क देखिने छ।
क्रोममा लामो समयदेखि रहेका कमजोरीहरू/बगहरू ( क्रोमियम बग ट्र्याकरमा मुद्दा 262171 हेर्नुहोस्) र इन्टरनेट एक्सप्लोरर ( इन-पेज लिङ्कहरूमा यो लेख हेर्नुहोस् र फोकस अर्डर ) को कारणले गर्दा, तपाईंले आफ्नो स्किप लिङ्कको लक्ष्य सुनिश्चित गर्न आवश्यक छ। जोडेर कम्तिमा प्रोग्रामेटिक रूपमा फोकस गर्न योग्य छ tabindex="-1"
।
यसका अतिरिक्त, तपाईंले लक्ष्यमा देखिने फोकस सङ्केतलाई स्पष्ट रूपमा दबाउन चाहनुहुन्छ (विशेष गरी क्रोमले हाल tabindex="-1"
माउसले क्लिक गर्दा तत्वहरूमा फोकस सेट गर्दछ) सँग #content:focus { outline: none; }
।
नोट गर्नुहोस् कि यो बगले तपाइँको साइटले प्रयोग गरिरहेको हुन सक्ने कुनै पनि अन्य इन-पेज लिङ्कहरूलाई प्रभाव पार्नेछ, तिनीहरूलाई किबोर्ड प्रयोगकर्ताहरूको लागि बेकार बनाउँदै। तपाईंले लिङ्क लक्ष्यहरूको रूपमा कार्य गर्ने अन्य सबै नाम गरिएका एन्करहरू / टुक्रा पहिचानकर्ताहरूमा समान स्टप-ग्याप फिक्स थप्ने विचार गर्न सक्नुहुन्छ।
नेस्टिङ हेडिङ ( <h1>
- <h6>
) गर्दा, तपाईंको प्राथमिक कागजात हेडर हुनुपर्छ <h1>
। पछिल्ला शीर्षकहरूले तार्किक प्रयोग गर्नुपर्छ <h2>
- <h6>
जस्तै कि स्क्रिन रिडरहरूले तपाईंको पृष्ठहरूको लागि सामग्रीको तालिका बनाउन सक्छन्।
HTML CodeSniffer र Penn State's AccessAbility मा थप जान्नुहोस् ।
हाल, बुटस्ट्र्यापमा उपलब्ध केही पूर्वनिर्धारित रङ संयोजनहरू (जस्तै विभिन्न स्टाइल गरिएका बटन वर्गहरू, आधारभूत कोड ब्लकहरूका लागि प्रयोग गरिएका केही कोड हाइलाइटिङ रङहरू , .bg-primary
प्रासंगिक पृष्ठभूमि सहायक वर्ग, र सेतो पृष्ठभूमिमा प्रयोग गर्दा पूर्वनिर्धारित लिङ्क रङ)। कम कन्ट्रास्ट अनुपात ( 4.5:1 को सिफारिस गरिएको अनुपात तल ) छ। यसले कम दृष्टि भएका वा कलर ब्लाइन्ड भएका प्रयोगकर्ताहरूलाई समस्या निम्त्याउन सक्छ। यी पूर्वनिर्धारित रङहरूलाई तिनीहरूको कन्ट्रास्ट र स्पष्टता बढाउन परिमार्जन गर्न आवश्यक हुन सक्छ।
बुटस्ट्र्याप MIT लाइसेन्स अन्तर्गत जारी गरिएको छ र प्रतिलिपि अधिकार 2016 Twitter हो। साना टुक्राहरूमा उमालेको, यसलाई निम्न अवस्थाहरूसँग वर्णन गर्न सकिन्छ।
थप जानकारीको लागि पूर्ण बुटस्ट्र्याप इजाजतपत्र परियोजना भण्डारमा अवस्थित छ ।
समुदायका सदस्यहरूले बुटस्ट्र्यापको कागजातलाई विभिन्न भाषाहरूमा अनुवाद गरेका छन्। कुनै पनि आधिकारिक रूपमा समर्थित छैन र तिनीहरू सधैं अद्यावधिक नहुन सक्छन्।
हामीले अनुवादहरूलाई व्यवस्थित गर्न वा होस्ट गर्न मद्दत गर्दैनौं, हामी तिनीहरूलाई लिङ्क मात्र गर्छौं।
नयाँ वा राम्रो अनुवाद समाप्त भयो? हाम्रो सूचीमा थप्नको लागि पुल अनुरोध खोल्नुहोस्।