Bootstrap installeren

baukjen · 14 jan 2022

Een website maken met Bootstrap lijkt niet al te moeilijk te zijn, maar het is mij niet helemaal duidelijk of de mappen met CSS en JS nu ergens moet DL en op mijn eigen systeem (DT) moet plaatsen of dat in de head allerlei linken moet maken.

Het opzetten er van duizelt wel een beetje.
Aan de ene kant is er informatie om de opzet zo te doen door het maken van linken zoals hier onder.
Weer andere informatie schrijft om allerlei onderdelen, mappen en bestanden, te DL en die op het eigen systeem te installeren.
Welke mappen en bestanden en hoe is dan weer onduidelijk.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com etc
<script src="https://maxcdn.bootstrapcdn.com/ etc.

In geval van bovenstaande linken zou je toch kunnen stellen dat het maken van een website afhankelijk is van deze linken en de makers er van?

Er zijn wel heel mooie website gemaakt met Bootstrap, maar het is mij nog onduidelijk hoe technisch een werkende index op te zetten m.n. het head gedeelte.

Is er ergens tutorial of een handleiding te vinden over Bootstrap hoe deze vanaf NUL op te zetten en aan de gang te krijgen?

Hartelijke groet,
Baukjen

Aar · 14 jan 2022

Kijk hier eens:
https://www.w3schools.com/bootstrap5/

Je hoeft verder niks te installeren. Je kan ook zonder de CDN-host werken als je Bootstrap zelf host.

bron · 14 jan 2022

In geval van bovenstaande linken zou je toch kunnen stellen dat het maken van een website afhankelijk is van deze linken en de makers er van?

Bootstrap is een bibliotheek met vormgeving (Bootstrap stylesheet) en functionaliteit (Bootstrap script). Die moeten beide gekoppeld zijn aan je pagina om er gebruik van te kunnen maken. Als je de Bootstrap functionaliteit niet wilt (bijv. voor een smartphone menu) dan mag je het Bootstrap script weglaten. De stylesheet van Bootstrap is altijd nodig.

Bekijk de code van anderen

Klik op Download examples om een stapel voorbeelden te zien.
In het mapje /assets/ vind je de bootstrap bestanden, hier staan ze dus lokaal op je eigen website en niet op cdn.jsdelivr.net

Uiteraard, zoals Aar al aangaf, de tutorial goed in je opnemen

bron · 14 jan 2022

Begin met een "lege template" en je kan makkelijk de tutorial doen.

Code:

<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Jouw stylesheet -->
<link href="style.css" rel="stylesheet">
<title>Mijn website</title>
</head>
<body>

<div class="container"> <!-- of container-fluid -->

<!-- hier staat jouw website -->

</div>

<!-- Bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Jouw javascript -->
<script src="script.js"></script>
</body>
</html>

Maak 2 bestanden voor het volgende
Zet jouw styling in bestand: style.css
Zet jouw scripts in bestand: script.js

Frenske123 · 15 jan 2022

Ook een punt van aandacht is hoe de kolom(men) in je website te maken.

https://getbootstrap.com/docs/5.0/examples/grid/

bron · 15 jan 2022

En daarna het 2e punt van aandacht, de flexbox.
https://getbootstrap.com/docs/5.0/utilities/flex/

Hiermee kan je eenvoudig horizontaal of verticaal centreren, of links/rechts uitlijnen, de richting of volgorde van kolommen veranderen, en nog meer.

Voorbeeld: Iets precies in het midden (horizontaal én verticaal) zetten gaat eenvoudig.

Code:

<style>
/* geef de view een volledige hoogte */
html, body { height: 100% }
</style>

<div class="d-flex h-100">    <!-- flexbox met 100% hoogte -->
    <span class="m-auto">     <!-- geef aan alle kanten een margin: auto -->
        Precies in het midden
    </span>
</div>

baukjen · 17 jan 2022

Bootstrap

Jippie, dank voor alle reacties, super. Hier kan ik mee verder in het land van Bootstrap hihi

.

Ben wat gaan uittesten en opzetten.

Nu na deze mooie informatie (reacties) nog meer enthousiast geworden om met Boorstrap een website te maken.

Als ik het dus goed begrijp bij het maken van een website met Bootstrap zijn er in de HEAD linken geplaatst die verbinding maken met de “opzet” (vormgeving) van de makers van Bootstrap?

Als dit klopt is het dan zo, dat als er iets, om welke reden, fout gaat in de bestanden bij Bootstrap, dit dan zicht- en merkbaar is bij iedere website die gemaakt is met Bootstrap?

Het begin is er, maar merk hier en daar nog het ontbreken van basiskennis .

Zo is het mij nog niet helemaal duidelijk LG, MD, SM of XS

