Bootstrap (ramme)

Bootstrap
Generel information
Udvikler	Twitter
Første udgivelse	19. august 2011
Licens	MIT-licens ( Apache-licens 2.0 før 3.0.1)
Faktisk tilstand	Aktiv
Teknisk information
Planlagt ind	HTML , CSS , LESS (v3), Sass (v4) og JavaScript
Versioner
Seneste stabile version	5.0.2 ( info ) (22. juni 2021 (1 år, 3 måneder og 25 dage))
Seneste version i test	2021 ()
versionshistorik	stabil 5.2.019. juli 2022 5.1.39. oktober 2021 5.1.25. oktober 2021 5.1.17. september 2021 5.1.04. august 2021 5.0.222. juni 2021 5.0.113. maj 2021 5.0.05. maj 2021 4.6.019. januar 2021 4.5.313. oktober 2020 4.0.018. januar 2018 3.3.725. juli 2016 3.3.624. november 2015 3.3.515. juni 2015 3.3.416. marts 2015 3.3.219. januar 2015 3.3.112. november 2014 3.3.029. oktober 2014 3.2.026. juni 2014 3.1.113. februar 2014 3.1.030. januar 2014 3.0.35. december 2013 3.0.26. november 2013 3.0.130. oktober 2013 3.0.019. august 2013 2.3.227. juli 2013 2.3.11. marts 2013 2.3.018. juli 2013 2.2.218. juli 2013 2.2.118. juli 2013 2.2.018. juli 2013 2.1.118. juli 2013 2.1.018. juli 2013 2.0.41. juni 2012 2.0.325. april 2012 2.0.218. juli 2013 2.0.118. juli 2013 2.0.01. februar 2012 1.4.018. juli 2013 1.3.018. juli 2013 1.2.018. juli 2013 1.1.118. juli 2013 1.1.018. juli 2013 1.0.018. august 2011                Tests 5.0.0-beta210. februar 2021 5.0.0-beta17. december 2020
Links
Officiel hjemmeside kodelager

Bootstrap er et open source -bibliotek på tværs af platforme eller værktøjssæt til design af websteder og webapplikationer . Den indeholder designskabeloner med typografi, formularer, knapper, bokse, navigationsmenuer og andre designelementer baseret på HTML og CSS , samt yderligere JavaScript- udvidelser . I modsætning til mange web-frameworks beskæftiger den sig kun med frontend- udvikling .

Bootstrap er det næstmest fremtrædende projekt på GitHub og bruges blandt andet af NASA og MSNBC . ]

Oprindelse

Bootstrap, oprindeligt kaldet Twitter Blueprint , blev udviklet af Mark Otto og Jacob Thornton fra Twitter, som en ramme til at fremme sammenhæng mellem interne værktøjer. Før Bootstrap blev flere biblioteker brugt til UI-udvikling, hvilket førte til uoverensstemmelser og stor vedligeholdelsesbelastning. Ifølge Twitter-udvikler Mark Otto, står over for disse udfordringer:

"...en super lille gruppe af udviklere og jeg gik sammen om at designe og bygge et nyt internt værktøj og så en mulighed for at gøre noget andet. Gennem den proces så vi os selv bygge noget meget mere substantielt end et andet internt værktøj. Måneder derefter vi endte med en tidlig version af Bootstrap som en måde at dokumentere og dele fælles designmønstre og aktiver inden for virksomheden."

Mark Otto ]

Den første udvikling under virkelige forhold skete under Twitters første " Hackweek ". ​ Mark Otto viste nogle kolleger, hvordan de kunne fremskynde udviklingen af ​​deres projekter ved hjælp af arbejdsværktøjet. Som et resultat er dusinvis af temaer blevet introduceret til rammen.

I august 2011 udgav Twitter Bootstrap som open source. I februar 2012 blev det det mest populære udviklingsprojekt på GitHub.

Versioner

