Tsallake zuwa babban abun ciki
Check
Sabo a cikin v5.2 Canje-canje na CSS, faifan canvas mai amsawa, sabbin kayan aiki, da ƙari! Bootstrap

Gina cikin sauri, rukunin yanar gizo masu amsawa tare da Bootstrap

Kayan aiki mai ƙarfi, mai iya faɗaɗawa, da fasalin kayan aiki na gaba. Gina da keɓancewa tare da Sass, yi amfani da tsarin grid da aka riga aka gina da abubuwan haɗin gwiwa, da kawo ayyuka zuwa rayuwa tare da filayen JavaScript masu ƙarfi.

npm i [email protected]
Karanta takardun

A halin yanzu v5.2.1 · Zazzagewa · v4.6.x docs · Duk fitowar

Fara duk hanyar da kuke so

Tsallaka kai tsaye zuwa ginin tare da Bootstrap — yi amfani da CDN, shigar da shi ta mai sarrafa fakiti, ko zazzage lambar tushe.

Karanta takardun shigarwa

Shigar ta mai sarrafa fakiti

Sanya tushen Bootstrap Sass da fayilolin JavaScript ta npm, RubyGems, Mawaƙi, ko Meteor. Shirye-shiryen da aka sarrafa ba su haɗa da takardu ko cikakkun rubutun mu na ginawa ba. Hakanan zaka iya amfani da samfurin npm repo don samar da aikin Bootstrap da sauri ta hanyar npm.

npm install [email protected]
gem install bootstrap -v 5.2.1

Karanta takaddun shigarwar mu don ƙarin bayani da ƙarin manajan fakiti.

Haɗa ta hanyar CDN

Lokacin da kawai kuna buƙatar haɗa da Bootstrap's harhada CSS ko JS, zaku iya amfani da jsDelivr . Duba shi a aikace tare da saurin mu mai sauƙi , ko bincika misalan don fara aikinku na gaba. Hakanan zaka iya zaɓar haɗa Popper da JS ɗin mu daban .

<!-- 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>

Karanta jagororin farawa

Samun tsalle kan haɗa fayilolin tushen Bootstrap a cikin sabon aikin tare da jagororin mu na hukuma.

Akwatin gidan yanar gizo Fakiti Vite

Keɓance komai tare da Sass

Bootstrap yana amfani da Sass don tsarin gine-gine na zamani da na musamman. Shigo da abubuwan da kuke buƙata kawai, ba da damar zaɓuɓɓukan duniya kamar gradients da inuwa, kuma rubuta CSS ɗin ku tare da masu canjin mu, taswirori, ayyuka, da mahaɗa.

Koyi game da keɓancewa

Haɗa duk Bootstrap's Sass

Shigo da salo guda ɗaya kuma kun tafi ga tsere tare da kowane fasalin CSS ɗin mu.

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

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

Ƙara koyo game da zaɓin Sass na duniya .

Haɗa abin da kuke buƙata

Hanya mafi sauƙi don keɓance Bootstrap — ta haɗa da CSS kawai da kuke buƙata.

// 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";

Ƙara koyo game da amfani da Bootstrap tare da Sass .

Gina kuma ƙarawa a cikin ainihin lokaci tare da masu canjin CSS

Bootstrap 5 yana tasowa tare da kowane saki don mafi kyawun amfani da masu canji na CSS don salon jigo na duniya, abubuwan haɗin kai, har ma da kayan aiki. Muna ba da dama ga masu canji don launuka, salon rubutu, da ƙari a :rootmatakin don amfani a ko'ina. A kan abubuwan da aka gyara da abubuwan amfani, masu canjin CSS an keɓance su zuwa aji mai dacewa kuma ana iya canzawa cikin sauƙi.

Ƙara koyo game da masu canjin CSS

Yin amfani da masu canji na CSS

Yi amfani da kowane nau'in canjin mu na duniya:root don rubuta sabbin salo. Masu canji na CSS suna amfani da var(--bs-variableName)sintax kuma abubuwan yara za su iya gadonsu.

.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);
}

Keɓancewa ta hanyar masu canjin CSS

Haɓaka sauye-sauye na duniya, sassa, ko masu amfani don keɓance Bootstrap kamar yadda kuke so. Babu buƙatar sake bayyana kowace doka, kawai sabon ƙima mai canzawa.

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;
}

Abubuwan da aka haɗa, sun haɗu da API Utility

