Helpmij.nl
Helpmij.nl
Helpmij.nl

Quote

Weergeven resultaten 1 tot 10 van 10

Onderwerp: Bootstrap installeren

  1. #1
    Senior Member
    Geregistreerd
    14 september 2006
    Vraag is niet opgelost

    Bootstrap installeren

    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
    - Zij Die Kunnen Delen Gaan Vermenigvuldigen -



  2. #2
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    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.
    Laatst aangepast door Aar : 14 januari 2022 om 10:08
    Was voorheen: PHP4U

  3. #3
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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
    Laatst aangepast door bron : 14 januari 2022 om 19:26
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  4. #4
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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
    Laatst aangepast door bron : 14 januari 2022 om 19:18
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

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


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

  6. #6
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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>
    Laatst aangepast door bron : 15 januari 2022 om 20:39
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  7. #7
    Senior Member
    Geregistreerd
    14 september 2006

    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
    - Zij Die Kunnen Delen Gaan Vermenigvuldigen -



  8. #8
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Quote Origineel gepost door baukjen Bekijk Bericht

    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.
    Was voorheen: PHP4U

  9. #9
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    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
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  10. #10
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Oja, nog dit linkje dan kies je de documentatie van de versie die je gebruikt op jouw website.
    https://getbootstrap.com/docs/versions/
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl

Regels
Help

Helpmij.nl en business

Partners
Sponsoren