Versioner
Version 1	v1.4.0, v1.3.0, v1.2.0, v1.1.1, v1.1.0, v1.0.0
version 2	v2.3.2 , v2.3.1, v2.3.0, v2.2.2, v2.2.1, v2.2.0, v2.1.1, v2.1.0, v2.0.4, v2.0.3, v2.0.2, v2.0.1, v2. 0,0
version 3	v3.3.7 , v3.3.6, v3.3.5, v3.3.4, v3.3.2, v3.3.1, v3.3.0, v3.2.0, v3.1.1, v3.1.0, v3.0.3, v3.0.2, v3. 0.1, v3.0.0
version 4	v4.6.0 , v4.5.3, v4.5.2, v4.5.1, v4.5.0, v4.4.1, v4.4.0, v4.3.1, v4.3.0, v4.2.1, v4.2.0, v4.1.3, v4. 1.2, v4.1.1, v4.1.0, v4.0.0
version 5	v5.0.1, v5.0.0 -beta2 , v5.0.0-beta1, v5.0.0-alpha3, v5.0.0-alpha2, v5.0.0-alpha1

Funktioner

Bootstrap har relativt ufuldstændig understøttelse af HTML5 og CSS3 , men er kompatibel med de fleste webbrowsere. Grundlæggende websteds- eller appkompatibilitetsoplysninger er tilgængelige for alle enheder og browsere. Der er et koncept med delvis kompatibilitet, der gør den grundlæggende information om en hjemmeside tilgængelig for alle enheder og browsere. For eksempel bruges egenskaber introduceret i CSS3 til runde hjørner, gradienter og skygger af Bootstrap på trods af manglende understøttelse i ældre browsere. Dette udvider værktøjets funktionalitet, men er ikke påkrævet for dets brug.

Siden version 2.0 understøtter den også responsive webdesigns . Det betyder, at sidens grafiske design justeres dynamisk under hensyntagen til egenskaberne ved den anvendte enhed (computere, tablets eller mobiltelefoner).

Funktion og struktur

Eksempel på en webside, der bruger Bootstrap Framework gengivet i Mozilla Firefox

Bootstrap er modulopbygget og består i det væsentlige af en række MINDRE stilark , der implementerer de mange forskellige komponenter i værktøjet. Et typografiark kaldet bootstrap.less indeholder typografiarkkomponenterne. Udviklere kan tilpasse selve Bootstrap-filen ved at vælge de komponenter, de vil bruge i deres projekt.

Indstillinger er mulige i begrænset omfang via et centralt konfigurationsstilark. Dybere ændringer er muliggjort af MINDRE udsagn.

Brugen af ​​stilarksproget LESS tillader brugen af ​​variabler, funktioner og operatorer, indlejrede vælgere samt mixin-klasser.

Siden version 2.0 har Bootstrap-indstillinger også en særlig "Tilpas"-mulighed i dokumentationen. På den anden side vælger udviklere i en form de ønskede komponenter og indstillinger, og om nødvendigt værdierne for forskellige muligheder, der passer til deres behov. Den følgelig genererede pakke inkluderer allerede det tidligere kompilerede CSS-typografiark.

Gittersystem og responsivt design

Bootstrap kommer med et standard 940 pixel bredt gitterlayout. Alternativt kan udvikleren bruge et layout med variabel bredde. For begge tilfælde har værktøjet fire variationer til at gøre brug af forskellige opløsninger og enhedstyper: mobiltelefoner, stående og liggende format, tablets og computere med lav og høj opløsning (bredskærm). Dette justerer automatisk kolonnernes bredde.

Forståelse af CSS-stilarket

Bootstrap leverer et sæt typografiark, der giver grundlæggende stildefinitioner for alle HTML-elementer. Dette giver en ensartethed til browseren og breddesystemet, giver et moderne udtryk til formateringen af ​​tekstelementer, tabeller og formularer.

Genanvendelige komponenter

