CSS மாறிகள், பதிலளிக்கக்கூடிய ஆஃப்கான்வாஸ், புதிய பயன்பாடுகள் மற்றும் பல!

பூட்ஸ்டார்ப் மூலம் வேகமான, பதிலளிக்கக்கூடிய தளங்களை உருவாக்கவும்

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

npm i [email protected]

ஆவணங்களைப் படியுங்கள்

தற்போது v5.2.1 · பதிவிறக்கம் · v4.6.x ஆவணங்கள் · அனைத்து வெளியீடுகளும்

நீங்கள் விரும்பும் வழியில் தொடங்கவும்

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

நிறுவல் ஆவணங்களைப் படிக்கவும்

தொகுப்பு மேலாளர் வழியாக நிறுவவும்

npm, RubyGems, Composer அல்லது Meteor வழியாக Bootstrap இன் மூல Sass மற்றும் JavaScript கோப்புகளை நிறுவவும். தொகுப்பு நிர்வகிக்கப்படும் நிறுவல்களில் ஆவணங்கள் அல்லது எங்கள் முழு உருவாக்க ஸ்கிரிப்ட்கள் இல்லை. npm வழியாக பூட்ஸ்டார்ப் திட்டத்தை விரைவாக உருவாக்க எங்கள் npm டெம்ப்ளேட் ரெப்போவையும் நீங்கள் பயன்படுத்தலாம்.

npm install [email protected]

gem install bootstrap -v 5.2.1

கூடுதல் தகவல் மற்றும் கூடுதல் தொகுப்பு மேலாளர்களுக்கு எங்கள் நிறுவல் ஆவணத்தைப் படிக்கவும் .

CDN வழியாகச் சேர்க்கவும்

நீங்கள் பூட்ஸ்டார்ப்பின் தொகுக்கப்பட்ட CSS அல்லது JS ஐ மட்டும் சேர்க்க வேண்டும் என்றால், நீங்கள் jsDelivr ஐப் பயன்படுத்தலாம் . எங்களின் எளிய விரைவு தொடக்கத்தில் அதை செயலில் பார்க்கவும் அல்லது உங்கள் அடுத்த திட்டத்தை ஜம்ப்ஸ்டார்ட் செய்ய உதாரணங்களை உலாவவும் . நீங்கள் தனித்தனியாக Popper மற்றும் எங்கள் JS ஐ சேர்க்க தேர்வு செய்யலாம் .

<!-- CSS only -->
<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">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

எங்கள் தொடக்க வழிகாட்டிகளைப் படிக்கவும்

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

வெப்பேக்

பார்சல்

வைட்

சாஸ் மூலம் அனைத்தையும் தனிப்பயனாக்குங்கள்

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

தனிப்பயனாக்குவது பற்றி மேலும் அறிக

பூட்ஸ்டார்ப்பின் அனைத்து சாஸ்களையும் சேர்க்கவும்

ஒரு ஸ்டைல்ஷீட்டை இறக்குமதி செய்து, எங்கள் CSSன் ஒவ்வொரு அம்சத்திலும் பந்தயங்களில் கலந்துகொள்ளலாம்.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

எங்களின் உலகளாவிய Sass விருப்பங்களைப் பற்றி மேலும் அறிக .

உங்களுக்குத் தேவையானதைச் சேர்க்கவும்

பூட்ஸ்டார்ப்பைத் தனிப்பயனாக்க எளிதான வழி—உங்களுக்குத் தேவையான CSSஐ மட்டும் சேர்க்கவும்.

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

Sass உடன் Bootstrap ஐப் பயன்படுத்துவது பற்றி மேலும் அறிக .

CSS மாறிகள் மூலம் நிகழ்நேரத்தில் உருவாக்கி நீட்டிக்கவும்

பூட்ஸ்டார்ப் 5 ஆனது உலகளாவிய தீம் பாணிகள், தனிப்பட்ட கூறுகள் மற்றும் பயன்பாடுகளுக்கு கூட CSS மாறிகளை சிறப்பாகப் பயன்படுத்த ஒவ்வொரு வெளியீட்டிலும் உருவாகிறது. வண்ணங்கள், எழுத்துரு பாணிகள் மற்றும் பலவற்றிற்கான டஜன் கணக்கான மாறிகளை நாங்கள் :rootஎங்கும் பயன்படுத்த ஒரு மட்டத்தில் வழங்குகிறோம். கூறுகள் மற்றும் பயன்பாடுகளில், CSS மாறிகள் தொடர்புடைய வகுப்பிற்கு ஸ்கோப் செய்யப்பட்டு எளிதாக மாற்றியமைக்கப்படும்.

CSS மாறிகள் பற்றி மேலும் அறிக

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

புதிய பாணிகளை எழுத எங்களின் உலகளாவிய :rootமாறிகள் எதையும் பயன்படுத்தவும். CSS மாறிகள் var(--bs-variableName)தொடரியலைப் பயன்படுத்துகின்றன, மேலும் அவை குழந்தைகள் கூறுகளால் பெறப்படலாம்.

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