Sabo a cikin Bootstrap 5, yanzu API ɗin Utility ɗinmu ne ke samar da kayan aikin mu . Mun gina shi azaman taswirar Sass mai cike da fasali wanda za'a iya daidaita shi cikin sauri da sauƙi. Ba a taɓa samun sauƙi don ƙara, cirewa, ko gyara kowane azuzuwan masu amfani ba. Sanya abubuwan amfani su zama masu amsawa, ƙara bambance-bambancen aji, kuma ba su sunaye na al'ada.

Ƙara koyo game da kayan aiki Bincika abubuwan da aka keɓance

Saurin keɓance abubuwan haɗin gwiwa
// 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,
    )
  )
);

Abubuwan plugins masu ƙarfi na JavaScript ba tare da jQuery ba

Sauƙaƙe ƙara ɓoyayyun abubuwan da za a iya jujjuya su, modal da menus na kashe canvas, popovers da tukwici na kayan aiki, da ƙari sosai—duk ba tare da jQuery ba. JavaScript a cikin Bootstrap shine HTML-farko, wanda ke nufin ƙara plugins yana da sauƙi kamar ƙara datahalaye. Kuna buƙatar ƙarin sarrafawa? Haɗa plugins guda ɗaya ta hanyar shirye-shirye.

Ƙara koyo game da Bootstrap JavaScript

API ɗin bayanai

Me yasa ake rubuta ƙarin JavaScript lokacin da zaku iya rubuta HTML? Kusan duk Bootstrap's JavaScript plugins sun ƙunshi API ɗin bayanan aji na farko, yana ba ku damar amfani da JavaScript kawai ta ƙara datahalaye.

<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>

Ƙara koyo game da JavaScript ɗin mu azaman kayayyaki da amfani da API ɗin shirin .

Cikakken saitin plugins

Bootstrap yana fasalta dozin plugins waɗanda zaku iya sauke cikin kowane aiki. Saka su gaba ɗaya, ko zaɓi waɗanda kuke buƙata kawai.

Fadakarwa

Nuna da ɓoye saƙonnin faɗakarwa ga masu amfani da ku.

Maɓalli

Gudanar da tsarin aiki don maɓalli.

Carousel

Ƙara nunin faifai zuwa kowane shafi, gami da goyan bayan fade-fade.

Rushewa

Fadada da ruguje wuraren abun ciki, ko ƙirƙiri accordions.

Zazzagewa

Ƙirƙiri menus na hanyoyin haɗin gwiwa, ayyuka, tsari, da ƙari.

Modal

Ƙara sassauƙan maganganu masu sassaucin ra'ayi zuwa aikinku.

Offcanvas

Gina kuma kunna ɓoyayyun labarun gefe zuwa kowane shafi.

Popover

Ƙirƙiri mai rufi na al'ada. Gina kan Popper.

Scrollspy

Sabunta hanyoyin haɗin kewayawa masu aiki ta atomatik bisa gungurawa shafi.

Tab

Bada damar abubuwan haɗin kewayawa na Bootstrap don kunna abun ciki.

Toast

Nuna ku ɓoye sanarwarku ga baƙi.

Tushen kayan aiki

Maye gurbin kayan aikin bincike tare da na al'ada. Gina kan Popper.

Keɓance shi tare da Gumakan Bootstrap

Bootstrap Icons babban ɗakin karatu ne na alamar SVG mai buɗewa wanda ke nuna sama da 1,500 glyphs, tare da ƙarin ƙarin kowane sakin. An tsara su don yin aiki a kowane aiki, ko kuna amfani da Bootstrap kanta ko a'a. Yi amfani da su azaman SVGs ko alamomin alamomi-dukkanin zaɓuɓɓukan suna ba ku sikelin vector da sauƙin keɓancewa ta hanyar CSS.

Samu gumakan Bootstrap

Gumakan Bootstrap

Sanya shi naku tare da Jigogin Bootstrap na hukuma

Ɗauki Bootstrap zuwa mataki na gaba tare da jigogi masu ƙima daga kasuwar Jigogin Bootstrap na hukuma . An gina jigogi akan Bootstrap azaman tsararren tsarin nasu, masu wadatar sabbin abubuwan gyara da plugins, takardu, da kayan aikin gini masu ƙarfi.

Nemo Jigogi Bootstrap

Jigogi Bootstrap