De bedste eksempler på bootstrap
Bootstrap er en populær frontend-ramme til webudvikling. Den indeholder forudbyggede komponenter og designelementer til stil af HTML-indhold. Moderne browsere som Chrome, Firefox, Opera, Safari og Internet Explorer understøtter Bootstrap.
Bootstrap inkluderer et responsivt gittersystem til forskellige layouter. Det er et godt udgangspunkt for opbygning af et mobilvenligt websted. Det inkluderer også valgfri JavaScript-funktionalitet, såsom sammenklappeligt indhold, karruseller og modeller.
Hvorfor bruge Bootstrap?
Bootstrap giver en nem løsning både til design og lydhørhed. Den er fyldt med smukke elementer, der kan styles yderligere med din egen brugerdefinerede CSS samt et komplet gittersystem, der holder dit websted lydhørt over alle skærme, mens du bruger en ren og forståelig syntaks. Du kan opbygge et professionelt websted uden CSS eller JavaScript og nemt tilpasse elementerne, hvis det er nødvendigt
Versionshistorik
Twitter oprindeligt udviklede Bootstrap-rammen som et internt værktøj. De udgav det som et open source-projekt i august 2011.
Bootstrap 2 blev udgivet i januar 2012. En af de primære funktioner var introduktionen af det 12 søjles responsive gittersystem. Bootstrap 3 dukkede op i august 2013 og skiftede til et fladt design og en mobil-første tilgang. Bootstrap 4 er tilgængelig i beta fra august 2017 og inkluderer nu Sass og Flexbox.
Bootstrap 4 var under udvikling i to år, inden der blev frigivet nogle betaversioner i løbet af 2017, mens den første stabile udgivelse var udgivet i januar 2018. Nogle bemærkelsesværdige ændringer inkluderer:
- Flyttet fra mindre til Sass;
- Flyttet til Flexbox og forbedret netsystem;
- Tilføjede kort (erstatter brønde, miniaturer og paneler);
- Og meget mere!
I skrivende stund er Bootstraps seneste udgivelse 4.1.3. Hvis du vil følge med i nyhederne om meddelelser, skal du følge dem her.
Boostrap-funktioner
- Bootstrap 3 understøtter de nyeste versioner af Google Chrome, Firefox, Internet Explorer, Opera og Safari (undtagen i Windows). Det understøtter desuden tilbage til IE8 og den nyeste Firefox Extended Support Release (ESR). [12]
- Siden 2.0 understøtter Bootstrap responsivt webdesign. Dette betyder, at websides layout tilpasser sig dynamisk under hensyntagen til egenskaberne for den enhed, der bruges (desktop, tablet, mobiltelefon).
- Startende med version 3.0 vedtog Bootstrap en mobil-første designfilosofi med vægt på responsivt design som standard.
- Version 4.0 tilføjede Sass og flexbox support.
- Version 4.1 Tilføjet ny brugerdefineret rækkevidde formular kontrol.
- Bootstrap begrænser dig ikke til et fast CSS-format, men giver dig mulighed for hurtigt at udvikle, så stiloverskrivninger ved hjælp af cascading kan tilføje / redigere standardformaterne.
Kom igang
Bootstrap er en gratis og open source-ramme udviklet af Twitter, der giver en række skabeloner til brug med front-end webudvikling. Brug af Bootstrap gør det nemt at designe et fuldt responsivt websted og er en ramme, der er værd at lære.
Hvordan tilføjer jeg Bootstrap til min side?
Tilføjelse af bootstrap til din side er en hurtig proces, bare tilføj følgende til tags i din kode.
Bemærk: Dette er kun eksempler og kan ændres uden varsel. Se et CDN for aktuelle links til at medtage i dit projekt.
Nogle Bootstrap-komponenter kræver andre JavaScript-filer. Tjek Bootstrap-dokumentationen her for at finde de nyeste scriptfiler.
Du skal også tilføje følgende mellem body
tags i din kode. Med bootstrap bruger du tags, når du bruger mange af Bootstraps funktioner, f.eks
Congratulations!Bootstrap is now working on this page
Tillykke!
Bootstrap arbejder nu på denne side
Installation af Bootstrap med en pakkehåndtering
En populær pakkehåndtering er NPM eller Node Package Manager. Du bliver nødt til at installere Node.js, som inkluderer Node Package Manager. Besøg Node.js og download de nødvendige filer baseret på dit operativsystem, og installer dem derefter.
Når du er installeret og opsat, skal du åbne kommandolinjen eller konsollen og skrive følgende i den projektmappe, du vil bruge Bootstrap med. I skrivende stund installeres Bootstrap version 4.0.0
npm install [email protected] --save
Når NPM er færdig med at downloade og installere Bootstrap 4, vil der være en ny mappe kaldet node_modules
i din projektmappe, hvis den ikke allerede var der.
/bootstrap
som indeholder CSS- og Sass-versionen af vores filer./jquery
som bruges af Bootstrap i forskellige komponenter./tether
som er et bibliotek til elementpositionering.
Gridsystem
I en nøddeskal hjælper Bootstrap-gittersystemet dig med at oprette responsive layouts, og det består af et system med rækker og kolonner, der hjælper dig med at strukturere dit indhold.
Rækker er vandrette grupper af kolonner, og hver side har maksimalt 12 kolonner pr. Række. Inden for hver række placeres indholdet inde i kolonnerne, og det kan spænde overalt mellem 1 og 12 kolonner.
Bootstrap har fem forskellige typer gitterniveauer: Ekstra lille, Lille, Medium, Stor og Ekstra stor. Der er defineret et brudpunkt for hvert af disse gitterniveauer. Bootstrap bruger pixels til at definere gitter-niveau breakpoints.
Beholder
Containeren er det yderste element, der indeholder dit gitter. Anvendes container
til en container med fast bredde midt på skærmen (tilføj en ekstra margen på større skærme) eller container-fluid
til fuld bredde.
Række
Use row
to group your columns. This will keep everything lined up properly and help you structure your grid.
Columns
Column classes indicate the number of columns you’d like to use out of the possible 12 per row. For example col-sm-6
would mean your columns use up half the width of the row
on a small screen, and col-lg-4
would use up a third on a large screen.
Here is how you would define a class prefix to use up one column width on the various screen sizes:
- Extra Small
col-1
- Small
col-sm-1
- Medium
col-md-1
- Large
col-lg-1
- Extra Large
col-xl-1
Example
A full width grid that has four columns, each taking up a full row on xs screens, half a row on sm and md screens, and a quarter of the width of the row on screens that are large and above:
First Column Second Column Third Column Forth Column
Note that col-md
and col-xl
are not defined, where a size is not defined, it will default down to the next smaller size that has been specified.
Bootstrap provides a ready-made 12 column grid system for use in layouts. Consider the following code.
Content Content
where:
- col = column - md = screen size - 6 = column width
As a 12 column grid system, all user defined grid column widths must add up to 12.
Screen size values can be assigned as follows:
- xs - < 768px Phones
- sm - < 992px Tablets
- md - < 1200px Laptops
- lg - > 1200px Desktops
The following code and image shows what is possible using different column widths.
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content