Ud over almindelige HTML-elementer indeholder Bootstrap andre almindeligt anvendte grænsefladeelementer. Dette inkluderer knapper med avancerede funktioner (f.eks. knapgruppe eller knapper med dropdown-mulighed, navigationslister, vandrette og lodrette etiketter, navigationssti, paginering osv.), etiketter, avancerede typografiske thumbnail-funktioner, formatering af advarselsmeddelelser og statusbjælker.

JavaScript-plugins

JavaScript-komponenterne til Bootstrap er baseret på jQuery JavaScript-biblioteket. Plugins findes i jQuery plugin - værktøjet . De giver yderligere brugergrænsefladeelementer såsom dialogbokse, værktøjstip og karruseller. De udvider også funktionaliteten af ​​nogle eksisterende grænsefladeelementer, herunder for eksempel en autofuldførelsesfunktion til inputfelter. Version 2.0 understøtter følgende JavaScript -plugins : Modal, Dropdown, Scrollspy, Tab, Værktøjstip, Popover, Alert, Button, Collapse, Carousel og Typeahead.

En Bootstrap-implementering ved hjælp af Dojo-værktøjssættet er også tilgængelig. Det hedder Dojo Bootstrap ​ og er en port til Twitter Bootstrap plug-ins. Den bruger 100 % Dojo-kode og har AMD-understøttelse ( Asynchronous Module Definition ).

Historie

Tidlig begyndelse

Efter et par måneders udvikling af en lille gruppe begyndte mange Twitter-udviklere at bidrage til projektet som en del af en haackweek , en uge i hackathon-stil for Twitter-udviklingsteamet. Det blev omdøbt fra Twitter Blueprint til Bootstrap og udgivet som et open source-projekt den 19. august 2011. Mark Otto, Jacob Thornton og en lille gruppe af kerneudviklere, såvel som et stort fællesskab af bidragydere.

Bootstrap 2 og 3

Den 31. januar 2012 blev Bootstrap 2 udgivet, der tilføjede indbygget understøttelse af glyphicons , flere nye komponenter samt ændringer til mange af de eksisterende komponenter. Denne version understøtter responsivt webdesign, hvilket betyder, at layoutet af websider justeres dynamisk under hensyntagen til egenskaberne ved den anvendte enhed (det være sig desktop, tablet eller mobiltelefon). Den næste store version, Bootstrap 3, blev udgivet den 19. august 2013. Den redesignede komponenterne til at bruge et fladt design og mobile-first-tilgang. ]

Bootstrap 4

Mark Otto annoncerede Bootstrap 4 den 29. oktober 2014. Den første alfaversion af Bootstrap 4 blev udgivet den 19. august 2015. Den første betaversion blev udgivet den 10. august 2017. Mark suspenderede arbejdet med Bootstrap 3 den 6. september 2016 for at frigøre tid til at arbejde på Bootstrap 4. Bootstrap 4 blev opsagt den 18. januar 2018. ]

Vigtige ændringer omfatter:

• Større kode omskrivning
• Udskiftning af mindre med Sass
• Tilføjelse af Genstart, en samling af elementspecifikke CSS-ændringer i en enkelt fil, baseret på Normalize
• Drop support til IE8, IE9 og iOS 6
• CSS Fleksibel Box Support
• Tilføj navigationstilpasningsmuligheder
• Tilføjelse af fornuftig størrelse og mellemrum
• Skift fra pixel enhed i CSS til root ems
• Øget global skriftstørrelse fra 14px til 16px for at forbedre læsbarheden
• Drop panelet, thumbnail, locator og brøndkomponenter
• Drop Icon Font Glyphicons
• Stort antal [kvantificer] brugsklasser
• Forbedret formstil, knapper, rullemenuer, medieobjekter og billedklasser

Bootstrap 4 er kompatibel med de nyeste versioner af Google Chrome , Firefox , Internet Explorer , Opera og Safari (undtagen Windows). Derudover understøtter den IE10 og den seneste Extended Support Release (ESR) af Firefox . ]

