 Bootstrap 4 - Den første side
Installation
Ved brug af ekstern template
Vælger man at anvende et "alt inklusive" template / tema er det sandsynligvis slet ikke nødvendigt at installere Bootstrap. Bootstrap vil sandsynligvis være indlejret i temaet og tilpasset de karakteristika, der er valgt for temaet. CSS-filen knyttet til temaet skal da anvendes i stedet for.
CDN-baseret installation
Ved CDN-baseret installation kan nedenstående "Den første side" umiddelbart bruges. Udover koden leveret af Bootstrap er indsat 2 links til lokale CSS-filer til lokale css-modifikationer.
Lokal installation
Ved lokal kan Bootstrap downloades herfra .
Efter udpakning placeres filerne
- Efter udpakning placeres filerne:
- bootstrap.min.css og
- bootstrap.min.js
i overensstemmelse med sitets mappestruktur.
I "Den første side erstattes de eksterne links mid interne links til de to filer.
"jQuery---.slim--.js" og "popper.min.js" hentes, placeres og linkes på tilsvarende måde.
Den første HTML side
Den kodemæssige opstart for et nyt site (index.xxx-siden) kan udmærket tage udgangspunkt i forslaget fra Bootstrap. De væsentligste links til eksterne biblioteker er lagt ind.
Udover Bootstrap standard er indsat links til 2 css-filer til hhv. modifikation af Bootstrap-selektorer og indsættelse af egne selektorer. De skal have tilpasset sti og evt. navn efter behov.
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>sidetitel</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="bs-mod.css"/>
<link rel="stylesheet" href="egen-mod.css"/>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
|
De optionelle javascripts kan evt. a.h.t. overskuelighed etc. placeres i en include-fil. Det samme kan overvejes for CSS-linkene i headeren.
Denne meta-kode skal være til stede højt oppe i HEAD-delen på alle sider, der skal benytte Bootstrap:
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
Efter evt. andre lokale tilpasninger af siden (indsættelse af f.eks. php-relateret kode etc.) kan det være hensigtsmæssigt (dog evt. først efter at det primære css-gitter er opbygget) at lægge hele / dele af head og "footer" ud i include-filer.
Den første PHP side
De fleste projekter vil indeholde et antal sider der har et bestemt grunddesign i alt fald til og med opbygningen af gitteret. Det kan være hensigtsmæssigt tidligt i projektet at arbejde med en prototype så i det mindste responsiviteten er afklaret. Under opbygningen kan det være hensigtsmæssigt at farvelægge de enkelte celler så responsiviteten nemmere kan følges. Når dette arbejde er færdigt fjernes de midlertidige farver og siden gemmes som prototype. Derved reduceres mulighederne for fejl og hver ny side kan hurtigere komme igang med dens specifikke indhold. Prototypen kan også være færdiggjort så langt at visses elementer må fjerne for visse nye sider.
Det er karakteristisk for prototypen, at det vil være sitiationsafhængigt hvilket niveau den skal udvikles til. Der kan også være situationer, hvor mere end 1 prototype er hensigtsmæssig.
Nedenfor er vist, hvordan en sådan prototype kan være opbygget:
<?php
//session_start();
//ob_start();
include ("includes/db_connect.php");
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css_egne.css">
<!-- Baggrund fuldskærm (se også body-tag)-->
<style>
.baggrund{
background-color: rgba(154, 205, 50, 0.4);
}
</style>
</head>
<body class="baggrund">
<?php
include ("../includes/yolo_menu.php");
$side_titel = "Yoga - Vis alle"; // Den sidebetegnelse, der skal vises i browserens faneblad.
include ("../includes/side_titel.php");
?>
<!-- HERUNDER INDSÆTTES BRØDTEKST >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
<div class="container">
<div class="row my-1">
<div class="col-lg-4 col-12 d-flex justify-content-center bg-lgrey">
<p>Demo col 01</p>
</div><!-- /.col-lg-4 -->
%lt;div class="col-lg-4 col-12 d-flex justify-content-center bg-lgrey">
<p>Demo col 02</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4 col-12 d-flex justify-content-center bg-lgrey pt-4">
<p>Demo col 03</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div> <!-- container slut -->
<!-- HEROVER INDSÆTTES BRØDTEKST =<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< -->
<?php
include ("../includes/bottom_scripts.php");
?>
</body>
|
<?php
session_start();
ob_start();
include ("includes/db_connect.php");
$side_titel = ""; // Indsæt det navn siden skal have i browserens faneblad.
include ("includes/side_titel.php");
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<?php include ("css_egne/css_egne.php");?>
</head>
<body>
<div class="container">
< class="row">
<div class="col-12">
<h1>Hello, world!</h1>
</div>
</div> <!--row x slut -->
</div> <!-- container slut -->
<?php include ("includes/opt_js.php");?>
</body>
</html>
|
Egne CSS
css_egne.css.
Bootstrap kan ikke dække alle behov for css-selektorer. Der er derfor stadig behov for at lave sine egne. De kan opdeles i 3 grupper:
- Overstyring af BS-selektorer
Konsekvent overstyring af en BS-selektor. F.eks. at den blå farve ved samtlige forekomster skal have en anden nuance.
Navnet på BS-selektoren genbruges med den nye værdi
- "Som" BS-syntaks
Når BS har selektorer af den pågældende type, men ikke med den nødvendige værdi. F.eks. margin eller padding.
Navnet på den nye selektor følger BS-standarden og får tilknyttet den relevante værdi.
- Egen syntaks
Ved behov selektor som lgger udenfor BS-dækning. Navnet kan f.eks. prefikses med "z".
Om der skal være en eller tre css-filer til formålet vil være subjektivt. En skabelon baseret på 1 fil (f.eks "css_egne.css") kan se sådan ud:
@charset "utf-8";
/*
* Egne css til sitenavn
*/
*/BS overstyring/*
/* BS varianter */
/* Egne*/
|
Includes
For at gøre prototypen mere overskuelig kan relevante dele lægges ud i includes. Det bør som minimum gælde:
- db_connect.php
- side_titel
- CSS-blokken under <!--Bootstrap CSS -->
- Javascript-blokken under <!--Optional JavaScript-->
- Andre ting både over HEAD samt i HEAD og BODY
db_connect
db_connect.php etablerer forbindelse mellem den enkelte HTML-side og databasen.
<?php
$host = "localhost";
$user = "root";
$password = ""; //Indsæt password hvis krævet. På Mac skal password typisk være "root".
$database = "navn på den aktuelle database";
// Opret forbindelse til databasen
$db_link = mysqli_connect ($host, $user, $password, $database) or die (mysqli_error());
// Om nødvendigt kan følgende linje sørge for, at du kan udskrive ÆØÅ korrekt
//mysqli_query ($db_link, "SET NAMES utf8");
?>
|
Menu
sitenavn_menu.php
Menuer bør altid lagres i en include med et mnemoteknisk relevant navn. Såfremt et site indeholder flere menuer skal der etableres en include for hver.
En simpel menu kan se sådeles ud:
<nav class="navbar navbar-expand-lg navbar-light bg-light>
<a class="navbar-brand" href="../index.php"><img src="../favicon.ico"/> Yolo
<button class="navbar-toggler" data-toggle="collapse" type="button" data-target="#navbarYolomenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarYolomenu">
<ul class="navbar-nav">
<li class="nav-item">
<a href="../yoga/index.php" class="nav-link">Yoga</a>
</li>
.
.
.
</ul>
</div>
</nav> <!-- nav slut -->
|
Identen "navbarYolomenu" er brugervalgt, men skal være identisk d to steder.
Menun skifter mellem drop down og tværgående bar ved "lg".
Side titel
side_titel.php. Indsætter teksten fra variablen $side_titel i sidens faneblad
<?php
if (isset($side_titel))
{
$side_titel = $side_titel; // . " - fast tekst.";
}
else
{
$side_titel = "YOLO side";
}
echo "&t;title>".$side_titel."</title>";
?>
|
I sidens <body>-del indsættes før brødteksten påbegyndes:
<?php
$side_titel = "Yoga - Vis alle"; // Den sidebetegnelse, der skal vises i browserens faneblad.
include ("../includes/side_titel.php");
?>
|
JavaScripts
bottom_scripts.php
De CDN- links og andet, der af hensyn tl loadhastighed normalt udskydes til sidst, samles i en include-fil ("bottom_scripts.php". Da filen ikke vil indeholde php-kode skal der ikke indsættes <?php ... .
ndholdet i filen kan se sådan ud.
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
|
Baggrund udenfor CONTAINER
Baggrunden udenfor containeren vil default være hvid. CSS-styring af baggrund udenfor containeren (hele skærmen) styres ved at knytte en selektor til <body>-tagget.
Selektorer til indlejring i <body>-tagget kan ikke fødes fra en css-fil, men kun fra en <style ... - tag indsat i <head ... - tagget ovenfor.
Baggrunden kan være:
| Enkelt farve | .klassenavn {
background-color: farve;
} |
| Gradient | .klassenavn {
background: gradient; |
| Heldækkende billede |
/*Fuldskærm baggrundsbillede. Knyttes til "body"-tag */
.bg-img {
/* The image used */
background-image: url("../css_egne/billednavn");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.95;
}
|
| Delvis dækkende billede | Brug fuld-skærm, men tilpas med centrering og skalering etc. |
Billedet ligger også bag containeren. Det vil derfor være nødvendigt at give denne sin egen baggrund.
|
