Conosco CSS di base, ma non ho esperienza. Voglio usare il file CSS di bootstrap, ma voglio aggiungere anche i miei codici di stile. Cosa dovrei fare per quello? Dovrei aggiungere prima gli stili Bootstrap e poi il mio? È il modo migliore?Utilizzo di Bootstrap e del mio CSS insieme
Avrete l'ordine dei fogli di stile come questo, prima includerete il css di bootstrap, quindi il vostro foglio di stile. Perché? Perché in questo modo puoi sovrascrivere le classi dal framework senza usare! Important. Puoi scrivere le tue classi e includerle nel tuo layout, puoi usare le classi di bootstrap e apportare le modifiche necessarie. Quando si mescolano le vostre classi e le classi bootstrap controllare quali attributi vengono aggiunti dalle loro classi, vero o no, ecc ... bisogno
Esempio
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/* Your external css file will go here. This is just for testing :) */
.mycustombtn{
background: #000;
}
</style>
<button type="button" class="btn btn-danger mycustombtn">Danger</button>È necessario aggiungere prima il cst di bootstrap e quindi l'utente, ma sarà complicato a causa del css del bootstrap. Assicurati di controllare sempre quali sono le classi di bootstrap.
Il problema principale è usare gli stessi nomi di classe e id con Bootstrap, giusto? Sto pensando di utilizzare nomi di classi e ID univoci per il mio css. È sufficiente prevenire errori probabili? – ahgk
Ci sono classi che possono aggiungere cose che non vuoi, ne devi sapere. E prova a non usare! Importante così tanto. Non è la migliore pratica. –
Sarebbe simile a questa:
<head>
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="yourstyle.css" rel="stylesheet" />
</head>
si può mettere il maggior numero di collegamenti CSS di cui hai bisogno. Trovo che di solito è meglio mettere i file CSS framework sopra i tuoi.
È possibile utilizzare Bootstrap con il CSS, basta farlo (nel tag head):
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<!-- Your file css -->
<link rel="stylesheet" href="your-file-css.css" />
È anche possibile sovrascrivere alcuni direttiva, basta metterli in si file (ma non è una buona pratica).
Ricordare, inserire sempre il collegamento su bootstrap prima del collegamento al file css.
Ci dispiace per il mio inglese
E 'tutto sulla specificità CSS.
Se due proprietà hanno lo stesso peso, viene utilizzata la seconda proprietà.
È possibile sovrascrivere singole proprietà CSS dichiarando la proprietà !important.
Esempio;
body {
background-color: #000 !important;
}
Si tratta di un modo semplice per superare il peso selettore CSS (o specificità) se si nota che gli stili Bootstrap sovrascrive il vostro (utile per un novizio solo cercando fuori roba).
Ma dovresti leggere di più sulla specificità - http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/.
Bootstrap prima, il vostro dopo. – ggdx
Se sei nuovo del css, è probabilmente una cattiva idea lanciare un framework in primo luogo. Impara CSS, quindi impara come manipolare un framework. – ggdx
Come altri hanno detto, Bootstrap prima. Si potrebbe anche prendere in considerazione la personalizzazione di Bootstrap, come i colori per pulsanti/testo. Questo può essere fatto prima di scaricare sulla pagina di personalizzazione di bootstrap, o usando uno strumento come http://bootswatchr.com/create che fornisce modifiche visive (completa divulgazione - non ho mai usato il sito - è stato il primo risultato di google, un può esistere uno strumento migliore ...) – Jack