Source

அறிமுகம்

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

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

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

CSS

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

ஜே.எஸ்

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

நாங்கள் jQuery இன் மெலிதான கட்டமைப்பைப் பயன்படுத்துகிறோம் , ஆனால் முழு பதிப்பும் ஆதரிக்கப்படுகிறது.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

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

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

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

உங்கள் பக்கங்கள் சமீபத்திய வடிவமைப்பு மற்றும் மேம்பாட்டுத் தரங்களுடன் அமைக்கப்பட்டுள்ளதை உறுதிப்படுத்திக் கொள்ளுங்கள். அதாவது 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-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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 உறுப்புகளுக்கு சற்று அதிக கருத்துள்ள மீட்டமைப்புகளை வழங்கும் அதே வேளையில் உலாவிகள் மற்றும் சாதனங்களில் உள்ள முரண்பாடுகளை சரிசெய்ய மறுதொடக்கத்தைப் பயன்படுத்துகிறோம் .

சமூக

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

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

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