பதிவிறக்க Tamil

பூட்ஸ்டார்ப் (தற்போது v3.4.1) விரைவாகத் தொடங்குவதற்கு சில எளிய வழிகளைக் கொண்டுள்ளது, ஒவ்வொன்றும் வெவ்வேறு திறன் நிலை மற்றும் பயன்பாட்டு வழக்கை ஈர்க்கின்றன. உங்கள் குறிப்பிட்ட தேவைகளுக்கு எது பொருத்தமானது என்பதைப் படியுங்கள்.

jsDelivr

jsDelivr இல் உள்ளவர்கள் பூட்ஸ்டார்ப்பின் CSS மற்றும் ஜாவாஸ்கிரிப்ட்டுக்கு 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 ஐப் பயன்படுத்தி பூட்ஸ்டார்ப்பை நிறுவலாம் :

npm install bootstrap@3

require('bootstrap')பூட்ஸ்டார்ப்பின் அனைத்து jQuery செருகுநிரல்களையும் jQuery பொருளில் ஏற்றும். bootstrapதொகுதியே எதையும் ஏற்றுமதி செய்யாது . /js/*.jsதொகுப்பின் உயர்மட்ட கோப்பகத்தின் கீழ் கோப்புகளை ஏற்றுவதன் மூலம் பூட்ஸ்டார்ப்பின் jQuery செருகுநிரல்களை கைமுறையாக ஏற்றலாம் .

பூட்ஸ்ட்ராப் package.jsonபின்வரும் விசைகளின் கீழ் சில கூடுதல் மெட்டாடேட்டாவைக் கொண்டுள்ளது:

• less- பூட்ஸ்டார்ப்பின் முக்கிய குறைவான மூலக் கோப்பிற்கான பாதை
• style- பூட்ஸ்டார்ப்பின் சிறியப்படுத்தப்படாத CSSக்கான பாதை இயல்புநிலை அமைப்புகளைப் பயன்படுத்தி முன்தொகுக்கப்பட்டது (தனிப்பயனாக்கம் இல்லை)

இசையமைப்பாளருடன் நிறுவவும்

கம்போசரைப் பயன்படுத்தி பூட்ஸ்டார்ப்பின் லெஸ், சிஎஸ்எஸ், ஜாவாஸ்கிரிப்ட் மற்றும் எழுத்துருக்களை நிறுவி நிர்வகிக்கலாம் :

composer require twbs/bootstrap

லெஸ்/சாஸ்க்கு ஆட்டோபிரிஃபிக்சர் தேவை

CSS விற்பனையாளர் முன்னொட்டுகளைக் கையாள பூட்ஸ்டார்ப் Autoprefixer ஐப் பயன்படுத்துகிறது . நீங்கள் Bootstrap ஐ அதன் Less/Sass மூலத்திலிருந்து தொகுக்கிறீர்கள் மற்றும் எங்கள் Gruntfile ஐப் பயன்படுத்தாமல் இருந்தால், உங்கள் உருவாக்க செயல்முறையில் Autoprefixer ஐ நீங்கள் ஒருங்கிணைக்க வேண்டும். நீங்கள் முன்தொகுக்கப்பட்ட பூட்ஸ்டார்ப்பைப் பயன்படுத்தினால் அல்லது எங்கள் கிரண்ட்ஃபைலைப் பயன்படுத்தினால், இதைப் பற்றி நீங்கள் கவலைப்படத் தேவையில்லை, ஏனெனில் ஆட்டோபிரிஃபிக்சர் ஏற்கனவே எங்கள் கிரண்ட்ஃபைலில் ஒருங்கிணைக்கப்பட்டுள்ளது.

என்ன சேர்க்கப்பட்டுள்ளது

பூட்ஸ்டார்ப் இரண்டு வடிவங்களில் தரவிறக்கம் செய்யக்கூடியது, அதில் பின்வரும் கோப்பகங்கள் மற்றும் கோப்புகளை நீங்கள் காணலாம், பொதுவான ஆதாரங்களை தர்க்கரீதியாக தொகுத்து தொகுக்கப்பட்ட மற்றும் சிறிய மாறுபாடுகளை வழங்குகிறது.

முன்தொகுக்கப்பட்ட பூட்ஸ்ட்ராப்

பதிவிறக்கம் செய்யப்பட்டதும், (தொகுக்கப்பட்ட) பூட்ஸ்டார்ப்பின் கட்டமைப்பைக் காண சுருக்கப்பட்ட கோப்புறையை அன்சிப் செய்யவும். இது போன்ற ஒன்றை நீங்கள் காண்பீர்கள்:

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.*), அத்துடன் தொகுக்கப்பட்ட மற்றும் சிறிதாக்கப்பட்ட CSS மற்றும் JS ( bootstrap.min.*) ஆகியவற்றை நாங்கள் வழங்குகிறோம். சில உலாவிகளின் டெவலப்பர் கருவிகளுடன் பயன்படுத்த CSS மூல வரைபடங்கள் ( ) கிடைக்கின்றன. bootstrap.*.mapவிருப்பமான பூட்ஸ்டார்ப் தீம் போலவே Glyphicons இலிருந்து எழுத்துருக்கள் சேர்க்கப்பட்டுள்ளன.

பூட்ஸ்ட்ராப் மூல குறியீடு

பூட்ஸ்டார்ப் மூலக் குறியீடு பதிவிறக்கமானது முன்தொகுக்கப்பட்ட CSS, ஜாவாஸ்கிரிப்ட் மற்றும் எழுத்துரு சொத்துக்கள் மற்றும் ஆதாரம் குறைவாக, ஜாவாஸ்கிரிப்ட் மற்றும் ஆவணப்படுத்தல் ஆகியவற்றை உள்ளடக்கியது. மேலும் குறிப்பாக, இது பின்வருவனவற்றையும் மேலும் பலவற்றையும் உள்ளடக்கியது:

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

எங்கள் CSS, JS மற்றும் ஐகான் எழுத்துருக்களுக்கான (முறையே) மூலக் குறியீடு , , மற்றும் less/ஆகும் js/. fonts/மேலே dist/உள்ள முன்தொகுக்கப்பட்ட பதிவிறக்கப் பிரிவில் பட்டியலிடப்பட்டுள்ள அனைத்தும் கோப்புறையில் அடங்கும். கோப்புறையில் எங்கள் ஆவணங்கள் மற்றும் பூட்ஸ்டார்ப் பயன்பாட்டிற்கான docs/மூலக் குறியீடு உள்ளது . examples/அதையும் தாண்டி, வேறு ஏதேனும் சேர்க்கப்பட்ட கோப்பு தொகுப்புகள், உரிமத் தகவல் மற்றும் மேம்பாட்டிற்கான ஆதரவை வழங்குகிறது.

CSS மற்றும் ஜாவாஸ்கிரிப்ட் தொகுத்தல்

பூட்ஸ்டார்ப் அதன் உருவாக்க அமைப்புக்கு கிரண்ட்டைப் பயன்படுத்துகிறது, கட்டமைப்புடன் வேலை செய்வதற்கான வசதியான முறைகள். எங்கள் குறியீட்டை எவ்வாறு தொகுக்கிறோம், சோதனைகளை இயக்குகிறோம் மற்றும் பல.

கிரண்ட் நிறுவுகிறது

கிரண்ட் நிறுவ, நீங்கள் முதலில் node.js ஐ பதிவிறக்கி நிறுவ வேண்டும் (இதில் npm அடங்கும்). npm என்பது முனை தொகுக்கப்பட்ட தொகுதிகள் மற்றும் node.js மூலம் வளர்ச்சி சார்புகளை நிர்வகிப்பதற்கான ஒரு வழியாகும்.

1. grunt-cliஉடன் உலகளவில் நிறுவவும் npm install -g grunt-cli.
2. ரூட் கோப்பகத்திற்கு செல்லவும் /bootstrap/, பின்னர் இயக்கவும் npm install. npm கோப்பைப் பார்த்து, package.jsonஅங்கு பட்டியலிடப்பட்டுள்ள தேவையான உள்ளூர் சார்புகளை தானாகவே நிறுவும்.

முடிந்ததும், கட்டளை வரியிலிருந்து வழங்கப்பட்ட பல்வேறு கிரண்ட் கட்டளைகளை நீங்கள் இயக்க முடியும்.

கிரண்ட் கட்டளைகள் கிடைக்கும்

grunt dist(சிஎஸ்எஸ் மற்றும் ஜாவாஸ்கிரிப்ட் தொகுக்கவும்)

/dist/தொகுக்கப்பட்ட மற்றும் சிறிதாக்கப்பட்ட CSS மற்றும் JavaScript கோப்புகளுடன் கோப்பகத்தை மீண்டும் உருவாக்குகிறது . பூட்ஸ்டார்ப் பயனராக, இது பொதுவாக நீங்கள் விரும்பும் கட்டளையாகும்.

grunt watch(பார்க்கவும்)

குறைந்த மூலக் கோப்புகளைப் பார்த்து, நீங்கள் மாற்றத்தைச் சேமிக்கும் போதெல்லாம் தானாகவே அவற்றை CSSக்கு மீண்டும் தொகுக்கும்.

grunt test(சோதனைகளை இயக்கவும்)

JSHint ஐ இயக்குகிறது மற்றும் QUnit சோதனைகளை உண்மையான உலாவிகளில் கர்மாவிற்கு நன்றி செலுத்துகிறது .

grunt docs(டாக்ஸ் சொத்துக்களை உருவாக்கி சோதிக்கவும்)

மூலம் உள்நாட்டில் ஆவணங்களை இயக்கும் போது பயன்படுத்தப்படும் CSS, JavaScript மற்றும் பிற சொத்துக்களை உருவாக்கி சோதிக்கிறது bundle exec jekyll serve.

grunt(எல்லாவற்றையும் உருவாக்கி சோதனைகளை இயக்கவும்)

CSS மற்றும் JavaScript ஐ தொகுத்து சிறிதாக்குகிறது, ஆவண இணையதளத்தை உருவாக்குகிறது, டாக்ஸுக்கு எதிராக HTML5 வேலிடேட்டரை இயக்குகிறது, Customizer சொத்துக்களை மீண்டும் உருவாக்குகிறது மற்றும் பல. ஜெகில் தேவை . பொதுவாக நீங்கள் பூட்ஸ்டார்ப்பில் ஹேக்கிங் செய்தால் மட்டுமே அவசியம்.

பழுது நீக்கும்

சார்புகளை நிறுவுவதில் அல்லது கிரண்ட் கட்டளைகளை இயக்குவதில் சிக்கல் ஏற்பட்டால், முதலில் /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.

பூட்ஸ்ட்ராப் தீம்

பார்வைக்கு மேம்பட்ட அனுபவத்திற்கு விருப்பமான பூட்ஸ்டார்ப் தீம் ஏற்றவும்.

கட்டங்கள்

நான்கு அடுக்குகள், கூடு கட்டுதல் மற்றும் பலவற்றைக் கொண்ட கிரிட் தளவமைப்புகளின் பல எடுத்துக்காட்டுகள்.

ஜம்போட்ரான்

நவ்பார் மற்றும் சில அடிப்படை கட்ட நெடுவரிசைகள் மூலம் ஜம்போட்ரானைச் சுற்றி உருவாக்கவும்.

குறுகிய ஜம்போட்ரான்

இயல்புநிலை கொள்கலன் மற்றும் ஜம்போட்ரானைக் குறைப்பதன் மூலம் மேலும் தனிப்பயன் பக்கத்தை உருவாக்கவும்.

செயலில் நவ்பார்கள்

நவ்பார்

சில கூடுதல் உள்ளடக்கத்துடன் navbar உள்ளடக்கிய சூப்பர் அடிப்படை டெம்ப்ளேட்.

நிலையான மேல் நேவ்பார்

சில கூடுதல் உள்ளடக்கத்துடன் நிலையான டாப் நேவ்பார் கொண்ட சூப்பர் அடிப்படை டெம்ப்ளேட்.

நிலையான navbar

சில கூடுதல் உள்ளடக்கத்துடன் நிலையான மேல் நேவ்பார் கொண்ட சூப்பர் அடிப்படை டெம்ப்ளேட்.

தனிப்பயன் கூறுகள்

கவர்

எளிய மற்றும் அழகான முகப்புப் பக்கங்களை உருவாக்குவதற்கான ஒரு பக்க டெம்ப்ளேட்.

கொணர்வி

navbar மற்றும் கொணர்வியைத் தனிப்பயனாக்குங்கள், பின்னர் சில புதிய கூறுகளைச் சேர்க்கவும்.

வலைப்பதிவு

தனிப்பயன் வழிசெலுத்தல், தலைப்பு மற்றும் வகையுடன் கூடிய எளிய இரண்டு நெடுவரிசை வலைப்பதிவு தளவமைப்பு.

டாஷ்போர்டு

நிலையான பக்கப்பட்டி மற்றும் navbar கொண்ட நிர்வாகி டாஷ்போர்டிற்கான அடிப்படை அமைப்பு.

உள்நுழைவு பக்கம்

படிவத்தில் எளிமையான கையொப்பத்திற்கான தனிப்பயன் படிவ அமைப்பு மற்றும் வடிவமைப்பு.

நியாயப்படுத்தப்பட்ட nav

நியாயப்படுத்தப்பட்ட இணைப்புகளுடன் தனிப்பயன் நேவ்பாரை உருவாக்கவும். எச்சரிக்கை! மிகவும் சஃபாரி நட்பு இல்லை.

ஒட்டும் அடிக்குறிப்பு

உள்ளடக்கம் அதைவிடக் குறைவாக இருக்கும் போது, ​​வியூபோர்ட்டின் அடிப்பகுதியில் அடிக்குறிப்பை இணைக்கவும்.

navbar உடன் ஒட்டும் அடிக்குறிப்பு

வியூபோர்ட்டின் கீழே ஒரு அடிக்குறிப்பை இணைக்கவும், மேலே நிலையான நேவ்பார் இருக்கும்.

பரிசோதனைகள்

பதிலளிக்காத பூட்ஸ்டார்ப்

எங்கள் ஆவணத்தின்படி பூட்ஸ்டார்ப்பின் வினைத்திறனை எளிதாக முடக்கவும் .

ஆஃப்-கேன்வாஸ்

பூட்ஸ்டார்ப்புடன் பயன்படுத்த, மாற்றக்கூடிய ஆஃப்-கேன்வாஸ் வழிசெலுத்தல் மெனுவை உருவாக்கவும்.

கருவிகள்

பூட்லின்ட்

பூட்லிண்ட் என்பது அதிகாரப்பூர்வ பூட்ஸ்டார்ப் HTML லிண்டர் கருவியாகும். பூட்ஸ்டார்ப்பை "வெண்ணிலா" வழியில் பயன்படுத்தும் வலைப்பக்கங்களில் உள்ள பல பொதுவான HTML தவறுகளை இது தானாகவே சரிபார்க்கிறது. வெண்ணிலா பூட்ஸ்டார்ப்பின் கூறுகள்/விட்ஜெட்டுகளுக்கு அவற்றின் DOM பகுதிகள் சில கட்டமைப்புகளுக்கு இணங்க வேண்டும். பூட்லிண்ட் பூட்ஸ்டார்ப் கூறுகளின் நேர்வுகள் சரியாக கட்டமைக்கப்பட்ட HTML ஐ சரிபார்க்கிறது. உங்கள் பூட்ஸ்டார்ப் வலை அபிவிருத்தி கருவித்தொகுப்பில் பூட்லின்ட்டைச் சேர்ப்பதைக் கவனியுங்கள், இதனால் பொதுவான தவறுகள் எதுவும் உங்கள் திட்டத்தின் வளர்ச்சியைக் குறைக்காது.

சமூக

பூட்ஸ்டார்ப்பின் மேம்பாடு குறித்து புதுப்பித்த நிலையில் இருங்கள் மற்றும் இந்த பயனுள்ள ஆதாரங்களுடன் சமூகத்தை அணுகவும்.

• அதிகாரப்பூர்வ பூட்ஸ்டார்ப் வலைப்பதிவைப் படித்து குழுசேரவும் .
• ##bootstrap சேனலில்irc.freenode.net உள்ள சர்வரில் IRC ஐப் பயன்படுத்தி சக பூட்ஸ்ட்ராப்பர்களுடன் அரட்டையடிக்கவும் .
• பூட்ஸ்டார்ப்பைப் பயன்படுத்துவதற்கான உதவிக்கு , குறிச்சொல்லைப் பயன்படுத்தி StackOverflowtwitter-bootstrap-3 இல் கேட்கவும் .
• npm அல்லது ஒத்த டெலிவரி பொறிமுறைகள் bootstrapமூலம் விநியோகிக்கும்போது, ​​பூட்ஸ்டார்ப்பின் செயல்பாட்டை மாற்றியமைக்கும் அல்லது சேர்க்கும் தொகுப்புகளில் முக்கிய சொல்லை டெவலப்பர்கள் பயன்படுத்த வேண்டும் .
• பூட்ஸ்டார்ப் எக்ஸ்போவில் பூட்ஸ்டார்ப் மூலம் உருவாக்குபவர்களின் எழுச்சியூட்டும் உதாரணங்களைக் கண்டறியவும் .

சமீபத்திய வதந்திகள் மற்றும் அற்புதமான இசை வீடியோக்களுக்கு நீங்கள் @getbootstrap ஐ Twitter இல் பின்தொடரலாம் .

பதிலளிக்கும் தன்மையை முடக்குகிறது

பூட்ஸ்டார்ப் உங்கள் பக்கங்களை பல்வேறு திரை அளவுகளுக்கு தானாகவே மாற்றியமைக்கிறது. இந்த அம்சத்தை எவ்வாறு முடக்குவது என்பது இங்கே கொடுக்கப்பட்டுள்ளது, எனவே உங்கள் பக்கம் இது போன்ற பதிலளிக்காத உதாரணம் .

பக்கத்தின் வினைத்திறனை முடக்குவதற்கான படிகள்

1. CSS டாக்ஸில்<meta> குறிப்பிடப்பட்டுள்ள வியூபோர்ட்டைத் தவிர்க்கவும்
2. ஒவ்வொறு க்ரிட் அடுக்குக்கும் ஒரே அகலத்தில் உள்ளதை மேலெழுதவும், எடுத்துக்காட்டாக, இது widthஇயல்புநிலை பூட்ஸ்டார்ப் CSSக்குப் பிறகு வருகிறது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். மீடியா வினவல்கள் அல்லது சில செலக்டர்-ஃபூ மூலம் நீங்கள் விருப்பமாகத் தவிர்க்கலாம் ..containerwidth: 970px !important;!important
3. navbarகளைப் பயன்படுத்தினால், அனைத்து navbar சரியும் மற்றும் விரிவடையும் நடத்தையை அகற்றவும்.
4. கிரிட் தளவமைப்புகளுக்கு, .col-xs-*நடுத்தர/பெரியவற்றுடன் கூடுதலாக அல்லது அதற்கு பதிலாக வகுப்புகளைப் பயன்படுத்தவும். கவலைப்பட வேண்டாம், கூடுதல்-சிறிய சாதன கட்டம் அனைத்து தீர்மானங்களுக்கும் அளவிடும்.

உங்களுக்கு இன்னும் IE8 க்கு Respond.js தேவைப்படும் (எங்கள் மீடியா வினவல்கள் இன்னும் உள்ளன மற்றும் செயலாக்கப்பட வேண்டும்). இது பூட்ஸ்டார்ப்பின் "மொபைல் தளம்" அம்சங்களை முடக்குகிறது.

பூட்ஸ்டார்ப் டெம்ப்ளேட் பதிலளிக்கக்கூடியது முடக்கப்பட்டுள்ளது

ஒரு உதாரணத்திற்கு இந்த படிகளைப் பயன்படுத்தியுள்ளோம். குறிப்பிட்ட மாற்றங்களைச் செயல்படுத்த அதன் மூலக் குறியீட்டைப் படிக்கவும்.

பதிலளிக்காத உதாரணத்தைக் காண்க

உலாவி மற்றும் சாதன ஆதரவு

பூட்ஸ்டார்ப் சமீபத்திய டெஸ்க்டாப் மற்றும் மொபைல் உலாவிகளில் சிறப்பாகச் செயல்படும் வகையில் கட்டமைக்கப்பட்டுள்ளது, அதாவது பழைய உலாவிகள் முற்றிலும் செயல்பட்டாலும், சில கூறுகளின் ரெண்டரிங்கில் வித்தியாசமான பாணியைக் காட்டக்கூடும்.

ஆதரிக்கப்படும் உலாவிகள்

குறிப்பாக, பின்வரும் உலாவிகள் மற்றும் இயங்குதளங்களின் சமீபத்திய பதிப்புகளை நாங்கள் ஆதரிக்கிறோம்.

WebKit, Blink அல்லது Gecko இன் சமீபத்திய பதிப்பைப் பயன்படுத்தும் மாற்று உலாவிகள் நேரடியாகவோ அல்லது தளத்தின் வலைக் காட்சி API மூலமாகவோ வெளிப்படையாக ஆதரிக்கப்படாது. இருப்பினும், பூட்ஸ்டார்ப் (பெரும்பாலான சந்தர்ப்பங்களில்) இந்த உலாவிகளிலும் சரியாகக் காட்டப்பட்டு செயல்பட வேண்டும். மேலும் குறிப்பிட்ட ஆதரவு தகவல் கீழே கொடுக்கப்பட்டுள்ளது.

மொபைல் சாதனங்கள்

பொதுவாக, பூட்ஸ்டார்ப் ஒவ்வொரு முக்கிய தளத்தின் இயல்புநிலை உலாவிகளின் சமீபத்திய பதிப்புகளை ஆதரிக்கிறது. ப்ராக்ஸி உலாவிகள் (Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk போன்றவை) ஆதரிக்கப்படவில்லை என்பதை நினைவில் கொள்ளவும்.

டெஸ்க்டாப் உலாவிகள்

இதேபோல், பெரும்பாலான டெஸ்க்டாப் உலாவிகளின் சமீபத்திய பதிப்புகள் ஆதரிக்கப்படுகின்றன.

Windows இல், Internet Explorer 8-11 ஐ ஆதரிக்கிறோம் .

Firefox க்கு, சமீபத்திய இயல்பான நிலையான வெளியீட்டிற்கு கூடுதலாக, Firefox இன் சமீபத்திய விரிவாக்கப்பட்ட ஆதரவு வெளியீடு (ESR) பதிப்பையும் நாங்கள் ஆதரிக்கிறோம்.

அதிகாரப்பூர்வமற்ற முறையில், பூட்ஸ்டார்ப் லினக்ஸிற்கான Chromium மற்றும் Chrome, Linux க்கான Firefox மற்றும் Internet Explorer 7 மற்றும் மைக்ரோசாஃப்ட் எட்ஜ் ஆகியவற்றில் போதுமான அளவு தோற்றமளிக்க வேண்டும், ஆனால் அவை அதிகாரப்பூர்வமாக ஆதரிக்கப்படவில்லை.

பூட்ஸ்டார்ப் பிடிபட வேண்டிய சில உலாவி பிழைகளின் பட்டியலுக்கு, எங்கள் உலாவி பிழைகளின் சுவரைப் பார்க்கவும் .

இன்டர்நெட் எக்ஸ்புளோரர் 8 மற்றும் 9

இன்டர்நெட் எக்ஸ்ப்ளோரர் 8 மற்றும் 9 ஆகியவை ஆதரிக்கப்படுகின்றன, இருப்பினும், சில CSS3 பண்புகள் மற்றும் HTML5 கூறுகள் இந்த உலாவிகளால் முழுமையாக ஆதரிக்கப்படவில்லை என்பதை நினைவில் கொள்ளவும். கூடுதலாக, Internet Explorer 8 க்கு மீடியா வினவல் ஆதரவை செயல்படுத்த Respond.js ஐப் பயன்படுத்த வேண்டும்.

CSS3 மற்றும் HTML5 அம்சங்களின் உலாவி ஆதரவு பற்றிய விவரங்களுக்கு நான் பயன்படுத்தலாமா... என்பதைப் பார்வையிடவும் .

Internet Explorer 8 மற்றும் Respond.js

இன்டர்நெட் எக்ஸ்புளோரர் 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

மூலம் குறிப்பிடப்படும் CSS உடன் Respond.js வேலை செய்யாது @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

@font-faceIE8 உடன் இணைந்தால் சில சிக்கல்கள் உள்ளன :before. பூட்ஸ்ட்ராப் அதன் கிளைஃபிகான்களுடன் அந்த கலவையைப் பயன்படுத்துகிறது. ஒரு பக்கம் தற்காலிகமாகச் சேமிக்கப்பட்டு, சாளரத்தில் மவுஸ் இல்லாமல் ஏற்றப்பட்டால் (அதாவது புதுப்பிப்பு பொத்தானை அழுத்தவும் அல்லது ஏதாவது ஐஃப்ரேமில் ஏற்றவும்) பின்னர் எழுத்துரு ஏற்றப்படும் முன் பக்கம் ரெண்டர் செய்யப்படும். பக்கத்தின் (உடல்) மீது வட்டமிடுவது சில ஐகான்களைக் காண்பிக்கும் மற்றும் மீதமுள்ள ஐகான்களின் மீது வட்டமிடுவது அவற்றையும் காண்பிக்கும். விவரங்களுக்கு #13863 இதழைப் பார்க்கவும்.

IE பொருந்தக்கூடிய முறைகள்

பழைய இன்டர்நெட் எக்ஸ்ப்ளோரர் இணக்கத்தன்மை முறைகளில் பூட்ஸ்டார்ப் ஆதரிக்கப்படவில்லை. IEக்கான சமீபத்திய ரெண்டரிங் பயன்முறையைப் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்த <meta>, உங்கள் பக்கங்களில் பொருத்தமான குறிச்சொல்லைச் சேர்க்கவும்:

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

பிழைத்திருத்தக் கருவிகளைத் திறப்பதன் மூலம் ஆவணப் பயன்முறையை உறுதிப்படுத்தவும்: F12"ஆவணப் பயன்முறையை" அழுத்திச் சரிபார்க்கவும்.

இன்டர்நெட் எக்ஸ்புளோரரின் ஒவ்வொரு ஆதரிக்கப்படும் பதிப்பிலும் சிறந்த ரெண்டரிங்கை உறுதிசெய்ய, பூட்ஸ்டார்ப்பின் அனைத்து ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகளிலும் இந்தக் குறிச்சொல் சேர்க்கப்பட்டுள்ளது.

மேலும் தகவலுக்கு இந்த StackOverflow கேள்வியைப் பார்க்கவும் .

விண்டோஸ் 8 மற்றும் விண்டோஸ் போன் 8 இல் இன்டர்நெட் எக்ஸ்புளோரர் 10

இன்டர்நெட் எக்ஸ்ப்ளோரர் 10 சாதனத்தின் அகலத்தை வியூபோர்ட் அகலத்திலிருந்து வேறுபடுத்தாது , இதனால் பூட்ஸ்டார்ப்பின் CSS இல் மீடியா வினவல்களை சரியாகப் பயன்படுத்தாது. இதை சரிசெய்ய, பொதுவாக நீங்கள் CSS இன் விரைவான துணுக்கைச் சேர்க்க வேண்டும்:

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

இருப்பினும், புதுப்பிப்பு 3 (GDR3) ஐ விட பழைய விண்டோஸ் ஃபோன் 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 மற்றும் சாதன அகலத்தைப் படிக்கவும் .

முன்னறிவிப்பாக, பூட்ஸ்டார்ப்பின் அனைத்து ஆவணங்களிலும் இதை ஒரு ஆர்ப்பாட்டமாக எடுத்துக்காட்டுகிறோம்.

சஃபாரி சதவீதம் ரவுண்டிங்

.col-*-1OS X க்கான v7.1 க்கு முந்தைய Safari பதிப்புகளின் ரெண்டரிங் இயந்திரம் மற்றும் iOS v8.0 க்கான Safari ஆகியவை எங்கள் கட்ட வகுப்புகளில் பயன்படுத்தப்படும் தசம இடங்களின் எண்ணிக்கையில் சில சிக்கல்களை எதிர்கொண்டன . உங்களிடம் 12 தனித்தனி கிரிட் நெடுவரிசைகள் இருந்தால், மற்ற நெடுவரிசைகளுடன் ஒப்பிடும்போது அவை குறுகியதாக இருப்பதை நீங்கள் கவனிப்பீர்கள். Safari/iOS ஐ மேம்படுத்துவதைத் தவிர, உங்களுக்கு சில தீர்வுகள் உள்ளன:

• .pull-rightகடின-வலது சீரமைப்பைப் பெற, உங்கள் கடைசி கட்ட நெடுவரிசையில் சேர்க்கவும்
• Safariக்கான சரியான ரவுண்டிங்கைப் பெற உங்கள் சதவீதங்களை கைமுறையாக மாற்றவும் (முதல் விருப்பத்தை விட மிகவும் கடினம்)

மாதிரிகள், நவ்பார்கள் மற்றும் மெய்நிகர் விசைப்பலகைகள்

வழிதல் மற்றும் ஸ்க்ரோலிங்

overflow: hiddeniOS மற்றும் Android இல் உறுப்புக்கான ஆதரவு <body>மிகவும் குறைவாகவே உள்ளது. அந்த வகையில், அந்த சாதனங்களின் உலாவிகளில் ஏதேனும் ஒரு மாதிரியின் மேல் அல்லது கீழ் பகுதியை நீங்கள் உருட்டும் போது, <body>​​உள்ளடக்கம் உருட்டத் தொடங்கும். Chrome பிழை #175502 (Chrome v40 இல் சரி செய்யப்பட்டது) மற்றும் WebKit பிழை #153852 ஐப் பார்க்கவும் .

iOS உரை புலங்கள் மற்றும் ஸ்க்ரோலிங்

<input>iOS 9.3 இன் படி, ஒரு மாதிரி திறந்திருக்கும் போது, ​​ஒரு ஸ்க்ரோல் சைகையின் ஆரம்ப தொடுதல் உரை அல்லது a வின் எல்லைக்குள் இருந்தால், மாதிரியின் கீழ் <textarea>உள்ள <body>உள்ளடக்கம் மாதிரிக்கு பதிலாக ஸ்க்ரோல் செய்யப்படும். WebKit பிழை #153856 ஐப் பார்க்கவும் .

மெய்நிகர் விசைப்பலகைகள்

மேலும், நீங்கள் ஒரு நிலையான navbar ஐப் பயன்படுத்தினால் அல்லது ஒரு மாதிரியில் உள்ளீடுகளைப் பயன்படுத்தினால், விர்ச்சுவல் விசைப்பலகை தூண்டப்படும்போது நிலையான உறுப்புகளின் நிலையைப் புதுப்பிக்காத ரெண்டரிங் பிழை iOS இல் உள்ளது என்பதை நினைவில் கொள்ளவும். இதற்கான சில தீர்வுகளில், உங்கள் உறுப்புகளை மாற்றுவது position: absoluteஅல்லது ஃபோகஸில் டைமரைத் தூண்டி, கைமுறையாக பொசிஷனிங்கைச் சரிசெய்ய முயற்சிப்பது ஆகியவை அடங்கும். இது பூட்ஸ்டார்ப்பால் கையாளப்படவில்லை, எனவே உங்கள் பயன்பாட்டிற்கு எந்த தீர்வு சிறந்தது என்பதை நீங்கள் தீர்மானிக்க வேண்டும்.

Navbar கீழிறங்கும்

.dropdown-backdropz-இண்டெக்சிங்கின் சிக்கலான தன்மையின் காரணமாக, nav இல் iOS இல் உறுப்பு பயன்படுத்தப்படவில்லை . எனவே, நேவ்பார்களில் உள்ள கீழ்தோன்றல்களை மூட, நீங்கள் நேரடியாக கீழ்தோன்றும் உறுப்பைக் கிளிக் செய்ய வேண்டும் (அல்லது iOS இல் கிளிக் நிகழ்வைத் தொடங்கும் வேறு ஏதேனும் உறுப்பு ).

உலாவி பெரிதாக்குகிறது

பக்கத்தை பெரிதாக்குவது தவிர்க்க முடியாமல் சில கூறுகளில் ரெண்டரிங் கலைப்பொருட்களை வழங்குகிறது, பூட்ஸ்டார்ப் மற்றும் பிற இணையம். சிக்கலைப் பொறுத்து, எங்களால் அதைச் சரிசெய்ய முடியும் (முதலில் தேடவும், பின்னர் தேவைப்பட்டால் சிக்கலைத் திறக்கவும்). எவ்வாறாயினும், ஹேக்கியான தீர்வுகளைத் தவிர வேறு எந்த நேரடித் தீர்வும் இல்லாததால், இவற்றைப் புறக்கணிக்க முனைகிறோம்.

மொபைலில் ஒட்டும் :hover_:focus

பெரும்பாலான தொடுதிரைகளில் உண்மையான வட்டமிடுதல் சாத்தியமில்லை என்றாலும், பெரும்பாலான மொபைல் உலாவிகள் மிதக்கும் ஆதரவைப் பின்பற்றி :hover"ஒட்டும்" ஆக்குகின்றன. வேறு வார்த்தைகளில் கூறுவதானால், :hoverஒரு உறுப்பைத் தட்டிய பிறகு பாணிகள் பயன்படுத்தத் தொடங்குகின்றன, மேலும் பயனர் வேறு சில உறுப்புகளைத் தட்டிய பிறகு மட்டுமே பயன்படுத்துவதை நிறுத்துங்கள். :hoverஇது போன்ற உலாவிகளில் பூட்ஸ்டார்ப்பின் நிலைகள் விரும்பத்தகாத "சிக்க" ஆகலாம். சில மொபைல் உலாவிகளும் :focusஇதேபோல் ஒட்டும். இதுபோன்ற பாணிகளை முழுவதுமாக அகற்றுவதைத் தவிர, இந்த சிக்கல்களுக்கு தற்போது எளிய தீர்வு எதுவும் இல்லை.

அச்சிடுதல்

சில நவீன உலாவிகளில் கூட, அச்சிடுதல் நகைச்சுவையாக இருக்கும்.

குறிப்பாக, Chrome v32 மற்றும் விளிம்பு அமைப்புகளைப் பொருட்படுத்தாமல், ஒரு வலைப்பக்கத்தை அச்சிடும்போது மீடியா வினவல்களைத் தீர்க்கும்போது, ​​இயற்பியல் காகித அளவை விட கணிசமாகக் குறுகலான வியூபோர்ட் அகலத்தை Chrome பயன்படுத்துகிறது. இது பூட்ஸ்டார்ப்பின் கூடுதல்-சிறிய கட்டம் அச்சிடும்போது எதிர்பாராத விதமாக செயல்படுத்தப்படும். சில விவரங்களுக்கு இதழ் #12078 மற்றும் Chrome பிழை #273306 ஐப் பார்க்கவும். பரிந்துரைக்கப்பட்ட தீர்வுகள்:

• கூடுதல்-சிறிய கட்டத்தைத் தழுவி, அதன் கீழ் உங்கள் பக்கம் ஏற்கத்தக்கதாக இருப்பதை உறுதிசெய்யவும்.
• குறைவான மாறிகளின் மதிப்புகளைத் தனிப்பயனாக்குங்கள், @screen-*இதனால் உங்கள் அச்சுப்பொறி தாள் கூடுதல் சிறியதை விட பெரியதாகக் கருதப்படுகிறது.
• பிரிண்ட் மீடியாவிற்கு மட்டும் கட்ட அளவு பிரேக் பாயிண்ட்களை மாற்ற தனிப்பயன் மீடியா வினவல்களைச் சேர்க்கவும்.

மேலும், Safari v8.0 இன் படி, நிலையான-அகல .containerகள் அச்சிடும்போது வழக்கத்திற்கு மாறாக சிறிய எழுத்துரு அளவை Safari பயன்படுத்த காரணமாக இருக்கலாம். மேலும் விவரங்களுக்கு #14868 மற்றும் WebKit பிழை #138192 ஐப் பார்க்கவும். இதற்கான ஒரு சாத்தியமான தீர்வு பின்வரும் CSS ஐச் சேர்ப்பதாகும்:

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

ஆண்ட்ராய்டு பங்கு உலாவி

பெட்டிக்கு வெளியே, ஆண்ட்ராய்டு 4.1 (மற்றும் சில புதிய வெளியீடுகள் கூட) உலாவி ஆப்ஸுடன் விருப்பத்தேர்வின் இயல்புநிலை இணைய உலாவியாக (Chromeக்கு மாறாக) அனுப்பப்படும். துரதிர்ஷ்டவசமாக, உலாவி பயன்பாட்டில் பொதுவாக CSS உடன் நிறைய பிழைகள் மற்றும் முரண்பாடுகள் உள்ளன.

மெனுக்களை தேர்ந்தெடுக்கவும்

உறுப்புகளில் , மற்றும்/அல்லது பயன்படுத்தப்பட்டால் <select>, பக்கக் கட்டுப்பாடுகளை Android ஸ்டாக் உலாவி காட்டாது . (விவரங்களுக்கு இந்த StackOverflow கேள்வியைப் பார்க்கவும்.) கீழே உள்ள குறியீட்டின் துணுக்கைப் பயன்படுத்தி, குற்றமிழைக்கும் CSSஐ அகற்றி, Android ஸ்டாக் உலாவியில் மாற்றியமைக்கப்படாத உறுப்பாக வழங்கவும். பயனர் முகவர் ஸ்னிஃபிங் Chrome, Safari மற்றும் Mozilla உலாவிகளில் குறுக்கிடுவதைத் தவிர்க்கிறது.border-radiusborder<select>

<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 பின் டெமோவைப் பாருங்கள்.

சரிபார்ப்பவர்கள்

பழைய மற்றும் தரமற்ற உலாவிகளுக்கு சிறந்த அனுபவத்தை வழங்க, பூட்ஸ்டார்ப் பல இடங்களில் CSS உலாவி ஹேக்குகளைப் பயன்படுத்துகிறது, சில உலாவி பதிப்புகளுக்கு சிறப்பு CSS ஐ குறிவைத்து, உலாவிகளில் உள்ள பிழைகளைச் சரிசெய்வதற்காகப் பயன்படுத்துகிறது. இந்த ஹேக்குகள், CSS மதிப்பீட்டாளர்கள் தவறானவை என்று புகார் செய்ய காரணமாகிறது. ஓரிரு இடங்களில், நாங்கள் இன்னும் முழுமையாக தரநிலைப்படுத்தப்படாத இரத்தப்போக்கு-முனை CSS அம்சங்களையும் பயன்படுத்துகிறோம், ஆனால் இவை முற்போக்கான மேம்பாட்டிற்காக மட்டுமே பயன்படுத்தப்படுகின்றன.

இந்த ச���ிபார்ப்பு எச்சரிக்கைகள் நடைமுறையில் முக்கியமில்லை, ஏனெனில் எங்கள் CSS இன் ஹேக்கி அல்லாத பகுதி முழுவதுமாக சரிபார்க்கப்படுகிறது மற்றும் ஹேக்கி பகுதிகள் ஹேக்கி அல்லாத பகுதியின் சரியான செயல்பாட்டில் தலையிடாது, எனவே இந்த குறிப்பிட்ட எச்சரிக்கைகளை நாங்கள் ஏன் வேண்டுமென்றே புறக்கணிக்கிறோம்.

ஒரு குறிப்பிட்ட பயர்பாக்ஸ் பிழைக்கான தீர்வைச் சேர்ப்பதன் காரணமாக எங்கள் HTML ஆவணங்களும் சில அற்பமான மற்றும் பொருத்தமற்ற HTML சரிபார்ப்பு எச்சரிக்கைகளைக் கொண்டுள்ளன .

மூன்றாம் தரப்பு ஆதரவு

மூன்றாம் தரப்பு செருகுநிரல்கள் அல்லது துணை நிரல்களை நாங்கள் அதிகாரப்பூர்வமாக ஆதரிக்கவில்லை என்றாலும், உங்கள் திட்டங்களில் சாத்தியமான சிக்கல்களைத் தவிர்க்க உதவும் சில பயனுள்ள ஆலோசனைகளை வழங்குகிறோம்.

பெட்டி அளவு

Google Maps மற்றும் Google Custom Search Engine உட்பட சில மூன்றாம் தரப்பு மென்பொருட்கள் பூட்ஸ்டார்ப்புடன் முரண்படுவதால் * { box-sizing: border-box; }, ஒரு paddingஉறுப்பின் இறுதி கணக்கிடப்பட்ட அகலத்தைப் பாதிக்காது. CSS தந்திரங்களில் பெட்டி மாதிரி மற்றும் அளவைப் பற்றி மேலும் அறிக .

சூழலைப் பொறுத்து, நீங்கள் தேவைக்கேற்ப மேலெழுதலாம் (விருப்பம் 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.

<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 க்குக் கீழே ) உள்ளது. இது குறைந்த பார்வை கொண்ட பயனர்களுக்கு அல்லது வண்ண குருடர்களுக்கு சிக்கல்களை ஏற்படுத்தும். இந்த இயல்புநிலை வண்ணங்கள் அவற்றின் மாறுபாடு மற்றும் தெளிவுத்தன்மையை அதிகரிக்க மாற்றியமைக்கப்பட வேண்டியிருக்கும்.

கூடுதல் ஆதாரங்கள்

• அணுகல் சிக்கல்களைக் கண்டறிவதற்கான "HTML Codesniffer" புக்மார்க்லெட்
• Chrome இன் அணுகல்தன்மை டெவலப்பர் கருவிகள் நீட்டிப்பு
• கலர் கான்ட்ராஸ்ட் அனலைசர்
• A11Y திட்டம்
• MDN அணுகல்தன்மை ஆவணங்கள்

உரிமம் அடிக்கடி கேட்கப்படும் கேள்விகள்

பூட்ஸ்ட்ராப் எம்ஐடி உரிமத்தின் கீழ் வெளியிடப்பட்டது மற்றும் பதிப்புரிமை 2019 Twitter ஆகும். சிறிய துண்டுகளாக வேகவைக்கப்பட்டு, பின்வரும் நிபந்தனைகளுடன் விவரிக்கலாம்.

இதற்கு நீங்கள் செய்ய வேண்டியது:

• பூட்ஸ்டார்ப்பின் CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை உங்கள் படைப்புகளில் பயன்படுத்தும்போது, ​​உரிமம் மற்றும் பதிப்புரிமை அறிவிப்பை வைத்திருக்கவும்

இது உங்களை அனுமதிக்கிறது:

• தனிப்பட்ட, தனிப்பட்ட, நிறுவனத்தின் உள் அல்லது வணிக நோக்கங்களுக்காக பூட்ஸ்டார்ப்பை முழுமையாகவோ அல்லது பகுதியாகவோ இலவசமாக பதிவிறக்கம் செய்து பயன்படுத்தவும்
• நீங்கள் உருவாக்கும் தொகுப்புகள் அல்லது விநியோகங்களில் பூட்ஸ்டார்ப்பைப் பயன்படுத்தவும்
• மூலக் குறியீட்டை மாற்றவும்
• உரிமத்தில் சேர்க்கப்படாத மூன்றாம் தரப்பினருக்கு பூட்ஸ்ட்ராப்பை மாற்றவும் விநியோகிக்கவும் துணை உரிமத்தை வழங்கவும்

இது உங்களைத் தடுக்கிறது:

• பூட்ஸ்டார்ப் உத்தரவாதமின்றி வழங்கப்படுவதால், சேதங்களுக்கு ஆசிரியர்கள் மற்றும் உரிம உரிமையாளர்களை பொறுப்பாக்குங்கள்
• பூட்ஸ்டார்ப்பின் படைப்பாளிகள் அல்லது பதிப்புரிமைதாரர்களை பொறுப்பாக்குங்கள்
• சரியான பண்புக்கூறு இல்லாமல் பூட்ஸ்ட்ராப்பின் எந்த பகுதியையும் மறுவிநியோகம் செய்யவும்
• உங்கள் விநியோகத்தை Twitter அங்கீகரிக்கிறது என்பதைக் குறிப்பிடும் அல்லது குறிக்கும் வகையில் ட்விட்டருக்குச் சொந்தமான எந்த மதிப்பெண்களையும் பயன்படுத்தவும்
• கேள்விக்குரிய ட்விட்டர் மென்பொருளை நீங்கள் உருவாக்கியுள்ளீர்கள் என்பதைக் குறிப்பிடும் அல்லது குறிக்கும் வகையில் ட்விட்டருக்குச் சொந்தமான எந்த மதிப்பெண்களையும் பயன்படுத்தவும்

நீங்கள் செய்ய வேண்டிய அவசியமில்லை:

• பூட்ஸ்டார்ப்பின் மூலத்தையோ அல்லது அதில் நீங்கள் செய்திருக்கும் மாற்றங்களையோ, அதை உள்ளடக்கிய எந்த மறுவிநியோகத்திலும் நீங்கள் இணைக்கலாம்.
• பூட்ஸ்டார்ப்பில் நீங்கள் செய்யும் மாற்றங்களை மீண்டும் பூட்ஸ்டார்ப் திட்டத்திற்குச் சமர்ப்பிக்கவும் (அத்தகைய கருத்துகள் ஊக்குவிக்கப்பட்டாலும்)

மேலும் தகவலுக்கு முழு பூட்ஸ்டார்ப் உரிமம் திட்ட களஞ்சியத்தில் உள்ளது.

மொழிபெயர்ப்புகள்

சமூக உறுப்பினர்கள் பூட்ஸ்டார்ப்பின் ஆவணங்களை பல்வேறு மொழிகளில் மொழிபெயர்த்துள்ளனர். எதுவும் அதிகாரப்பூர்வமாக ஆதரிக்கப்படவில்லை மேலும் அவை எப்போதும் புதுப்பித்த நிலையில் இருக்காது.

• பூட்ஸ்ட்ராப் 中文文档 (சீன)
• பூட்ஸ்ட்ராப் டான்ஸ்க் (டேனிஷ்)
• பூட்ஸ்ட்ராப் என் ஃபிரான்சாய்ஸ் (பிரெஞ்சு)
• பூட்ஸ்ட்ராப் auf Deutsch (ஜெர்மன்)
• இத்தாலியனோவில் பூட்ஸ்ட்ராப் (இத்தாலியன்)
• பூட்ஸ்ட்ராப் 한국어 (கொரியன்)
• பூட்ஸ்ட்ராப் எம் போர்த்துகீசியஸ் டூ பிரேசில் (பிரேசிலிய போர்த்துகீசியம்)
• பூட்ஸ்ட்ராப் по-русски (ரஷியன்)
• பூட்ஸ்ட்ராப் என் எஸ்பானோல் (ஸ்பானிஷ்)
• Türkçe Bootstrap (துருக்கி)
• பூட்ஸ்ட்ராப் українською (உக்ரைனியன்)
• பூட்ஸ்ட்ராப் bằng tiếng Việt (வியட்நாம்)

மொழிபெயர்ப்புகளை ஒழுங்கமைக்க அல்லது ஹோஸ்ட் செய்ய நாங்கள் உதவ மாட்டோம், அவற்றுடன் இணைக்கிறோம்.

புதிய அல்லது சிறந்த மொழிபெயர்ப்பை முடித்தீர்களா? அதை எங்கள் பட்டியலில் சேர்க்க இழுக்கும் கோரிக்கையைத் திறக்கவும்.