பூட்ஸ்ட்ராப் மூலம் தொடங்கவும்

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

இந்தப் பக்கத்தில்

விரைவு தொடக்கம்

பூட்ஸ்டார்ப்பின் உற்பத்திக்கு தயாராக இருக்கும் CSS மற்றும் JavaScript ஐ CDN வழியாக எந்த உருவாக்க படிகளும் தேவையில்லாமல் சேர்ப்பதன் மூலம் தொடங்கவும். இந்த பூட்ஸ்டார்ப் CodePen டெமோவுடன் நடைமுறையில் இதைப் பார்க்கவும் .

உங்கள் திட்ட மூலத்தில் புதிய index.htmlகோப்பை உருவாக்கவும். மொபைல் சாதனங்களில் சரியான பதிலளிக்கக்கூடிய நடத்தைக்கு<meta name="viewport"> குறிச்சொல்லையும் சேர்க்கவும் .
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```
பூட்ஸ்டார்ப்பின் CSS மற்றும் JS ஐச் சேர்க்கவும். மூடுவதற்கு முன், எங்கள் CSSக்கான <link>குறிச்சொல்லையும் , எங்கள் JavaScript மூட்டைக்கான குறிச்சொல்லையும் (டிப்டவுன்கள், பாப்பர்கள் மற்றும் டூல்டிப்களை நிலைநிறுத்துவதற்கான பாப்பர் உட்பட) வைக்கவும் . எங்கள் CDN இணைப்புகளைப் பற்றி மேலும் அறிக .<head><script></body>
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>
```
நீங்கள் பாப்பர் மற்றும் எங்கள் JS ஐயும் தனித்தனியாக சேர்க்கலாம். டிராப் டவுன்கள், பாப்ஓவர்கள் அல்லது டூல்டிப்களைப் பயன்படுத்த நீங்கள் திட்டமிடவில்லை என்றால், பாப்பரைச் சேர்க்காமல் சில கிலோபைட்களைச் சேமிக்கவும்.
```
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
```
வணக்கம், உலகம்! உங்கள் பூட்ஸ்ட்ராப் செய்யப்பட்ட பக்கத்தைப் பார்க்க உங்கள் விருப்பமான உலாவியில் பக்கத்தைத் திறக்கவும். இப்போது நீங்கள் உங்கள் சொந்த அமைப்பை உருவாக்கி, டஜன் கணக்கான கூறுகளைச் சேர்ப்பதன் மூலம் மற்றும் எங்கள் அதிகாரப்பூர்வ எடுத்துக்காட்டுகளைப் பயன்படுத்தி பூட்ஸ்டார்ப் மூலம் உருவாக்கத் தொடங்கலாம் .

CDN இணைப்புகள்

ஆதாரமாக, எங்கள் முதன்மை CDN இணைப்புகள் இங்கே உள்ளன.

விளக்கம்	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ஜே.எஸ்	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

உள்ளடக்கப் பக்கத்தில் பட்டியலிடப்பட்டுள்ள எங்களின் கூடுதல் உருவாக்கம் எதையும் பெறுவதற்கு CDNஐப் பயன்படுத்தலாம் .

அடுத்த படிகள்

பூட்ஸ்டார்ப் பயன்படுத்தும் சில முக்கியமான உலகளாவிய சூழல் அமைப்புகளைப் பற்றி இன்னும் கொஞ்சம் படிக்கவும் .
எங்கள் உள்ளடக்கங்கள் பிரிவில் பூட்ஸ்டார்ப்பில் என்ன சேர்க்கப்பட்டுள்ளது மற்றும் ஜாவாஸ்கிரிப்ட் தேவைப்படும் கூறுகளின் பட்டியலையும் படிக்கவும்.
இன்னும் கொஞ்சம் சக்தி வேண்டுமா? தொகுப்பு மேலாளர் மூலம் மூலக் கோப்புகளைச் சேர்ப்பதன் மூலம் பூட்ஸ்டார்ப் மூலம் உருவாக்குவதைக் கவனியுங்கள் .
பூட்ஸ்டார்ப்பை ஒரு தொகுதியாகப் பயன்படுத்த விரும்புகிறீர்களா <script type="module">? பூட்ஸ்டார்ப்பை ஒரு தொகுதிப் பிரிவாகப் பயன்படுத்துவதைப் பார்க்கவும் .

JS கூறுகள்

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

JavaScript தேவைப்படும் கூறுகளைக் காட்டு