CSS மாறிகள் மூலம் தனிப்பயனாக்குதல்

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

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

கூறுகள், பயன்பாட்டு API ஐ சந்திக்கவும்

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

பயன்பாடுகள் பற்றி மேலும் அறிக தனிப்பயனாக்கப்பட்ட கூறுகளை ஆராயுங்கள்

கூறுகளை விரைவாகத் தனிப்பயனாக்கவும்

// Create and extend utilities with the Utility API

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

jQuery இல்லாமல் சக்திவாய்ந்த ஜாவாஸ்கிரிப்ட் செருகுநிரல்கள்

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

பூட்ஸ்டார்ப் ஜாவாஸ்கிரிப்ட் பற்றி மேலும் அறிக

தரவு பண்புக்கூறு API

நீங்கள் HTML எழுத முடியும் போது ஏன் மேலும் JavaScript எழுத? dataஏறக்குறைய அனைத்து பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்ட் செருகுநிரல்களும் முதல்-வகுப்பு தரவு API ஐக் கொண்டுள்ளது, இது பண்புகளைச் சேர்ப்பதன் மூலம் ஜாவாஸ்கிரிப்டைப் பயன்படுத்த உங்களை அனுமதிக்கிறது .

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
  </ul>
</div>

எங்கள் ஜாவாஸ்கிரிப்ட் தொகுதிகள் மற்றும் நிரல் API ஐப் பயன்படுத்துவது பற்றி மேலும் அறிக .

செருகுநிரல்களின் விரிவான தொகுப்பு

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

பூட்ஸ்டார்ப் ஐகான்களுடன் அதைத் தனிப்பயனாக்குங்கள்

பூட்ஸ்டார்ப் ஐகான்கள் என்பது ஒரு திறந்த மூல SVG ஐகான் நூலகமாகும், இது 1,500 க்ளிஃப்களைக் கொண்டுள்ளது, மேலும் ஒவ்வொரு வெளியீட்டையும் சேர்க்கிறது. நீங்கள் பூட்ஸ்டார்ப்பைப் பயன்படுத்தினாலும் இல்லாவிட்டாலும், எந்தவொரு திட்டத்திலும் வேலை செய்யும் வகையில் அவை வடிவமைக்கப்பட்டுள்ளன. அவற்றை SVGகள் அல்லது ஐகான் எழுத்துருக்களாகப் பயன்படுத்தவும்—இரண்டு விருப்பங்களும் உங்களுக்கு வெக்டார் அளவிடுதல் மற்றும் CSS வழியாக எளிதான தனிப்பயனாக்கலை வழங்கும்.

பூட்ஸ்டார்ப் ஐகான்களைப் பெறுங்கள்

அதிகாரப்பூர்வ பூட்ஸ்டார்ப் தீம்கள் மூலம் அதை உங்களுடையதாக ஆக்குங்கள்

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

பூட்ஸ்டார்ப் தீம்களை உலாவுக

பூட்ஸ்டார்ப் மூலம் வேகமான, பதிலளிக்கக்கூடிய தளங்களை உருவாக்கவும்

நீங்கள் விரும்பும் வழியில் தொடங்கவும்

தொகுப்பு மேலாளர் வழியாக நிறுவவும்

CDN வழியாகச் சேர்க்கவும்

எங்கள் தொடக்க வழிகாட்டிகளைப் படிக்கவும்

சாஸ் மூலம் அனைத்தையும் தனிப்பயனாக்குங்கள்

பூட்ஸ்டார்ப்பின் அனைத்து சாஸ்களையும் சேர்க்கவும்

உங்களுக்குத் தேவையானதைச் சேர்க்கவும்

CSS மாறிகள் மூலம் நிகழ்நேரத்தில் உருவாக்கி நீட்டிக்கவும்

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

CSS மாறிகள் மூலம் தனிப்பயனாக்குதல்

கூறுகள், பயன்பாட்டு API ஐ சந்திக்கவும்

கூறுகளை விரைவாகத் தனிப்பயனாக்கவும்

jQuery இல்லாமல் சக்திவாய்ந்த ஜாவாஸ்கிரிப்ட் செருகுநிரல்கள்

தரவு பண்புக்கூறு API

செருகுநிரல்களின் விரிவான தொகுப்பு

எச்சரிக்கை

பொத்தானை

கொணர்வி

சுருக்கு

கீழே போடு

மாதிரி

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

பாப்ஓவர்

ஸ்க்ரோல்ஸ்பி

தாவல்

சிற்றுண்டி

உதவிக்குறிப்பு

பூட்ஸ்டார்ப் ஐகான்களுடன் அதைத் தனிப்பயனாக்குங்கள்

அதிகாரப்பூர்வ பூட்ஸ்டார்ப் தீம்கள் மூலம் அதை உங்களுடையதாக ஆக்குங்கள்