Wat ik er van begrijp is dat het te maken heeft met de grootte van een scherm.
• Extra klein (voor smartphones .col-xs-*)
• Klein (voor tablets .col-sm-*)
• Medium (voor laptops .col-md-*)
• Groot (voor laptops/desktops .col-lg-*).

Voor mij is het dan niet helemaal duidelijk wat te doen als ik een website aan het maken ben op een desktop wat ik dan moet toepassen LG, MD, SM of XS? Immers wil ik toch dat de website op alle schermen te zien is?

Heb al gezien dat er verschillend wordt geschreven.

Soms alleen maar, <div class="col">.col</div>
Dan ook dit <div class="col-sm-12 row">
Maar soms ook dit, <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-xs-4 .col-sm-4 .col-md-4 .col-lg-4</div>

Zou ik dan bij het maken van bijvoorbeeld een rij die in 3 kolommen gemaakt moet worden het volgende moeten doen?
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-xs-4 .col-sm-4 .col-md-4 .col-lg-4</div>

Maar misschien wil ik nu wel iets te vlug en te veel ineens haha

.

Hartelijke groet,
Baukjen

Aar · 17 jan 2022

baukjen zei:
Als ik het dus goed begrijp bij het maken van een website met Bootstrap zijn er in de HEAD linken geplaatst die verbinding maken met de “opzet” (vormgeving) van de makers van Bootstrap?

Als dit klopt is het dan zo, dat als er iets, om welke reden, fout gaat in de bestanden bij Bootstrap, dit dan zicht- en merkbaar is bij iedere website die gemaakt is met Bootstrap?

Het zou theoretisch kunnen, maar de data wordt vanaf de snelste locatie opgehaald omdat het een via een CDN geleverd wordt, en we kunnen ervan uitgang dat dit wel een redundante verbinding heeft. Je bent ook vrij om het zelf te hosten. Dan heb je hier geen zorgen over

Zo is het mij nog niet helemaal duidelijk LG, MD, SM of XS

Wat ik er van begrijp is dat het te maken heeft met de grootte van een scherm.
• Extra klein (voor smartphones .col-xs-*)
• Klein (voor tablets .col-sm-*)
• Medium (voor laptops .col-md-*)
• Groot (voor laptops/desktops .col-lg-*).

Voor mij is het dan niet helemaal duidelijk wat te doen als ik een website aan het maken ben op een desktop wat ik dan moet toepassen LG, MD, SM of XS? Immers wil ik toch dat de website op alle schermen te zien is?

Ik raad je aan om dit eens door te lezen:
https://getbootstrap.com/docs/5.0/layout/grid/

Je hoeft ze niet allemaal te gebruiken. Ergens moet je gewoon de beslissing nemen wat je maximale breakpoint is.
In het algemeen is dat vaak .col-lg-(large)

Heb al gezien dat er verschillend wordt geschreven.

Soms alleen maar, <div class="col">.col</div>
Dan ook dit <div class="col-sm-12 row">
Maar soms ook dit, <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-xs-4 .col-sm-4 .col-md-4 .col-lg-4</div>

Zou ik dan bij het maken van bijvoorbeeld een rij die in 3 kolommen gemaakt moet worden het volgende moeten doen?
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-xs-4 .col-sm-4 .col-md-4 .col-lg-4</div>

Lees het genoemde artikel eens.

bron · 17 jan 2022

col-xs-4 col-sm-4 col-md-4 col-lg-4

Het voorbeeld wat je geeft is niet zo'n goed voorbeeld

Code:

1.   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">...</div>
2.   <div class="col-4">...</div>

1. en 2. zijn hetzelfde. Bij beide staat: maak de kolombreedte 4/12 van de totale breedte.

Het voorbeeld hieronder geeft aan hoe het werkt

Code:

<div class="col-12 col-sm-6 col-md-4 col-lg-3">...</div>

De classes zijn gestapeld, je leest van links naar rechts, er staat dan:

- de kolom is 12/12 breed (op smartphone)
- maar... op sm-scherm wordt de kolom 6/12 breed
- maar... op md-scherm wordt de kolom 4/12 breed
- maar... op lg-scherm wordt de kolom 3/12 breed

bron · 17 jan 2022

Oja, nog dit linkje dan kies je de documentatie van de versie die je gebruikt op jouw website.
https://getbootstrap.com/docs/versions/

Bootstrap installeren

baukjen

Gebruiker

Aar

Inventaris

bron

Moderator

bron

Moderator

Frenske123

Terugkerende gebruiker

bron

Moderator

baukjen

Gebruiker

Aar

Inventaris

bron

Moderator

bron

Moderator

Nieuwste berichten

Wij waarderen jouw privacy