in English

அறிமுகம்

jsDelivr மற்றும் ஒரு டெம்ப்ளேட் ஸ்டார்டர் பக்கத்துடன், பதிலளிக்கக்கூடிய, மொபைல் முதல் தளங்களை உருவாக்குவதற்கான உலகின் மிகவும் பிரபலமான கட்டமைப்பான பூட்ஸ்டார்ப் உடன் தொடங்கவும்.

விரைவு தொடக்கம்

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

CSS

எங்கள் CSSஐ ஏற்ற மற்ற அனைத்து ஸ்டைல்ஷீட்களுக்கும் முன்பாக ஸ்டைல்ஷீட்டை <link>நகலெடுத்து ஒட்டவும் .<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

ஜே.எஸ்

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

பின்வரும் வினாக்களில் ஒன்றை <script>உங்கள் பக்கங்களின் முடிவில் வைக்கவும், அவற்றை இயக்க, மூடும் குறிச்சொல்லுக்கு முன் வைக்கவும் </body>. jQuery முதலில் வர வேண்டும், பின்னர் பாப்பர், பின்னர் எங்கள் ஜாவாஸ்கிரிப்ட் செருகுநிரல்கள்.

மூட்டை

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

தனி

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

கூறுகள்

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

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

ஸ்டார்டர் டெம்ப்ளேட்

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

HTML5 டாக்டைப்

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

இதற்கான உதாரணத்தை ஸ்டார்டர் டெம்ப்ளேட்டில் பார்க்கலாம் .

பெட்டி அளவு

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

சமூக

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

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

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

CSPகள் மற்றும் உட்பொதிக்கப்பட்ட SVGகள்

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

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