logo   Bootstrap - Egne css




Bootstrap kan ikke altid levere nøjagtig den selektor, der er behov for. Enten findes den slet ikke, eller også findes der en der kan "næsten" bruges. Der er derfor ofte behov for at kunne supplere med "egne css".


Egne css bør samles i en enkelt fil. Link til den placeres umiddelbart under enten CDN-linket til Bootstrap-filen eller linket til den internt installerede bootstrap-min fil.


Selektorerne med egne css vil være en af tre typer, der hver især bør kunne identificeres via en valgt navnestandard:

  • Globalt modificeret BS-selektor
    Ændring af en BS-selektor for hele sitet (f.eks. at den blå farve på knapper etc. i stedet altid skal være brun).
    Navnestandard: BS-navnet bibeholdes altid uændret.

  • Kopi af BS-selektor
    En BS-selektor kan konceptuelt genbruges med ændring / tilføjelse af en deklaration eller flere (f.eks. at der også skal kunne anvendes tabellinier med mindre padding).
    Navnestandard: BS-navnet bibeholdes med tilføjelse af en entydig let genkendelig ident, der angiver, at denne selektor er en "kopi". Ved flere kopier af samme selektor kan serienr. tilføjes.

  • Egen selektor
    Selektorer, hvor "genbrug" ikke giver mening / er relevant (f.eks. til baggrundsbillede).
    Navnestandard: Valgfri navngivning afvigende fra BS-navn. Der bør indgå en entydig let genkendelig ident, der angiver, at denne selektor er en "egen".




Eksempler


Baggrundsbillede

Koncept for indsættelse af baggrundsbillede.

CSS

body, html {
    height: 100%;
}
.bg-img-E {
    /* Sti til billede og billednavn */
    background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");

    /* Fuld højde */
    height: 100%;

    /* Relevante deklarationer til opbygning af billedet */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.25;
}


HTML

<body class="bg-img-E">
      <div class="container">

         <øvrig kode til siden

      </div>   <!-- container ->
   <script src="https://code.jquery .......
</body>


Mindre padding i tabel

Ændring af padding fra 0.72rem til f.eks. 0.25rem. De to sidste deklarationer er uændrede, og kan udelades. De tilføres i forvejen med "table"-selektoren.

.table-K th,
.table-K td {
padding: 0.25rem;
vertical-align: top;
border-top: 1px solid #e9ecef;
}
























x
x