நிராகரிப்பதற்கான விழிப்பூட்டல்கள்
நிலைகள் மற்றும் செக்பாக்ஸ்/ரேடியோ செயல்பாடுகளை மாற்றுவதற்கான பொத்தான்கள்
அனைத்து ஸ்லைடு நடத்தைகள், கட்டுப்பாடுகள் மற்றும் குறிகாட்டிகளுக்கான கொணர்வி
உள்ளடக்கத்தின் தெரிவுநிலையை மாற்றுவதற்கு சுருக்கவும்
காட்சிப்படுத்துதல் மற்றும் நிலைநிறுத்துவதற்கான கீழ்தோன்றல்கள் (மேலும் பாப்பர் தேவை )
காட்சிப்படுத்தல், நிலைப்படுத்துதல் மற்றும் ஸ்க்ரோல் நடத்தைக்கான மாதிரிகள்
பதிலளிக்கக்கூடிய நடத்தைகளைச் செயல்படுத்த, எங்கள் சுருக்கம் மற்றும் ஆஃப்கான்வாஸ் செருகுநிரல்களை நீட்டிப்பதற்கான Navbar
உள்ளடக்கப் பலகங்களை மாற்றுவதற்கு Tab செருகுநிரலுடன் Navs
காட்சிப்படுத்தல், நிலைப்படுத்துதல் மற்றும் ஸ்க்ரோல் நடத்தைக்கான ஆஃப்கேன்வாஸ்கள்
ஸ்க்ரோல் நடத்தை மற்றும் வழிசெலுத்தல் புதுப்பிப்புகளுக்கான ஸ்க்ரோல்ஸ்பை
காட்டுவதற்கும் நிராகரிப்பதற்கும் டோஸ்ட்கள்
காட்சிப்படுத்தல் மற்றும் நிலைப்படுத்துவதற்கான உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்கள் (மேலும் பாப்பர் தேவை )

முக்கியமான உலகளாவிய

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

HTML5 டாக்டைப்

பூட்ஸ்டார்ப்பிற்கு HTML5 டாக்டைப்பின் பயன்பாடு தேவைப்படுகிறது. இது இல்லாமல், நீங்கள் சில வேடிக்கையான மற்றும் முழுமையற்ற ஸ்டைலிங் பார்ப்பீர்கள்.

<!doctype html>
<html lang="en">
  ...
</html>

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

விரைவான தொடக்கத்தில் இதற்கான உதாரணத்தை நீங்கள் பார்க்கலாம் .

பெட்டி அளவு

CSS இல் மிகவும் நேரடியான அளவைப் பெற, உலகளாவிய box-sizingமதிப்பை லிருந்து content-boxக்கு மாற்றுவோம் border-box. paddingஇது ஒரு உறுப்பின் இறுதி கணக்கிடப்பட்ட அகலத்தை பாதிக்காது என்பதை உறுதி செய்கிறது, ஆனால் இது Google Maps மற்றும் Google Custom Search Engine போன்ற சில மூன்றாம் தரப்பு மென்பொருளில் சிக்கல்களை ஏற்படுத்தலாம்.

அரிதான சந்தர்ப்பத்தில் நீங்கள் அதை மீற வேண்டும், பின்வருவனவற்றைப் பயன்படுத்தவும்:

.selector-for-some-widget {
  box-sizing: content-box;
}

மேலே உள்ள துணுக்குடன், உள்ளமைக்கப்பட்ட கூறுகள்-உருவாக்கப்பட்ட உள்ளடக்கம் ::beforeமற்றும் - அதற்காக ::afterகுறிப்பிடப்பட்டவை அனைத்தும் பெறப்படும் .box-sizing.selector-for-some-widget

CSS தந்திரங்களில் பெட்டி மாதிரி மற்றும் அளவைப் பற்றி மேலும் அறிக .

மறுதொடக்கம்

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

சமூக

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

அதிகாரப்பூர்வ பூட்ஸ்டார்ப் வலைப்பதிவைப் படித்து குழுசேரவும் .
எங்கள் GitHub விவாதங்களைக் கேட்டு ஆராயுங்கள் .
IRC இல் சக பூட்ஸ்ட்ராப்பர்களுடன் அரட்டையடிக்கவும். irc.libera.chatசர்வரில், சேனலில் #bootstrap.
செயலாக்க உதவியை ஸ்டாக் ஓவர்ஃப்ளோவில் காணலாம் (குறியிடப்பட்டுள்ளது bootstrap-5).
npm அல்லது ஒத்த டெலிவரி மெக்கானிசங்கள் மூலம் அதிகபட்ச கண்டுபிடிப்பிற்காக விநியோகிக்கும் bootstrapபோது, பூட்ஸ்டார்ப்பின் செயல்பாட்டை மாற்றியமைக்கும் அல்லது சேர்க்கும் தொகுப்புகளில் முக்கிய சொல்லை டெவலப்பர்கள் பயன்படுத்த வேண்டும் .

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