Bootstrap 5 Alpha

Bootstrap 5 Alpha blev officielt udgivet den 16. juni 2020. ]

Vigtige ændringer omfatter ​:

• Drop jQuery til fordel for vanilla JavaScript
• Omskriv gitteret for at understøtte kolonner uden for rækker og følsomme tagrender
• Migrer dokumentation fra Jekyll til Hugo
• Drop support til IE10 og IE11
• Flytning af testinfrastruktur fra QUnit til Jasmine
• Tilføj et brugerdefineret sæt SVG-ikoner
• Tilføj tilpassede CSS-egenskaber
• Forbedret API
• Forbedret netsystem
• Forbedrede tilpasningsdokumenter
• opdaterede formularer

3 versioner af Bootstrap Alpha blev udgivet i alt ]

Bootstrap 5 Beta

Bootstrap 5 Beta blev officielt udgivet den 7. februar 2021, tre uger efter udgivelsen af ​​den tredje alfa.

Version 5 Beta 2 er i øjeblikket den seneste version af pakken.

Vigtige ændringer omfatter ​:

• RTL-understøttelse - "højre mod venstre" tekstvisning til f.eks. Eks. arabiske sprog
• Omdøbte klasser for logiske egenskaber
• Opdatering til Popper.js v2
• Navnebaserede dataattributter
• JavaScript-forbedringer og fejlrettelser.
• Forbedret API: tilstande i hjælpeprogrammer

Ændringer, der evalueres :

• Sass modulsystem
• Øget brug af tilpassede CSS-egenskaber
• Integrer SVG i HTML i stedet for CSS

Tilfælde af tidlig brug

af Bootstrap 5 Beta-versionen dukkede op få dage efter den officielle udgivelse, de vigtigste inkluderer:

• MDB 5 - Material Design UI Kit til Bootstrap 5. ]

MDB var også den første til at integrere den nyeste version af Bootstrap med populære front-end-teknologier som Angular , React og Vue . ]

Bootstrap 5

Bootstrap version 5 blev annonceret af Mark Otto den 21. december 2018 og efter 3 alfa- og 3 betaversioner blev den officielt udgivet den 5. maj 2021. Dage senere, den 13. maj, blev den første patch udgivet, v5.0.1, , som ville være den sidste stabile version.

De nye ændringer og tilføjelser var som følger:

• Ny "offcanvas" komponentmenu.
• Flytning fra jQuery til Vanilla JavaScript .
• Migrering af dokumentation fra Jekyll til Hugo .

• Support trækkes tilbage til Internet Explorer 10 og 11 , Microsoft Edge Legacy og nedenstående versioner: Firefox 60, Safari 10 og Chrome 60.

• Infrastrukturtest flyttes fra QUnit til Jasmine.
• Inkludering af et nyt sæt SVG-ikoner og nye CSS-egenskaber.
• Forbedret API .
• Forbedret netsystem.
• Oprettelse af formularsektionen, med nye formularer inkluderet.
• RTL (højre-til-venstre) understøttelse af højre-til-venstre skrivesystemer.
• Implementering af Dart Sass.

Brug

For at bruge Bootstrap på en HTML -side skal udvikleren blot downloade Bootstrap CSS -stilarket og linke til det i HTML -filen . En anden mulighed ville være at kompilere CSS -filen fra det downloadede LESS- eller SASS -typografiark . Dette kan gøres med en speciel compiler.

Hvis udvikleren også ønsker at bruge JavaScript-komponenterne, skal de refereres sammen med jQuery- biblioteket i HTML-dokumentet.

Følgende eksempel illustrerer, hvordan det fungerer. HTML-koden definerer en simpel søgeformular og en liste over resultater i en tabelform. Siden består af almindelige og semantiske HTML 5-elementer og nogle ekstra CSS-klasseoplysninger i henhold til Bootstrap-dokumentationen. Figuren viser repræsentationen af ​​dokumentet i Mozilla Firefox 10 .

