Styliser Bootstrap

Bonjour!

Savez-vous comment styliser les balises de bootstrap? Si l'on veut ajouter une marge, couleur, un cadre etc...

Egalement, peut-on créér des blocs (en css classique) et imbriquer le container, row de bootstrap? Afin encore une fois de pouvoir styliser l'emsemble tout en gardant le côté responsive,
mettre une image en arrière plan, centrer une liste à puce etc...

J'ai beau ajouter une class à (en exemple) un ul, c'est laborieux! et ne fonctionne toujours pas...Certaines class et/ou id que je crée sur une feuille de style perso, disparaissent par moment....

J'ai du mal à saisir la mise en forme des deux...Pouvoir créér des blocs, intégrer le reste...

Merci de votre aide, je suis perdu!

Bonjour,

les balises de Bootstrap, c'est plutôt des classes
Tu titres "styliser" mais parle plutôt de structure et mise en page (layout). C'est plus difficile que de changer des couleurs et des arrondis de blocs ou des gradients...

Je suppose que tu utilises la version CSS prête à l'emploi de Bootstrap et pas LESS ou Sass ?
Ensuite il faut bien charger la bibliothèque avant ta propre feuille de style, pas après.

Pour savoir ce qu'il se passe quand tu ajoutes tes règles (et si ça fonctionne ou pas et pourquoi), il faut regarder avec un Inspecteur d'éléments/Devtools/Firebug/F12 quelles règles s'appliquent à un élément donné, quelle spécificité gêne en écrasant la valeur d'une propriété pourtant souhaitée, etc

Pour des réponses plus précises, il faudrait des exemples de code, par exemple sur http://codepen.io/pen/ avec dans la partie CSS un "External CSS File or Another Pen" de Bootstrap comme https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css (qui va charger Bootstrap sur un serveur prévu à cet effet, y a plus qu'à ajouter tes règles CSS)

Merci, c'est effectivement de layout ce dont je parle, j'ai avancé sur le sujet entre temps et dispose des éléments dont tu parles..

Je rencontre malgré tout des problèmes de "mise en forme" comme faire floter un block à côté d'une image :

<div class="container content">
<div class="row content"><!--Annonce free-->
<div class="col-lg-7">
<div class="date">Aujourdhui : 17h30 </div>
<div class="annonces-free"><img class="thumbnail" src="dist/images-annonces-free/1.jpg" width="185" height="130" />
<div class="description-bloc"><!--description block-->
<div class="references">Réf : Xs9</div>
<div class="title">206</div>
<div class="category">Voiture</div>
<div class="placement">france</div>
</div><!--Fin description block-->
</div><!--Fin Annonce free-->
</div>

.annonces-free {
    background-color:#ccc; 
    height:200px;
    padding-top:40px;  
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 0px;
}
 
 
.thumbnail {
    height: 130px;
    width: 185px;
    border: 1px solid #333;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    padding: 0px;
}
.date {
    padding: 0px;  
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 12px;
    font-weight: bold;
}
.references {
}
.title {
}
.category {
}
.placement {
}
.description-bloc {
    background-color: #0CC;
    margin: 0px;
    padding: 0px;
    height: 200px;
    width: 150px;
    margin-left:300px;

L'image :


Merci pour votre aide
Modifié par greg73 (31 Oct 2014 - 07:38)

Salut,

en fait là tu utilises une image et un "div".
Un "div" est un bloc. une des caractéristiques d'un bloc c'est que c'est un conteneur, qui impose un retour à la ligne AVANT et APRES lui. en gros il se positionne sur une ligne rien que pour lui.

si tu veux changer ce comportement pour qu'il reste sur même ligne que ton élément précédent (ton image), il faut changer sa propriété qui gère cette caractéristique :

.description-bloc{
display:inline-block;
}

et hop ton bloc texte devrait se mettre à coté de ton image.