தொடங்குதல்
பூட்ஸ்டார்ப்பின் கண்ணோட்டம், பதிவிறக்கம் செய்வது மற்றும் பயன்படுத்துவது எப்படி, அடிப்படை டெம்ப்ளேட்கள் மற்றும் எடுத்துக்காட்டுகள் மற்றும் பல.
பூட்ஸ்டார்ப்பின் கண்ணோட்டம், பதிவிறக்கம் செய்வது மற்றும் பயன்படுத்துவது எப்படி, அடிப்படை டெம்ப்ளேட்கள் மற்றும் எடுத்துக்காட்டுகள் மற்றும் பல.
பூட்ஸ்டார்ப் (தற்போது v3.3.7) விரைவாகத் தொடங்குவதற்கு சில எளிய வழிகளைக் கொண்டுள்ளது, ஒவ்வொன்றும் வெவ்வேறு திறன் நிலை மற்றும் பயன்பாட்டு வழக்கை ஈர்க்கின்றன. உங்கள் குறிப்பிட்ட தேவைகளுக்கு எது பொருத்தமானது என்பதைப் பார்க்க படிக்கவும்.
CSS, ஜாவாஸ்கிரிப்ட் மற்றும் எழுத்துருக்கள் தொகுக்கப்பட்டு சிறியதாக்கப்பட்டது. ஆவணங்கள் அல்லது அசல் மூலக் கோப்புகள் சேர்க்கப்படவில்லை.
எங்கள் டாக்ஸுடன் குறைவான ஆதாரம், ஜாவாஸ்கிரிப்ட் மற்றும் எழுத்துரு கோப்புகள். குறைந்த கம்பைலர் மற்றும் சில அமைப்பு தேவை.
ரெயில்கள், திசைகாட்டி அல்லது சாஸ்-மட்டும் திட்டங்களில் எளிதாகச் சேர்ப்பதற்காக பூட்ஸ்டார்ப் லெஸ்ஸிலிருந்து சாஸுக்கு போர்ட் செய்யப்பட்டது .
jsDelivr இல் உள்ளவர்கள் பூட்ஸ்டார்ப்பின் CSS மற்றும் ஜாவாஸ்கிரிப்ட்டுக்கு CDN ஆதரவை அன்புடன் வழங்குகிறார்கள். இந்த Bootstrap CDN இணைப்புகளைப் பயன்படுத்தவும்.
நீங்கள் Bower ஐப் பயன்படுத்தி Bootstrap இன் Less, CSS, JavaScript மற்றும் எழுத்துருக்களை நிறுவி நிர்வகிக்கலாம் :
நீங்கள் npm ஐப் பயன்படுத்தி பூட்ஸ்டார்ப்பை நிறுவலாம் :
require('bootstrap')
பூட்ஸ்டார்ப்பின் அனைத்து jQuery செருகுநிரல்களையும் jQuery பொருளில் ஏற்றும். bootstrap
தொகுதியே எதையும் ஏற்றுமதி செய்யாது . /js/*.js
தொகுப்பின் உயர்மட்ட கோப்பகத்தின் கீழ் கோப்புகளை ஏற்றுவதன் மூலம் பூட்ஸ்டார்ப்பின் jQuery செருகுநிரல்களை கைமுறையாக ஏற்றலாம் .
பூட்ஸ்ட்ராப் package.json
பின்வரும் விசைகளின் கீழ் சில கூடுதல் மெட்டாடேட்டாவைக் கொண்டுள்ளது:
less
- பூட்ஸ்டார்ப்பின் முக்கிய குறைவான மூலக் கோப்பிற்கான பாதைstyle
- பூட்ஸ்டார்ப்பின் சிறியப்படுத்தப்படாத CSSக்கான பாதை இயல்புநிலை அமைப்புகளைப் பயன்படுத்தி முன்தொகுக்கப்பட்டது (தனிப்பயனாக்கம் இல்லை)கம்போசரைப் பயன்படுத்தி பூட்ஸ்டார்ப்பின் லெஸ், சிஎஸ்எஸ், ஜாவாஸ்கிரிப்ட் மற்றும் எழுத்துருக்களை நிறுவி நிர்வகிக்கலாம் :
CSS விற்பனையாளர் முன்னொட்டுகளைக் கையாள பூட்ஸ்டார்ப் Autoprefixer ஐப் பயன்படுத்துகிறது . நீங்கள் Bootstrap ஐ அதன் Less/Sass மூலத்திலிருந்து தொகுக்கிறீர்கள் மற்றும் எங்கள் Gruntfile ஐப் பயன்படுத்தாமல் இருந்தால், உங்கள் உருவாக்க செயல்முறையில் Autoprefixer ஐ நீங்கள் ஒருங்கிணைக்க வேண்டும். நீங்கள் முன்தொகுக்கப்பட்ட பூட்ஸ்டார்ப்பைப் பயன்படுத்தினால் அல்லது எங்கள் கிரண்ட்ஃபைலைப் பயன்படுத்தினால், இதைப் பற்றி நீங்கள் கவலைப்படத் தேவையில்லை, ஏனெனில் ஆட்டோபிரிஃபிக்சர் ஏற்கனவே எங்கள் கிரண்ட்ஃபைலில் ஒருங்கிணைக்கப்பட்டுள்ளது.
பூட்ஸ்டார்ப் இரண்டு வடிவங்களில் தரவிறக்கம் செய்யக்கூடியது, அதில் பின்வரும் கோப்பகங்கள் மற்றும் கோப்புகளை நீங்கள் காணலாம், பொதுவான ஆதாரங்களை தர்க்கரீதியாக தொகுத்து தொகுக்கப்பட்ட மற்றும் சிறிய மாறுபாடுகளை வழங்குகிறது.
ஸ்டார்டர் டெம்ப்ளேட்டில் காட்டப்பட்டுள்ளபடி, அனைத்து ஜாவாஸ்கிரிப்ட் செருகுநிரல்களுக்கும் jQuery சேர்க்கப்பட வேண்டும் என்பதை நினைவில் கொள்ளவும் . jQuery இன் எந்த பதிப்புகள் ஆதரிக்கப்படுகின்றன என்பதைப் பார்க்க, எங்களைப் பார்க்கவும்.bower.json
பதிவிறக்கம் செய்யப்பட்டதும், (தொகுக்கப்பட்ட) பூட்ஸ்டார்ப்பின் கட்டமைப்பைக் காண சுருக்கப்பட்ட கோப்புறையை அன்சிப் செய்யவும். இது போன்ற ஒன்றை நீங்கள் காண்பீர்கள்:
இது பூட்ஸ்டார்ப்பின் மிக அடிப்படையான வடிவம்: கிட்டத்தட்ட எந்த இணைய திட்டத்திலும் விரைவான டிராப்-இன் பயன்பாட்டிற்கான முன்தொகுக்கப்பட்ட கோப்புகள். தொகுக்கப்பட்ட CSS மற்றும் JS ( bootstrap.*
), அத்துடன் தொகுக்கப்பட்ட மற்றும் சிறிதாக்கப்பட்ட CSS மற்றும் JS ( bootstrap.min.*
) ஆகியவற்றை நாங்கள் வழங்குகிறோம். சில உலாவிகளின் டெவலப்பர் கருவிகளுடன் பயன்படுத்த CSS மூல வரைபடங்கள் ( ) கிடைக்கின்றன. bootstrap.*.map
விருப்பமான பூட்ஸ்டார்ப் தீம் போலவே Glyphicons இலிருந்து எழுத்துருக்கள் சேர்க்கப்பட்டுள்ளன.
பூட்ஸ்டார்ப் மூலக் குறியீடு பதிவிறக்கமானது முன்தொகுக்கப்பட்ட CSS, ஜாவாஸ்கிரிப்ட் மற்றும் எழுத்துரு சொத்துக்கள் மற்றும் ஆதாரம் குறைவு, ஜாவாஸ்கிரிப்ட் மற்றும் ஆவணப்படுத்தல் ஆகியவற்றை உள்ளடக்கியது. மேலும் குறிப்பாக, இது பின்வருவனவற்றையும் மேலும் பலவற்றையும் உள்ளடக்கியது:
எங்கள் CSS, JS மற்றும் ஐகான் எழுத்துருக்களுக்கான (முறையே) மூலக் குறியீடு , , மற்றும் less/
ஆகும் js/
. fonts/
மேலே dist/
உள்ள முன்தொகுக்கப்பட்ட பதிவிறக்கப் பிரிவில் பட்டியலிடப்பட்டுள்ள அனைத்தும் கோப்புறையில் அடங்கும். கோப்புறையில் எங்கள் ஆவணங்கள் மற்றும் பூட்ஸ்டார்ப் பயன்பாட்டிற்கான docs/
மூலக் குறியீடு உள்ளது . examples/
அதையும் மீறி, வேறு எந்தக் கோப்பும் தொகுப்புகள், உரிமத் தகவல் மற்றும் மேம்பாட்டிற்கான ஆதரவை வழங்குகிறது.
பூட்ஸ்டார்ப் அதன் உருவாக்க அமைப்புக்கு கிரண்ட்டைப் பயன்படுத்துகிறது, கட்டமைப்புடன் வேலை செய்வதற்கான வசதியான முறைகள். எங்கள் குறியீட்டை எவ்வாறு தொகுக்கிறோம், சோதனைகளை இயக்குகிறோம் மற்றும் பல.
கிரண்ட் நிறுவ, நீங்கள் முதலில் node.js ஐ பதிவிறக்கி நிறுவ வேண்டும் (இதில் npm அடங்கும்). npm என்பது முனை தொகுக்கப்பட்ட தொகுதிகள் மற்றும் node.js மூலம் வளர்ச்சி சார்புகளை நிர்வகிப்பதற்கான ஒரு வழியாகும்.
பின்னர், கட்டளை வரியிலிருந்து:grunt-cli
உடன் உலகளவில் நிறுவவும் npm install -g grunt-cli
./bootstrap/
, பின்னர் இயக்கவும் npm install
. npm கோப்பைப் பார்த்து, package.json
அங்கு பட்டியலிடப்பட்டுள்ள தேவையான உள்ளூர் சார்புகளை தானாகவே நிறுவும்.முடிந்ததும், கட்டளை வரியிலிருந்து வழங்கப்பட்ட பல்வேறு கிரண்ட் கட்டளைகளை நீங்கள் இயக்க முடியும்.
grunt dist
(சிஎஸ்எஸ் மற்றும் ஜாவாஸ்கிரிப்ட் தொகுக்கவும்)/dist/
தொகுக்கப்பட்ட மற்றும் சிறிதாக்கப்பட்ட CSS மற்றும் JavaScript கோப்புகளுடன் கோப்பகத்தை மீண்டும் உருவாக்குகிறது . பூட்ஸ்டார்ப் பயனராக, இது பொதுவாக நீங்கள் விரும்பும் கட்டளையாகும்.
grunt watch
(பார்க்கவும்)குறைந்த மூலக் கோப்புகளைப் பார்த்து, நீங்கள் மாற்றத்தைச் சேமிக்கும் போதெல்லாம் தானாகவே அவற்றை CSSக்கு மீண்டும் தொகுக்கும்.
grunt test
(சோதனைகளை இயக்கவும்)JSHint ஐ இயக்குகிறது மற்றும் PhantomJS இல் QUnit சோதனைகளை தலையின்றி இயக்குகிறது .
grunt docs
(டாக்ஸ் சொத்துக்களை உருவாக்கி சோதிக்கவும்)மூலம் உள்நாட்டில் ஆவணங்களை இயக்கும் போது பயன்படுத்தப்படும் CSS, JavaScript மற்றும் பிற சொத்துக்களை உருவாக்கி சோதிக்கிறது bundle exec jekyll serve
.
grunt
(எல்லாவற்றையும் உருவாக்கி சோதனைகளை இயக்கவும்)CSS மற்றும் JavaScript ஐ தொகுத்து சிறிதாக்குகிறது, ஆவண இணையதளத்தை உருவாக்குகிறது, டாக்ஸுக்கு எதிராக HTML5 வேலிடேட்டரை இயக்குகிறது, Customizer சொத்துக்களை மீண்டும் உருவாக்குகிறது மற்றும் பல. ஜெகில் தேவை . பொதுவாக நீங்கள் பூட்ஸ்டார்ப்பில் ஹேக்கிங் செய்தால் மட்டுமே அவசியம்.
சார்புகளை நிறுவுவதில் அல்லது கிரண்ட் கட்டளைகளை இயக்குவதில் சிக்கல் ஏற்பட்டால், முதலில் /node_modules/
npm ஆல் உருவாக்கப்பட்ட கோப்பகத்தை நீக்கவும். பின்னர், மீண்டும் இயக்கவும் npm install
.
இந்த அடிப்படை HTML டெம்ப்ளேட்டுடன் தொடங்கவும் அல்லது இந்த எடுத்துக்காட்டுகளை மாற்றவும் . எங்கள் வார்ப்புருக்கள் மற்றும் எடுத்துக்காட்டுகளை நீங்கள் தனிப்பயனாக்கி, அவற்றை உங்கள் தேவைகளுக்கு ஏற்ப மாற்றியமைப்பீர்கள் என்று நம்புகிறோம்.
குறைந்தபட்ச பூட்ஸ்டார்ப் ஆவணத்துடன் வேலை செய்ய கீழே உள்ள HTML ஐ நகலெடுக்கவும்.
பூட்ஸ்டார்ப்பின் பல கூறுகளுடன் மேலே உள்ள அடிப்படை டெம்ப்ளேட்டில் உருவாக்கவும். உங்கள் தனிப்பட்ட திட்டத்தின் தேவைகளுக்கு ஏற்றவாறு பூட்ஸ்டார்ப்பைத் தனிப்பயனாக்கவும் மாற்றியமைக்கவும் நாங்கள் உங்களை ஊக்குவிக்கிறோம்.
பூட்ஸ்டார்ப் களஞ்சியத்தைப் பதிவிறக்குவதன் மூலம் கீழே உள்ள ஒவ்வொரு உதாரணத்திற்கும் மூலக் குறியீட்டைப் பெறவும் . எடுத்துக்காட்டுகளை docs/examples/
அடைவில் காணலாம்.
அடிப்படைகளைத் தவிர வேறொன்றுமில்லை: ஒரு கொள்கலனுடன் தொகுக்கப்பட்ட CSS மற்றும் JavaScript.
தனிப்பயன் வழிசெலுத்தல், தலைப்பு மற்றும் வகையுடன் கூடிய எளிய இரண்டு நெடுவரிசை வலைப்பதிவு தளவமைப்பு.
நியாயப்படுத்தப்பட்ட இணைப்புகளுடன் தனிப்பயன் நேவ்பாரை உருவாக்கவும். எச்சரிக்கை! மிகவும் சஃபாரி நட்பு இல்லை.
எங்கள் ஆவணத்தின் அடிப்படையில் பூட்ஸ்டார்ப்பின் வினைத்திறனை எளிதாக முடக்கவும் .
பூட்லிண்ட் என்பது அதிகாரப்பூர்வ பூட்ஸ்டார்ப் HTML லிண்டர் கருவியாகும். பூட்ஸ்டார்ப்பை "வெண்ணிலா" வழியில் பயன்படுத்தும் வலைப்பக்கங்களில் உள்ள பல பொதுவான HTML தவறுகளை இது தானாகவே சரிபார்க்கிறது. வெண்ணிலா பூட்ஸ்டார்ப்பின் கூறுகள்/விட்ஜெட்டுகளுக்கு அவற்றின் DOM பகுதிகள் சில கட்டமைப்புகளுக்கு இணங்க வேண்டும். பூட்ஸ்ட்ராப் கூறுகளின் நிகழ்வுகள் HTML சரியாக கட்டமைக்கப்பட்டுள்ளதா என்பதை பூட்லிண்ட் சரிபார்க்கிறது. உங்கள் பூட்ஸ்டார்ப் வலை மேம்பாட்டு கருவித்தொகுப்பில் பூட்லிண்ட்டைச் சேர்ப்பதைக் கவனியுங்கள், இதனால் பொதுவான தவறுகள் எதுவும் உங்கள் திட்டத்தின் வளர்ச்சியைக் குறைக்காது.
பூட்ஸ்டார்ப்பின் மேம்பாடு குறித்து புதுப்பித்த நிலையில் இருங்கள் மற்றும் இந்த பயனுள்ள ஆதாரங்களுடன் சமூகத்தை அணுகவும்.
irc.freenode.net
உள்ள சர்வரில் IRC ஐப் பயன்படுத்தி சக பூட்ஸ்ட்ராப்பர்களுடன் அரட்டையடிக்கவும் .twitter-bootstrap-3
இல் கேட்கவும் .bootstrap
மூலம் விநியோகிக்கும்போது, பூட்ஸ்டார்ப்பின் செயல்பாட்டை மாற்றியமைக்கும் அல்லது சேர்க்கும் தொகுப்புகளில் முக்கிய சொல்லை டெவலப்பர்கள் பயன்படுத்த வேண்டும் .சமீபத்திய வதந்திகள் மற்றும் அற்புதமான இசை வீடியோக்களுக்கு நீங்கள் @getbootstrap ஐ Twitter இல் பின்தொடரலாம் .
பூட்ஸ்டார்ப் உங்கள் பக்கங்களை பல்வேறு திரை அளவுகளுக்கு தானாகவே மாற்றியமைக்கிறது. இந்த அம்சத்தை எவ்வாறு முடக்குவது என்பது இங்கே கொடுக்கப்பட்டுள்ளது, எனவே உங்கள் பக்கம் இது போன்ற பதிலளிக்காத உதாரணம் .
<meta>
குறிப்பிடப்பட்டுள்ள வியூபோர்ட்டைத் தவிர்க்கவும்width
ஆன் ஐ மேலெழுதவும், எடுத்துக்காட்டாக , இது இயல்புநிலை பூட்ஸ்டார்ப் CSSக்குப் பிறகு வருகிறது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். மீடியா வினவல்கள் அல்லது சில செலக்டர்-ஃபூ மூலம் நீங்கள் விருப்பமாகத் தவிர்க்கலாம் ..container
width: 970px !important;
!important
.col-xs-*
நடுத்தர/பெரியவற்றிற்கு கூடுதலாக அல்லது அதற்கு பதிலாக வகுப்புகளைப் பயன்படுத்தவும். கவலைப்பட வேண்டாம், கூடுதல்-சிறிய சாதன கட்டம் அனைத்து தீர்மானங்களுக்கும் அளவிடும்.உங்களுக்கு இன்னும் IE8 க்கு Respond.js தேவைப்படும் (எங்கள் மீடியா வினவல்கள் இன்னும் உள்ளன மற்றும் செயலாக்கப்பட வேண்டும்). இது பூட்ஸ்டார்ப்பின் "மொபைல் தளம்" அம்சங்களை முடக்குகிறது.
ஒரு உதாரணத்திற்கு இந்த படிகளைப் பயன்படுத்தியுள்ளோம். குறிப்பிட்ட மாற்றங்களைச் செயல்படுத்த அதன் மூலக் குறியீட்டைப் படிக்கவும்.
பூட்ஸ்டார்ப்பின் பழைய பதிப்பிலிருந்து v3.xக்கு மாற விரும்புகிறீர்களா? எங்கள் இடம்பெயர்வு வழிகாட்டியைப் பார்க்கவும் .
பூட்ஸ்டார்ப் சமீபத்திய டெஸ்க்டாப் மற்றும் மொபைல் உலாவிகளில் சிறப்பாகச் செயல்படும் வகையில் கட்டமைக்கப்பட்டுள்ளது, அதாவது பழைய உலாவிகள் முற்றிலும் செயல்பட்டாலும், சில கூறுகளின் ரெண்டரிங்களை வித்தியாசமான பாணியில் காட்டலாம்.
குறிப்பாக, பின்வரும் உலாவிகள் மற்றும் இயங்குதளங்களின் சமீபத்திய பதிப்புகளை நாங்கள் ஆதரிக்கிறோம்.
WebKit, Blink அல்லது Gecko இன் சமீபத்திய பதிப்பைப் பயன்படுத்தும் மாற்று உலாவிகள் நேரடியாகவோ அல்லது தளத்தின் வலைக் காட்சி API மூலமாகவோ வெளிப்படையாக ஆதரிக்கப்படாது. இருப்பினும், பூட்ஸ்டார்ப் (பெரும்பாலான சந்தர்ப்பங்களில்) இந்த உலாவிகளிலும் சரியாகக் காண்பிக்கப்பட வேண்டும் மற்றும் செயல்பட வேண்டும். மேலும் குறிப்பிட்ட ஆதரவு தகவல் கீழே கொடுக்கப்பட்டுள்ளது.
பொதுவாக, பூட்ஸ்டார்ப் ஒவ்வொரு முக்கிய தளத்தின் இயல்புநிலை உலாவிகளின் சமீபத்திய பதிப்புகளை ஆதரிக்கிறது. ப்ராக்ஸி உலாவிகள் (Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk போன்றவை) ஆதரிக்கப்படவில்லை என்பதை நினைவில் கொள்ளவும்.
குரோம் | பயர்பாக்ஸ் | சஃபாரி | |
---|---|---|---|
ஆண்ட்ராய்டு | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | N/A |
iOS | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது |
இதேபோல், பெரும்பாலான டெஸ்க்டாப் உலாவிகளின் சமீபத்திய பதிப்புகள் ஆதரிக்கப்படுகின்றன.
குரோம் | பயர்பாக்ஸ் | இன்டர்நெட் எக்ஸ்புளோரர் | ஓபரா | சஃபாரி | |
---|---|---|---|---|---|
மேக் | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | N/A | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது |
விண்டோஸ் | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | ஆதரிக்கப்பட்டது | ஒத்துழைக்கவில்லை |
Windows இல், Internet Explorer 8-11 ஐ ஆதரிக்கிறோம் .
Firefox க்கு, சமீபத்திய இயல்பான நிலையான வெளியீட்டிற்கு கூடுதலாக, Firefox இன் சமீபத்திய விரிவாக்கப்பட்ட ஆதரவு வெளியீடு (ESR) பதிப்பையும் நாங்கள் ஆதரிக்கிறோம்.
அதிகாரப்பூர்வமற்ற முறையில், பூட்ஸ்டார்ப் லினக்ஸிற்கான Chromium மற்றும் Chrome, Linux க்கான Firefox மற்றும் Internet Explorer 7 மற்றும் மைக்ரோசாஃப்ட் எட்ஜ் ஆகியவற்றில் போதுமான அளவு தோற்றமளிக்க வேண்டும், ஆனால் அவை அதிகாரப்பூர்வமாக ஆதரிக்கப்படவில்லை.
பூட்ஸ்டார்ப் பிடிபட வேண்டிய சில உலாவி பிழைகளின் பட்டியலுக்கு, எங்கள் உலாவி பிழைகளின் சுவரைப் பார்க்கவும் .
இன்டர்நெட் எக்ஸ்ப்ளோரர் 8 மற்றும் 9 ஆகியவை ஆதரிக்கப்படுகின்றன, இருப்பினும், சில CSS3 பண்புகள் மற்றும் HTML5 கூறுகள் இந்த உலாவிகளால் முழுமையாக ஆதரிக்கப்படவில்லை என்பதை நினைவில் கொள்ளவும். கூடுதலாக, Internet Explorer 8 க்கு மீடியா வினவல் ஆதரவை செயல்படுத்த Respond.js ஐப் பயன்படுத்த வேண்டும்.
அம்சம் | இன்டர்நெட் எக்ஸ்புளோரர் 8 | இன்டர்நெட் எக்ஸ்புளோரர் 9 |
---|---|---|
border-radius |
ஒத்துழைக்கவில்லை | ஆதரிக்கப்பட்டது |
box-shadow |
ஒத்துழைக்கவில்லை | ஆதரிக்கப்பட்டது |
transform |
ஒத்துழைக்கவில்லை | -ms முன்னொட்டுடன் துணைபுரிகிறது |
transition |
ஒத்துழைக்கவில்லை | |
placeholder |
ஒத்துழைக்கவில்லை |
CSS3 மற்றும் HTML5 அம்சங்களின் உலாவி ஆதரவு பற்றிய விவரங்களுக்கு நான் பயன்படுத்தலாமா... என்பதைப் பார்வையிடவும் .
இன்டர்நெட் எக்ஸ்புளோரர் 8க்கான உங்கள் மேம்பாடு மற்றும் உற்பத்தி சூழல்களில் Respond.js ஐப் பயன்படுத்தும் போது பின்வரும் எச்சரிக்கைகள் குறித்து எச்சரிக்கையாக இருங்கள்.
வேறொரு (துணை) டொமைனில் (உதாரணமாக, CDN இல்) ஹோஸ்ட் செய்யப்பட்ட CSS உடன் Respond.js ஐப் பயன்படுத்த சில கூடுதல் அமைவு தேவைப்படுகிறது. விவரங்களுக்கு Respond.js ஆவணத்தைப் பார்க்கவும்.
file://
உலாவி பாதுகாப்பு விதிகள் காரணமாக, Respond.js ஆனது புரோட்டோகால் மூலம் பார்க்கப்படும் பக்கங்களுடன் வேலை செய்யாது file://
(உள்ளூர் HTML கோப்பைத் திறக்கும் போது). IE8 இல் பதிலளிக்கக்கூடிய அம்சங்களைச் சோதிக்க, உங்கள் பக்கங்களை HTTP(S) மூலம் பார்க்கவும். விவரங்களுக்கு Respond.js ஆவணத்தைப் பார்க்கவும்.
@import
மூலம் குறிப்பிடப்படும் CSS உடன் Respond.js வேலை செய்யாது @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
@font-face
IE8 உடன் இணைந்தால் சில சிக்கல்கள் உள்ளன :before
. பூட்ஸ்ட்ராப் அதன் கிளைஃபிகான்களுடன் அந்த கலவையைப் பயன்படுத்துகிறது. ஒரு பக்கம் தற்காலிகமாகச் சேமிக்கப்பட்டு, சாளரத்தில் மவுஸ் இல்லாமல் ஏற்றப்பட்டால் (அதாவது புதுப்பிப்பு பொத்தானை அழுத்தவும் அல்லது ஏதாவது ஐஃப்ரேமில் ஏற்றவும்) பின்னர் எழுத்துரு ஏற்றப்படும் முன் பக்கம் ரெண்டர் செய்யப்படும். பக்கத்தின் (உடல்) மீது வட்டமிடுவது சில ஐகான்களைக் காண்பிக்கும் மற்றும் மீதமுள்ள ஐகான்களின் மீது வட்டமிடுவது அவற்றையும் காண்பிக்கும். விவரங்களுக்கு #13863 இதழைப் பார்க்கவும்.
பழைய இன்டர்நெட் எக்ஸ்ப்ளோரர் இணக்கத்தன்மை முறைகளில் பூட்ஸ்டார்ப் ஆதரிக்கப்படவில்லை. IEக்கான சமீபத்திய ரெண்டரிங் பயன்முறையைப் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்த <meta>
, உங்கள் பக்கங்களில் பொருத்தமான குறிச்சொல்லைச் சேர்க்கவும்:
பிழைத்திருத்தக் கருவிகளைத் திறப்பதன் மூலம் ஆவணப் பயன்முறையை உறுதிப்படுத்தவும்: F12"ஆவணப் பயன்முறையை" அழுத்திச் சரிபார்க்கவும்.
இன்டர்நெட் எக்ஸ்புளோரரின் ஒவ்வொரு ஆதரிக்கப்படும் பதிப்பிலும் சிறந்த ரெண்டரிங்கை உறுதிசெய்ய, பூட்ஸ்டார்ப்பின் அனைத்து ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகளிலும் இந்தக் குறிச்சொல் சேர்க்கப்பட்டுள்ளது.
மேலும் தகவலுக்கு இந்த StackOverflow கேள்வியைப் பார்க்கவும் .
இன்டர்நெட் எக்ஸ்ப்ளோரர் 10 சாதனத்தின் அகலத்தை வியூபோர்ட் அகலத்திலிருந்து வேறுபடுத்தாது , இதனால் பூட்ஸ்டார்ப்பின் CSS இல் மீடியா வினவல்களை சரியாகப் பயன்படுத்தாது. இதை சரிசெய்ய, பொதுவாக நீங்கள் CSS இன் விரைவான துணுக்கைச் சேர்க்க வேண்டும்:
இருப்பினும், புதுப்பிப்பு 3 (அக்கா GDR3) ஐ விட பழைய Windows Phone 8 பதிப்புகளில் இயங்கும் சாதனங்களுக்கு இது வேலை செய்யாது , ஏனெனில் இது போன்ற சாதனங்கள் குறுகிய "ஃபோன்" பார்வைக்கு பதிலாக பெரும்பாலும் டெஸ்க்டாப் காட்சியைக் காண்பிக்கும். இதைத் தீர்க்க, பிழையைச் சுற்றி வேலை செய்ய பின்வரும் CSS மற்றும் JavaScript ஐ நீங்கள் சேர்க்க வேண்டும் .
மேலும் தகவல் மற்றும் பயன்பாட்டு வழிகாட்டுதல்களுக்கு, Windows Phone 8 மற்றும் சாதன அகலத்தைப் படிக்கவும் .
முன்னறிவிப்பாக, பூட்ஸ்டார்ப்பின் அனைத்து ஆவணங்களிலும் இதை ஒரு ஆர்ப்பாட்டமாக எடுத்துக்காட்டுகிறோம்.
.col-*-1
OS X க்கான v7.1 க்கு முந்தைய Safari பதிப்புகளின் ரெண்டரிங் இயந்திரம் மற்றும் iOS v8.0 க்கான Safari ஆகியவை எங்கள் கட்ட வகுப்புகளில் பயன்படுத்தப்படும் தசம இடங்களின் எண்ணிக்கையில் சில சிக்கல்களை எதிர்கொண்டன . உங்களிடம் 12 தனித்தனி கிரிட் நெடுவரிசைகள் இருந்தால், மற்ற நெடுவரிசைகளுடன் ஒப்பிடும்போது அவை குறுகியதாக இருப்பதை நீங்கள் கவனிப்பீர்கள். Safari/iOS ஐ மேம்படுத்துவதைத் தவிர, உங்களுக்கு சில தீர்வுகள் உள்ளன:
.pull-right
கடின-வலது சீரமைப்பைப் பெற, உங்கள் கடைசி கட்ட நெடுவரிசையில் சேர்க்கவும்overflow: hidden
iOS மற்றும் Android இல் உறுப்புக்கான ஆதரவு <body>
மிகவும் குறைவாகவே உள்ளது. அந்த வகையில், அந்த சாதனங்களின் உலாவிகளில் ஏதேனும் ஒரு மாதிரியின் மேல் அல்லது கீழ் பகுதியை நீங்கள் உருட்டும் போது, <body>
உள்ளடக்கம் உருட்டத் தொடங்கும். Chrome பிழை #175502 (Chrome v40 இல் சரி செய்யப்பட்டது) மற்றும் WebKit பிழை #153852 ஐப் பார்க்கவும் .
<input>
iOS 9.3 இன் படி, ஒரு மாதிரி திறந்திருக்கும் போது, ஒரு ஸ்க்ரோல் சைகையின் ஆரம்ப தொடுதல் உரை அல்லது a வின் எல்லைக்குள் இருந்தால், மாதிரியின் கீழ் <textarea>
உள்ள <body>
உள்ளடக்கம் மாதிரிக்கு பதிலாக ஸ்க்ரோல் செய்யப்படும். WebKit பிழை #153856 ஐப் பார்க்கவும் .
மேலும், நீங்கள் ஒரு நிலையான navbar ஐப் பயன்படுத்தினால் அல்லது ஒரு மாதிரியில் உள்ளீடுகளைப் பயன்படுத்தினால், விர்ச்சுவல் விசைப்பலகை தூண்டப்படும்போது நிலையான உறுப்புகளின் நிலையைப் புதுப்பிக்காத ரெண்டரிங் பிழை iOS இல் உள்ளது என்பதை நினைவில் கொள்ளவும். இதற்கான சில தீர்வுகளில், உங்கள் உறுப்புகளை மாற்றுவது position: absolute
அல்லது ஃபோகஸில் டைமரைத் தூண்டி, கைமுறையாக பொசிஷனிங்கைச் சரிசெய்ய முயற்சிப்பது ஆகியவை அடங்கும். இது பூட்ஸ்டார்ப்பால் கையாளப்படவில்லை, எனவே உங்கள் பயன்பாட்டிற்கு எந்த தீர்வு சிறந்தது என்பதை நீங்கள் தீர்மானிக்க வேண்டும்.
.dropdown-backdrop
z-இண்டெக்சிங்கின் சிக்கலான தன்மையின் காரணமாக, இந்த உறுப்பு iOS இல் nav இல் பயன்படுத்தப்படவில்லை. எனவே, நேவ்பார்களில் உள்ள கீழ்தோன்றல்களை மூட, நீங்கள் நேரடியாக கீழ்தோன்றும் உறுப்பைக் கிளிக் செய்ய வேண்டும் (அல்லது iOS இல் கிளிக் நிகழ்வைத் தூண்டும் வேறு ஏதேனும் உறுப்பு ).
பக்கத்தை பெரிதாக்குவது தவிர்க்க முடியாமல் சில கூறுகளில் ரெண்டரிங் கலைப்பொருட்களை வழங்குகிறது, பூட்ஸ்டார்ப் மற்றும் பிற இணையம். சிக்கலைப் பொறுத்து, எங்களால் அதைச் சரிசெய்ய முடியும் (முதலில் தேடவும், பின்னர் தேவைப்பட்டால் சிக்கலைத் திறக்கவும்). எவ்வாறாயினும், ஹேக்கியான தீர்வுகளைத் தவிர வேறு எந்த நேரடித் தீர்வும் இல்லாததால், இவற்றைப் புறக்கணிக்க முனைகிறோம்.
:hover
_:focus
பெரும்பாலான தொடுதிரைகளில் உண்மையான வட்டமிடுதல் சாத்தியமில்லை என்றாலும், பெரும்பாலான மொபைல் உலாவிகள் மிதக்கும் ஆதரவைப் பின்பற்றி :hover
"ஒட்டும்" ஆக்குகின்றன. வேறு வார்த்தைகளில் கூறுவதானால், :hover
ஒரு உறுப்பைத் தட்டிய பிறகு பாணிகள் பயன்படுத்தத் தொடங்குகின்றன, மேலும் பயனர் வேறு சில உறுப்புகளைத் தட்டிய பிறகு மட்டுமே பயன்படுத்துவதை நிறுத்துங்கள். :hover
இது போன்ற உலாவிகளில் பூட்ஸ்டார்ப்பின் நிலைகள் விரும்பத்தகாத "சிக்க" ஆகலாம். சில மொபைல் உலாவிகளும் :focus
இதேபோல் ஒட்டும். இதுபோன்ற பாணிகளை முழுவதுமாக அகற்றுவதைத் தவிர, இந்த சிக்கல்களுக்கு தற்போது எளிய தீர்வு எதுவும் இல்லை.
சில நவீன உலாவிகளில் கூட, அச்சிடுதல் நகைச்சுவையாக இருக்கும்.
குறிப்பாக, Chrome v32 மற்றும் விளிம்பு அமைப்புகளைப் பொருட்படுத்தாமல், ஒரு வலைப்பக்கத்தை அச்சிடும்போது மீடியா வினவல்களைத் தீர்க்கும்போது, இயற்பியல் காகித அளவை விட கணிசமாகக் குறுகலான வியூபோர்ட் அகலத்தை Chrome பயன்படுத்துகிறது. இது பூட்ஸ்டார்ப்பின் கூடுதல்-சிறிய கட்டம் அச்சிடும்போது எதிர்பாராத விதமாக செயல்படுத்தப்படும். சில விவரங்களுக்கு இதழ் #12078 மற்றும் Chrome பிழை #273306 ஐப் பார்க்கவும். பரிந்துரைக்கப்பட்ட தீர்வுகள்:
@screen-*
இதனால் உங்கள் அச்சுப்பொறி தாள் கூடுதல் சிறியதை விட பெரியதாகக் கருதப்படுகிறது.மேலும், Safari v8.0 இன் படி, நிலையான-அகல .container
கள் அச்சிடும்போது வழக்கத்திற்கு மாறாக சிறிய எழுத்துரு அளவை Safari பயன்படுத்த காரணமாக இருக்கலாம். மேலும் விவரங்களுக்கு #14868 மற்றும் WebKit பிழை #138192 ஐப் பார்க்கவும். இதற்கான ஒரு சாத்தியமான தீர்வு பின்வரும் CSS ஐச் சேர்ப்பதாகும்:
பெட்டிக்கு வெளியே, ஆண்ட்ராய்டு 4.1 (மற்றும் சில புதிய வெளியீடுகள் கூட) உலாவி ஆப்ஸுடன் விருப்பத்தேர்வின் இயல்புநிலை இணைய உலாவியாக (Chromeக்கு மாறாக) அனுப்பப்படும். துரதிர்ஷ்டவசமாக, உலாவி பயன்பாட்டில் பொதுவாக CSS உடன் நிறைய பிழைகள் மற்றும் முரண்பாடுகள் உள்ளன.
உறுப்புகளில் , மற்றும்/அல்லது பயன்படுத்தப்பட்டால் <select>
, பக்கக் கட்டுப்பாடுகளை Android ஸ்டாக் உலாவி காட்டாது . (விவரங்களுக்கு இந்த StackOverflow கேள்வியைப் பார்க்கவும்.) கீழே உள்ள குறியீட்டின் துணுக்கைப் பயன்படுத்தி, குற்றமிழைக்கும் CSSஐ அகற்றி, Android ஸ்டாக் உலாவியில் மாற்றியமைக்கப்படாத உறுப்பாக வழங்கவும். பயனர் முகவர் ஸ்னிஃபிங் Chrome, Safari மற்றும் Mozilla உலாவிகளில் குறுக்கிடுவதைத் தவிர்க்கிறது.border-radius
border
<select>
உதாரணத்தைப் பார்க்க வேண்டுமா? இந்த JS பின் டெமோவைப் பாருங்கள்.
பழைய மற்றும் தரமற்ற உலாவிகளுக்கு சிறந்த அனுபவத்தை வழங்க, பூட்ஸ்டார்ப் பல இடங்களில் CSS உலாவி ஹேக்குகளைப் பயன்படுத்துகிறது, சில உலாவி பதிப்புகளுக்கு சிறப்பு CSS ஐ குறிவைத்து, உலாவிகளில் உள்ள பிழைகளைச் சரிசெய்வதற்காகப் பயன்படுத்துகிறது. இந்த ஹேக்குகள், CSS மதிப்பீட்டாளர்கள் தவறானவை என்று புகார் செய்ய காரணமாகிறது. ஓரிரு இடங்களில், நாங்கள் இன்னும் முழுமையாக தரநிலைப்படுத்தப்படாத இரத்தப்போக்கு-முனை CSS அம்சங்களையும் பயன்படுத்துகிறோம், ஆனால் இவை முற்போக்கான மேம்பாட்டிற்காக மட்டுமே பயன்படுத்தப்படுகின்றன.
இந்த சரிபார்ப்பு எச்சரிக்கைகள் நடைமுறையில் முக்கியமில்லை, ஏனெனில் எங்கள் CSS இன் ஹேக்கி அல்லாத பகுதி முழுமையாக சரிபார்க்கப்படுவதால் மற்றும் ஹேக்கி பகுதிகள் ஹேக்கி அல்லாத பகுதியின் சரியான செயல்பாட்டில் தலையிடாது, எனவே இந்த குறிப்பிட்ட எச்சரிக்கைகளை நாங்கள் ஏன் வேண்டுமென்றே புறக்கணிக்கிறோம்.
ஒரு குறிப்பிட்ட பயர்பாக்ஸ் பிழைக்கான தீர்வைச் சேர்ப்பதன் காரணமாக எங்கள் HTML ஆவணங்களும் சில அற்பமான மற்றும் பொருத்தமற்ற HTML சரிபார்ப்பு எச்சரிக்கைகளைக் கொண்டுள்ளன .
மூன்றாம் தரப்பு செருகுநிரல்கள் அல்லது துணை நிரல்களை நாங்கள் அதிகாரப்பூர்வமாக ஆதரிக்கவில்லை என்றாலும், உங்கள் திட்டங்களில் சாத்தியமான சிக்கல்களைத் தவிர்க்க உதவும் சில பயனுள்ள ஆலோசனைகளை வழங்குகிறோம்.
Google Maps மற்றும் Google Custom Search Engine உட்பட சில மூன்றாம் தரப்பு மென்பொருட்கள் பூட்ஸ்டார்ப்புடன் முரண்படுவதால் * { box-sizing: border-box; }
, ஒரு padding
உறுப்பின் இறுதி கணக்கிடப்பட்ட அகலத்தைப் பாதிக்காது. CSS தந்திரங்களில் பெட்டி மாதிரி மற்றும் அளவைப் பற்றி மேலும் அறிக .
சூழலைப் பொறுத்து, நீங்கள் தேவைக்கேற்ப மேலெழுதலாம் (விருப்பம் 1) அல்லது முழுப் பகுதிகளுக்கும் பெட்டி அளவை மீட்டமைக்கலாம் (விருப்பம் 2).
பூட்ஸ்டார்ப் பொதுவான இணைய தரநிலைகளைப் பின்பற்றுகிறது மற்றும் குறைந்த கூடுதல் முயற்சியுடன் - AT ஐப் பயன்படுத்துபவர்களுக்கு அணுகக்கூடிய தளங்களை உருவாக்கப் பயன்படுத்தலாம் .
உங்கள் வழிசெலுத்தல் பல இணைப்புகளைக் கொண்டிருந்தால் மற்றும் DOM இல் உள்ள முக்கிய உள்ளடக்கத்திற்கு முன் இருந்தால் Skip to main content
, வழிசெலுத்தலுக்கு முன் ஒரு இணைப்பைச் சேர்க்கவும் (ஒரு எளிய விளக்கத்திற்கு, வழிசெலுத்தல் இணைப்புகளைத் தவிர்த்தல் பற்றிய இந்த A11Y திட்டக் கட்டுரையைப் பார்க்கவும் ). வகுப்பைப் பயன்படுத்துவது .sr-only
தவிர்க்கும் இணைப்பைப் பார்வைக்கு மறைக்கும் .sr-only-focusable
.
Chrome இல் உள்ள நீண்டகால குறைபாடுகள்/பிழைகள் ( Chromium பிழை டிராக்கரில் உள்ள இதழ் 262171 ஐப் பார்க்கவும்) மற்றும் Internet Explorer ( இன்-பேஜ் இணைப்புகள் மற்றும் ஃபோகஸ் ஆர்டர் பற்றிய இந்தக் கட்டுரையைப் பார்க்கவும் ) காரணமாக, உங்கள் ஸ்கிப் இணைப்பின் இலக்கை நீங்கள் உறுதிசெய்ய வேண்டும். சேர்ப்பதன் மூலம் குறைந்தபட்சம் நிரல் ரீதியாக கவனம் செலுத்த முடியும் tabindex="-1"
.
கூடுதலாக, இலக்கில் காணக்கூடிய ஃபோகஸ் குறிப்பை நீங்கள் வெளிப்படையாக அடக்க விரும்பலாம் (குறிப்பாக Chrome தற்போது உறுப்புகளை 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 ஆகும். சிறிய துண்டுகளாக வேகவைக்கப்பட்டு, பின்வரும் நிபந்தனைகளுடன் விவரிக்கலாம்.
மேலும் தகவலுக்கு முழு பூட்ஸ்டார்ப் உரிமம் திட்ட களஞ்சியத்தில் உள்ளது.
சமூக உறுப்பினர்கள் பூட்ஸ்டார்ப்பின் ஆவணங்களை பல்வேறு மொழிகளில் மொழிபெயர்த்துள்ளனர். எதுவும் அதிகாரப்பூர்வமாக ஆதரிக்கப்படவில்லை மற்றும் அவை எப்போதும் புதுப்பித்த நிலையில் இருக்காது.
மொழிபெயர்ப்புகளை ஒழுங்கமைக்க அல்லது ஹோஸ்ட் செய்ய நாங்கள் உதவ மாட்டோம், அவற்றுடன் இணைக்கிறோம்.
புதிய அல்லது சிறந்த மொழிபெயர்ப்பை முடித்தீர்களா? அதை எங்கள் பட்டியலில் சேர்க்க இழுக்கும் கோரிக்கையைத் திறக்கவும்.