<!DOCTYPE html> 
< html > 
  < head > 
    < title > Bootstrap Eksempel </ title >

    <!-- Bootstrap CSS --> 
   < link  rel = "stylesheet"  href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAww4g32OMUcSTVs32RYd /K68vbdEjh4u"  crossorigin = "anonym" >

   < meta  http-equiv = "Content-Type"  content = "text/html; charset=utf-8" >

  </ hovedet >
 
  < body > 
    < div  class = "container" > 
      < h1 > Søg </ h1 > 
      < label > Eksempel på en simpel søgeformular </ label >

      <!-- Søgeformular med et inputfelt og en knap --> 
      < form  class = "well form-search" > 
        < input  type = "text"  class = "input-medium search-query" > 
        < button  type = " submit"  class = "btn btn-primary" > Søg </ button > 
      </ form >
 
      < h2 > Resultater </ h2 >
 
      <!-- Tabel med skiftende baggrundsfarveceller og ramme --> 
      < table  class = "table table-striped table-bordered" > 
        < thead > 
          < tr > 
            < th > # </ th > 
            < th > Title </ th > 
          </ tr > 
        </ thead > 
        < tbody > 
          < tr > 
            < td > 1 </ td > 
            < td > Lorem ipsum smerte sit amet. </ td > 
          </ tr > 
          < tr > 
            < td > 2 </ td > 
            < td > Consetetur sadipscing elitr. </ td > 
          </ tr > 
          < tr > 
            < td > 3 </ td > 
            < td > At vero eos et accusam. </ td > 
          </ tr > 
        </ tbody > 
      </ table > 
    </ div >

    <!-- jQuery --> 
    < script  src = "https://code.jquery.com/jquery-2.2.4.min.js" ></ script >

    <!-- Bootstrap JS --> 
    < script  src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVx7pcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVx7plxUPnonymCJAGginan"  7cPDNiCdGinGincdNiCdGincdNiCdGginan " ></ script > </ body > </ html >
  

Oprettelse af et fast layoutgitter

    < div  class = "row" > 
      < div  class = "col-md-4" > ... </ div > 
      < div  class = "col-md-8" > ... </ div > 
    </ div >

Oprettelse af et fast layoutgitter med et indlejret flydende layoutgitter

    < div  class = "row" > 
      < div  class = "col-md-12" > 
        < div  class = "4" > ... </ div > 
        < div  class = "4" > ... </ div > 
        < div  class = "4" > ... </ div > 
      </ div > 
      < div  class = "col-md-8" > ... </ div > 
    </ div >

Bibliografi

• Angel Escobar, Alvarez Carmona og Alvarez Ocampo, David, Juan Esteban og Daniel (14. august 2019). Twitter Bootstrap Webudvikling (1. udgave). Packt Publishing . s. 100. ISBN  978-1849518826 . Arkiveret fra originalen den 25. oktober 2013 . Hentet 17. februar 2013 . 

Eksterne links

• bootstrap eksempel med php
• Bootstrap - Officiel hjemmeside
• Bootstrap på spansk - Indhold identisk med den officielle hjemmeside, oversat og konstant opdateret af Esdocu-projektet.
• Opret rene websider med Twitter Bootstrap - En kort artikel om CodeProject, der viser, hvordan du kommer i gang med biblioteket
• BootTheme: Webdesigner og temagenerator til Twitter Bootstrap - Onlineværktøj til at designe websider og generere temaer
• Bootstrap på spansk - oversættelsen er blevet godkendt af Bootstraps officielle websted og
• Bootstrap 3, den officielle manual på spansk. Oversætter: Javier Eguiluz
• Bootstrap UI Kit - Responsive Bootstrap-sideskabeloner, layout, komponenter og widgets, du kan hurtigt oprette en hjemmeside