Johdanto Bootstrap-paneeleihin
Tietojen sisällön on oltava puhdasta, siistiä ja sopivaa. Sisällön tila, värikäs otsikko ja alatunniste sekä sisällön reuna näyttää houkuttelevalta. Houkutteleva sisältö on helppo lukea ja ymmärtää. Bootstrap-paneeli toimii täsmälleen samalla tavalla sisällössä. Sitä käytetään reunusrasiaan sisällölle, jolla on erityinen pehmuste. Se toimii sisällössä, otsikossa, alatunnisteessa ja myös eri värillä. Peruskäynnistyksen paneelityö käyttää ”.panel” -luokkaa div-elementissä, ja myös tämä luokka ”.panel-oletus” vaaditaan.
Esimerkki:
THIS IS A DEFAULT PANEL
lähtö:
Bootstrap-paneelien tyypit
Paneelit luokitellaan eri luokituksilla ja tavoitteilla, mikä on seuraava. Sisällöllä on otsikko, runko ja alatunniste. Elegantin sisällön ja tyylin tekemiseksi tarkoituksenmukaisesti paneeli keksii nämä luokat:
1. Paneeli otsikolla
Paneelin otsikossa reunusrasia, jota ympäröi sisältöotsikko ja sisällön runko muotoilulla täytetyllä. Otsikkopaneeli lisää luokka = “paneeli-otsikko” ja sisältöosa lisää luokka = “paneeli-runko”.
Koodi:
Content Heading
Content Body
lähtö:
Voit lisätä class = “panel-title” muokataksesi sisällön otsikkoa erikseen. Tätä luokkaa käytetään harvoin, koska paneelin otsikkoluokka muuttaa kaikki tyylit itse.
2. Paneeli alatunnisteella
Paneelin alatunnisteessa, reunusrasia, jota ympäröi sisällön alatunniste, ja sisältökappale muodon pehmusteella. Alatunnistepaneeli lisää luokka = “paneeli-alatunniste” ja sisältöosa lisää luokka = “paneeli-runko”.
Koodi:
Content Body
Content Footer
lähtö:
3. Paneeliryhmä
Tätä paneelia käytetään monien paneelien sitomiseen kerrallaan. Se poistaa alapaneelin reunan ja muodostaa ryhmän paneeleita.
Koodi:
Content Body1
Content Heading
Content Body
Content Body3
Content Footer
lähtö:
4. Paneelit, joissa on kontekstuaaliluokka
Merkityksellisemmän kontekstin saamiseksi käynnistyslokerointipaneeli suunnittele konteksteja varten eri luokat. Jokaisella kontekstiluokan otsikolla on erilainen väri osoittamaan kontekstin vaikutus. Nämä paneeliluokka on alla esimerkkeineen ja tuotoksineen,
- .panel-oletus: Tämä on oletuspaneeli, jota käytetään kontekstiin.
Koodi:
Content Heading
Content Body
lähtö:
- .panel-ensisijainen: Tämä luokka, jota käytetään primaarikontekstissa, tarkoittaa pääkonteksteja .
Koodi:
Content Heading with panel-primary class /div>
Content Body2
lähtö:
- .paneelin menestys: Tätä luokkaa käytetään, kun jollain kontekstilla on menestyksen merkitys.
Koodi:
Content Heading with panel-success class
Content Body3
lähtö:
- .panel-info: Tätä luokkaa käytetään, kun jossain tilanteessa on informatiivista.
Koodi:
Content Heading with panel-info class
Content Body4
lähtö:
- .panel-varoitus: Tätä luokkaa käytetään, kun jollain tilanteella on varoitusmerkin merkitys.
Koodi:
Content Heading with panel-warning class
Content Body5
lähtö:
- .panel-vaara: Tätä luokkaa käytetään, kun jollain tilanteella on vaaran merkitys ja halutaan osoittaa.
Koodi:
Content Heading with panel-danger class
Content Body6
lähtö:
Esimerkkejä Bootstrap-paneeleista
Seuraavassa on esimerkkejä käynnistyslokeropaneelista, jotka on selitetty yksityiskohtaisesti,
Esimerkki 1: Yksinkertainen Bootstrap-paneeli
Tämä on yksinkertainen bootstrap-oletuspaneeliesimerkki, jossa sijoitettu paneelin otsikko, paneelin alatunniste ja kuvausosa.
Koodi:
Content Heading
Content Body
Panel body for context
Content Footer
lähtö:
Esimerkki 2: Bootstrap-paneeli taulukolla
- Tässä esimerkissä hae taulukon lähtö käyttämällä bootstrap-paneelia. Pöytä voidaan muokata tyylikkääksi. Seuraava esimerkki ja lähtö on taulukko, joka käyttää käynnistyslokeroa.
- Tämä esimerkki tarvitsee taulukkoluokan taulukon tekemiseen. Se saa ensisijaisen ja paneelin otsikkoluokan pitämään taulukon nimen.
- Pöytäluokassa keksitään paneelirunko. Tähän taulukkoon taulukon otsikko ja taulukkotiedot sijoitetaan.
Koodi:
Table Name
Brand Name
Brand Price (Rs)
Brand A
500
Brand B
400
Brand C
700