Buttons
The Bootstrap framework provides you with various styling options for buttons. These styles help you provide a visual representation to the user of what the button may do.
How To Use
To use bootstrap buttons you need to follow the same steps that you would to create a button in HTML, except that you also apply the applicable CSS class to the button. A code example has been provided below.
Code Example:
Primary
You can also use bootstrap buttons with the and
elements as shown in the examples below. As per the Bootstrap documentation,
When using button classes on elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button"
to appropriately convey their purpose to assistive technologies such as screen readers.
This button is a link
Button Class List
This is a list of the CSS classes that bootstrap provides for buttons. They give the background color to the buttons.
.btn
This is bootstrap's basic button. It is a prerequisite if you want other bootstrap buttons to work properly.
Basic
.btn-primary
Bootstrap's primary button. Default color displays #007bff.
Primary
.btn-secondary
Bootstrap's secondary button. Default color displays #6c757d.
Secondary
.btn-success
Bootstrap's success button. Default color displays #28a745.
Success
.btn-info
Bootstrap's info button. Default color displays #17a2b8.
Info
.btn-warning
Bootstrap's warning button. Default color displays #ffc107.
Warning
.btn-danger
Bootstrap's danger button. Default color displays #dc3545.
Danger
.btn-link
Bootstrap's link button.
Link
.btn-light
Bootstrap's light button.
Light
.btn-dark
Bootstrap's dark button.
Dark
.btn-dark
This is bootstrap's dark button.
.btn-secondary
This is bootstrap's secondary button.
Button Sizes
This is a list of the CSS classes for different size of the buttons.
.btn-lg
Bootstrap's large button.
Large
.btn-md
This is bootstrap's medium button.
Medium
.btn-sm
Bootstrap's small button.
Small
.btn-md
This is bootstrap's medium button.
.btn-xs
This is bootstrap's extra small button.
Extra Small
.btn-block
This is bootstrap's full width button.
Disabled Button State
This is used to show that the button is disabled by fading the button. This can be achieved through adding "disabled" to the tag.
.btn-block
This is bootstrap's block level button. They actually span the entire width of their parent element. For example, a form element with a width of 200px, that means the btn-block button would have a width of 200px.
Outlined Buttons
It is possible to also have outlined buttons rather than fully colored buttons. This is achieved by placing the mid fix outline
between the button class you want. A sample usage would be as follows:
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Outlined buttons are a part of Bootstrap since version 4 - please be sure that you are using the right version if you are unable to get them to work.
Inline Buttons
You can create inline button row by adding .d-inline-block
class to the element which sets the display of the button to inline block. For example :
Grouping of Buttons
It is possible to group more than one button for certain uses like pagination. Grouping buttons can be done by making a parent div
for all buttons you want to group, using the .btn-group
class on this div
:
Left Middle Right
Dropdowns
Bootstrap provides Dropdowns as a plugin for displaying lists of links. A dropdown is a button which toggles displaying a list of links.
Bootstrap’s dropdowns are designed to be generic and applicable to a variety of situations. For instance, it is possible to create dropdowns that contain search fields or login forms.
Dropdown example Action Another action Something else here
The .dropdown class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown attribute.
The .caret class creates a caret arrow icon (▼), which indicates that the button is a dropdown.
Add the .dropdown-menu class to a unordered list element to actually build the dropdown menu.
Navigation Bar
The Bootstrap framework provides you with a feature called navigation bars. In short, a navigation bar (also referred to as a navbar) is a header at the top of the page to display navigational information.
How To Use
To use Bootstrap Navigation Bars you add a element to the top inside the
element of your webpage. There are various styles you can add to customize the display of your navbars.
This is the code needed to make a basic navbar:
Site Name
- Home
- Page 1
- Page 2
- Page 3
Navbar Styles
Bootstrap provides a set of classes in the Bootstrap framework to style your navbars. These classes are as followed:
navbar navbar-default
This is the default style for your navbars.navbar navbar-inverse
This is similar to the default style except the colors are inverted.
Adding drop-down menus to the navbar
You can include a drop-down menu inside a navbar. This feature requires you to include Bootstrap's javascript file for it to work.
Drop down
- Item 1
- Item 2
- Item 3
Adding buttons to the navbar
You can add buttons on the navbar. The existing Bootstrap Button classes work however you'll need to include the class navbar-btn
to the end of the class list.
Button
Adding brand logo or name to the navbar
The navbar-brand
class can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
Navbar
Navbar
Adding forms to the navbar
You can also add forms to the navbar. This could be used for tasks such as a search field, quick login field, etc.
Search
Aligning elements to the right on the navbar
In some cases you might want to align elements in a navbar to the right (for example a login or sign-up button.). To do this you'll need to use the navbar-right
class.
Site Name
- Home
- Page 1
- Page 2
- Page 3
- Action Link #1
- Action Link #2
Displaying the navbar independent of scrolling
In some cases you might want to keep the navbar at the top or bottom of the screen regardless of scrolling. You will need to add either the navbar-fixed-top
or navbar-fixed-bottom
class to the element.
Site Name
- Home
- Page 1
- Page 2
- Page 3
Collapsing the navbar
On a small screen (such as a phone or tablet) the navbar is going to take up too much space. Luckily the option to collase the navbar exists. You can accomplish this using the following example.
Site Name
- Home
- Page 1
- Page 2
- Page 3
Jumbotron
Jumbotron
is Lightweight, flexible component for showcasing hero unit style content. Jumbotron
is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.
Jumbotron make use of almost any other bootstrap code to additionally increase its engagement value. It's operate with images,enlarged fonts,different backgorund styles etc.
Most Attracting features of jumbotron
- Showcase the marketing messages on your site
- Project presentation
- Article introduction
- Image showcase
How to use
Use a element with class
.jumbotron
to create a jumbotron:
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn more
Fluid jumbotron
To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid
modifier class and add a .container
or .container-fluid
within.
Fluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
Forms
Bootstrap framework provides a form feature which you can use to create beautiful HTML forms easily. Using the Bootstrap form gives each individual form element a unified global style. Bootstrap form adds the right spacing and look to each element.
Each Bootstrap form element should have a class form-control. This class is how Bootstrap knows which elements to style. All textual elements like input, textarea and select that have the form-control class will have 100% width by default.
There are two types of Bootstrap forms, which are:
- Inline form - creates the form on a single line. Useful for login forms in a nav bar
- Horizontal form - creates a form with each element in a different row
Example of a basic form
Email address Password File input Example block-level help text here.
Check me out Submit
Example of an inline form
Name Email Send invitation
Example of horizontal form
Email Password Remember me Sign in
Form Inputs
Bootstrap supports the following form controls:
- input
- textarea
- checkbox
- radio
- select
- range
1. Input
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
Note: Inputs will NOT be fully styled if their type is not properly declared!
The following example contains two input elements; one of type text and one of type password:
Name: Password:
2. Textarea
The following example contains a textarea:
Comment:
3. Checkboxes
Checkboxes are used if you want the user to select any number of options from a list of preset options.
The following example contains three checkboxes. The last option is disabled:
Option 1 Option 2 Option 3
Use the .checkbox-inline class if you want the checkboxes to appear on the same line:
Option 1 Option 2 Option 3
4. Radio Buttons
Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
The following example contains three radio buttons. The last option is disabled:
Option 1 Option 2 Option 3
Use the .radio-inline class if you want the checkboxes to appear on the same line:
Option 1 Option 2 Option 3
5. Select (List)
Select lists are used if you want to allow the user to pick from multiple options.
The following example contains a dropdown list (select list):
Select list: 1 2 3 4
6. Range
Select lists are used if you want to allow the user to pick from multiple options.
The following example contains a dropdown list (select list):
Example Range input
How to make Bootstrap Inputs Accessible
Input fields should have labels or some other form of identifier such as WAI-ARIA tags to meet the Web Content Accessibility Guidelines or WCAG for short. In order for screen readers to accurately convey to a user what labels are associated with which inputs the labels should reference the corresponding input.
Dette kan gøres ved at bruge for
parameteren i HTML:
Enter Email
Etiketten for
attribut altid refererer indtastningsfeltet ved sin id . Dette fortæller skærmlæser, at denne etiket bestemt er til dette indtastningsfelt, hvilket minimerer forvirring for alle brugere, der bruger en skærmlæser til at besøge et websted. I ovenstående eksempel, hvis en bruger klikker på det aktuelle ord "Indtast e-mail", vil brugeren være i stand til at skrive. Hvis attributten 'til' ikke var knyttet til etiketten, ville der intet ske, hvis en bruger klikker på ordene 'Indtast e-mail'. Brugeren skal klikke på det faktiske e-mail-indtastningsfelt for at kunne skrive.
Tabeller
Grundlæggende tabel
For at opnå det grundlæggende stylingeksempel tilføj baseklassen .table
til enhver
element.
...

Bordhoved
Du kan definere separat overskriftssektion i din tabelstruktur. Dette er et eksempel
#
First
Last
Handle
1
Bob
Robo
@bro
Bordstribet
For at opnå den stribede rækkeeffekt (zebrastribning) i tabeller anvendes .table-striped
ud over .table
på enhver
:nth-child
element. Stribede tabeller er stylet via CSS-vælgeren, som ikke er tilgængelig i Internet Explorer 8.
...

Bord afgrænset
For at opnå den afgrænsede tabel brug .table-bordered
ud over .table
på enhver
element.
...

Hover over bordet
For at opnå svæverrækkeffekten på tabeller skal du bruge .table-hover
ud over .table
på enhver
element.
...

Bord kondenseret
For at opnå det kondenserede bord brug .table-condensed
ud over .table
på enhver
element.
...

Tabel responsiv
For at opnå den responsive tabel ved at indpakke enhver .table
tabel i et .table-responsive
element.

Udviklere er i stand til at ændre stilen for hver enkelt række og / eller celle
ved hjælp af kontekstuelle klasser .
.active
- Anvender svævefarven på en bestemt række eller celle.success
- Angiver en vellykket eller positiv handling.info
- Angiver en neutral informativ ændring eller handling.warning
- Angiver en advarsel, der muligvis har brug for opmærksomhed.danger
- Angiver en farlig eller potentielt negativ handling
