Créer un thème: "The Band"
Cette page va vous montrer comment construire un thème Bootstrap à partir de zéro.
Nous allons commencer par une simple page HTML, puis ajoutez plus en plus de composants, jusqu'à ce que nous avons un site Web entièrement fonctionnel, personnel et réactif.
Le résultat ressemblera à ceci, et vous êtes libre de modifier, sauvegarder, partager, utiliser ou faire ce que vous voulez avec elle:
HTML Start Page
Nous allons commencer par la page HTML suivante:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme The Band</title>
<meta charset="utf-8">
</head>
<body>
<div>
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>Ajouter Bootstrap CDN et Ajouter un conteneur
Ajouter Bootstrap CDN et un lien vers jQuery et de mettre des éléments HTML dans un conteneur ( .container ):
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap
Theme The Band</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>THE BAND</h3>
<p>We love music!</p>
<p>We have
created a fictional band website. Lorem ipsum..</p>
</div>
</body>
</html>Résultat:
LE GROUPE
Nous aimons la musique!
Nous avons créé un site Web de groupe fictif. Lorem ipsum ..
Centre texte
Ajouter la .text-center de classe pour centrer le texte à l' intérieur du conteneur, et utiliser le <em> élément pour rendre le «Nous aimons la musique" texte en italique:
Exemple
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have
created a fictional band website. Lorem ipsum..</p>
</div>Résultat:
LE GROUPE
Nous aimons la musique!
Nous avons créé un site Web de groupe fictif. Lorem ipsum ..
Ajouter Rembourrage
Utilisez CSS pour rendre le récipient bien paraître avec un rembourrage:
Exemple
.container {
padding: 80px 120px;
}Résultat:
LE GROUPE
Nous aimons la musique!
Nous avons créé un site Web de groupe fictif. Lorem ipsum ..
Ajouter une grille
Créer trois colonnes de largeur égale ( .col-sm-4 ), ajouter du texte et des images, et les mettre à l' intérieur du conteneur:
Exemple
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We
love music!</em></p>
<p>We have created a fictional band website.
Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
<div class="col-sm-4">
<p><strong>Name</strong></p><br>
<img src="bandmember.jpg" alt="Random Name">
</div>
</div>
</div>Résultat:
LE GROUPE
Nous aimons la musique!
Nous avons créé un site Web de groupe fictif. Lorem ipsum ..
prénom
prénom
prénom
Cercle image
Façonner l'image à un cercle avec le .img-circle classe.
Nous avons également ajouté un peu de CSS pour rendre les images semblent bonnes:
Exemple
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
<img src="bandmember.jpg"
class="img-circle person" alt="Random Name">
Résultat:
prénom
prénom
prénom
pliables
Faire des images pliable; afficher du contenu supplémentaire lorsque vous cliquez sur chaque image:
Exemple
<div class="row">
<div class="col-sm-4">
<p
class="text-center"><strong>Name</strong></p><br>
<a href="#demo"
data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person"
alt="Random Name">
</a>
<div id="demo"
class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long
walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle
person" alt="Random Name">
</a>
<div id="demo2"
class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member
since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p
class="text-center"><strong>Name</strong></p><br>
<a href="#demo3"
data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person"
alt="Random Name">
</a>
<div id="demo3"
class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member
since 2005</p>
</div>
</div>
</div>Résultat (cliquer sur les images pour voir l'effet):
prénom
Guitariste et chanteur
Aime les longues promenades sur la plage
Membre depuis 1988
prénom
Le batteur
Loves drummin '
Membre depuis 1988
prénom
Bassiste
Loves mathématiques
Membre depuis 2005
Ajouter un carrousel
Créer un carrousel et l'ajouter avant que le conteneur:
Exemple
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div
class="item">
<img src="chicago.jpg"
alt="Chicago">
<div
class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
<div
class="item">
<img src="la.jpg"
alt="Los Angeles">
<div
class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess, we had the best time.</p>
</div>
</div>
</div>
<!--
Left and right controls -->
<a class="left carousel-control" href="#myCarousel"
role="button" data-slide="prev">
<span class="glyphicon
glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Résultat:
New York
L'atmosphère à New York est lorem ipsum.
Chicago
Merci, Chicago - Un soir, nous ne l'oublierons pas.
LA
Même si le trafic a été un gâchis, nous avons eu le meilleur temps à jouer à Venice Beach!
Style de The Carousel
Utilisez CSS pour le style du carrousel:
Exemple
.carousel-inner img {
-webkit-filter:
grayscale(90%);
filter: grayscale(90%); /* make all photos black and
white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media
(max-width: 600px) {
.carousel-caption {
display: none; /* Hide the
carousel text when the screen is less than 600 pixels wide */
}
}Résultat:
New York
L'atmosphère à New York est lorem ipsum.
Chicago
Merci, Chicago - Un soir, nous ne l'oublierons pas.
LA
Même si le trafic a été un gâchis, nous avons eu le meilleur temps à jouer à Venice Beach!
Ajouter Tour de Container
Ajouter un nouveau récipient et ajouter une liste ( .list-group et .list-group-item ) à l' intérieur de celui - ci.
Ajouter une classe personnalisée ( .bg-1 ) au récipient (couleur de fond noir) et certains styles à ses enfants:
Exemple
<style>
.bg-1 {
background: #2d2d30;
color: #bdbdbd;
}
.bg-1 h3 {color: #fff;}
.bg-1 p {font-style:
italic;}
</style>
<div class="bg-1">
<div
class="container">
<h3 class="text-center">TOUR
DATES</h3>
<p class="text-center">Lorem ipsum we'll
play you some music.<br> Remember to book your tickets!</p>
<ul class="list-group">
<li
class="list-group-item">September Sold Out!</li>
<li class="list-group-item">October Sold Out!</li>
<li class="list-group-item">November 3</li>
</ul>
</div>
</div>
Résultat:
DES DATES DE TOURNÉE
Lorem ipsum nous allons vous jouer de la musique.
Pensez à réserver vos billets!
- Septembre épuisé!
- Octobre épuisé!
- 3 novembre
Ajouter Labels & badges
Ajouter une étiquette ( .label ) et un badge ( .badge ) pour mettre en évidence des billets / vendu disponibles:
Exemple
<ul class="list-group">
<li class="list-group-item">September
<span class="label label-danger">Sold Out!</span></li>
<li
class="list-group-item">October <span class="label label-danger">Sold
Out!</span></li>
<li class="list-group-item">November <span
class="badge">3</span></li>
</ul>Résultat:
DES DATES DE TOURNÉE
Lorem ipsum nous allons vous jouer de la musique.
Pensez à réserver vos billets!
- Septembre épuisé!
- Octobre épuisé!
- 3 novembre
Ajouter des images miniatures
A l' intérieur du conteneur Tour, ajouter trois colonnes de largeur égale ( .col-sm-4 ):
A l'intérieur de chaque colonne, ajouter une image.
Ensuite, utilisez le .img-thumbnail classe pour façonner l'image d'une vignette.
Normalement, vous devez ajouter la .img-thumbnail classe directement à la <img> élément. Dans cet exemple, nous avons placé un conteneur de vignettes autour de l'image, de sorte que nous pouvons spécifier un texte d'image aussi bien.
Exemple
<div class="row text-center">
<div class="col-sm-4">
<div
class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<button
class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img
src="newyork.jpg" alt="New York">
<p><strong>New
York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg"
alt="San Francisco">
<p><strong>San
Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>Résultat:
Paris
Ven. 27 Novembre ici à 2015
New York
Sam. 28 Novembre ici à 2015
San Francisco
Soleil. 29 Novembre ici à 2015
Listes de style, Miniatures et Boutons
Utilisez CSS pour le style de la liste et les images miniatures. Dans notre exemple, nous avons supprimé les bords arrondis de la liste et nous avons essayé de rendre les images miniatures comme les cartes, en supprimant leur frontière, et définir une largeur de 100% sur chaque image.
Nous avons également modifié les styles par défaut de Bootstrap de .btn classe, à un bouton noir:
Exemple
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding
to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On
hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}Résultat:
- Septembre épuisé!
- Octobre épuisé!
- 3 novembre
Paris
Ven. 27 Novembre ici à 2015
New York
Sam. 28 Novembre ici à 2015
San Francisco
Soleil. 29 Novembre ici à 2015
Ajouter un Modal
Tout d' abord, changer tous les boutons dans la vignette du <button class="btn">Buy Tickets</button> de <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> <button class="btn">Buy Tickets</button> à <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> . Ces boutons sont utilisés pour ouvrir le modal réel.
Pour créer le modal, regardez le code suivant:
Exemple
<style>
/* Add a dark gray background color to the modal header and
center text */
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
</style>
<!-- Used to open the Modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy
Tickets</button>
<!-- Modal -->
<div class="modal fade" id="myModal"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">×</button>
<h4><span class="glyphicon
glyphicon-lock"></span> Tickets</h4>
</div>
<div class="modal-body">
<form role="form">
<div
class="form-group">
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>
Tickets, $23 per person</label>
<input type="number" class="form-control"
id="psw" placeholder="How many?">
</div>
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send
To</label>
<input type="text" class="form-control" id="usrname"
placeholder="Enter email">
</div>
<button type="submit" class="btn btn-block">Pay
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger
btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</button>
<p>Need <a href="#">help?</a></p>
</div>
</div>
</div>
</div>Résultat (cliquez sur le bouton "Achat de billets" pour voir l'effet):
Ajouter un contact Container
Créer un nouveau conteneur, avec deux colonnes de largeurs inégales ( .col-md-4 et .col-md-8 ).
Ajouter des icônes d'information avec le texte à l'intérieur de la première colonne et forment des contrôles dans le second:
Exemple
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a
note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago,
US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00
1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email:
[email protected]</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input
class="form-control" id="name" name="name" placeholder="Name" type="text"
required>
</div>
<div class="col-sm-6 form-group">
<input
class="form-control" id="email" name="email" placeholder="Email"
type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments"
placeholder="Comment" rows="5"></textarea>
<div class="row">
<div
class="col-md-12 form-group">
<button class="btn
pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>Résultat:
Contact
Nous aimons nos fans!
Ventilateur? Déposez une note.
Chicago, États-Unis
Téléphone: +00 1515151515
Email: [email protected]
Ajouter Toggable Tabs
Ajouter des onglets ( .nav nav-tabs ) à l' intérieur du récipient de contact, avec des "citations" des membres du groupe:
Exemple
<style>
.nav-tabs li a {
color: #777;
}
</style>
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a
data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div
class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h2>Mike Ross, Manager</h2>
<p>Man, we've been on the road for some time now. Looking forward to lorem
ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure
people! Hope you enjoyed it as much as I did. Could I BE.. any more
pleased?</p>
</div>
<div id="menu2" class="tab-pane
fade">
<h2>Peter Griffin, Bass player</h2>
<p>I mean, sometimes I enjoy the show, but other times I enjoy other
things.</p>
</div>
</div>Résultat:
De Le Blog
Mike Ross, directeur
Man, nous avons été sur la route depuis un certain temps. Dans l'attente de lorem ipsum.
Google Maps
Ajouter Google Maps (Pour plus d' informations, lisez notre Google Maps Tutoria l).
Utilisez CSS pour définir la largeur, la hauteur et la couleur de la carte:
Exemple
<style>
#googleMap {
width:
100%; /* Span the entire width of the screen */
height: 400px;
/* Set the height to 400 pixels */
-webkit-filter:
grayscale(100%);
filter: grayscale(100%); /* Change
the color of the map to black and white * /
}
</style>
<div id="googleMap"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("googleMap"),mapProp);
var
marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window,
'load', initialize);
</script>Résultat:
Essayez - le vous - même »Ajouter un Navbar
Ajouter un navbar en haut de la page qui s'effondre sur les petits écrans:
Exemple
<nav class="navbar navbar-default navbar-fixed-top">
<div
class="container-fluid">
<div class="navbar-header">
<button
type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul
class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">MORE
<span class="caret"></span>
</a>
<ul
class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a
href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
Résultat:
Essayez - le vous - même » | Astuce: droit d' aligner les liens de navigation avec le navbar-right classe. Si vous voulez un des liens dans la barre de navigation pour se comporter comme un menu déroulant, utilisez la .dropdown classe |
|---|
Style Le Navbar
Utilisez CSS pour personnaliser la barre de navigation:
Exemple
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn
white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c
!important;
}
/* Remove border color from the collapsible button
*/
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff
;
background-color: #555 !important;
}
/*
Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}Résultat:
Essayez - le vous - même »Ajouter Scrollspy
Ajouter scrollspy mettre à jour automatiquement les liens de la barre de navigation lors du défilement:
Exemple
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="band" class="container">
<div id="tour"
class="container">
<div id="contact" class="container"> Essayez - le vous - même » Ajouter un pied de page
1. Créez un <footer> élément et ajouter du texte.
2. Utilisez les CSS pour coiffer le pied de page.
3. Ajouter une icône "Flèche", qui prendra l'utilisateur en haut de la page quand on clique dessus.
4. Utilisez jQuery pour initialiser le plugin infobulle:
Exemple
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color:
#f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer
a:hover {
color: #777;
text-decoration: none;
}
</style>
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip"
title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="http://www.w3ii.com"
data-toggle="tooltip" title="Visit w3ii">www.w3ii.com</a></p>
</footer>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>Résultat:
Essayez - le vous - même »Ajout lisse Scrolling
Utilisez jQuery pour ajouter un défilement fluide (en cliquant sur les liens dans la barre de navigation):
Exemple
<script>
$(document).ready(function(){
// Add
smooth scrolling to all links in navbar + footer link
$(".navbar
a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor
click behavior
event.preventDefault();
// Store hash
var hash =
this.hash;
// Using jQuery's animate() method to add smooth page
scroll
// The optional number (900) specifies the number of milliseconds
it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash
(#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
</script> Essayez - le vous - même » Touche finale
Personnalisez votre thème en ajoutant une police que vous aimez. Nous avons utilisé "Montserrat" et "Lato" de la bibliothèque de polices de Google.
Lien vers la police dans le <head> section:
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
Ensuite, vous pouvez les utiliser dans la page:
Exemple
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family:
Montserrat, sans-serif;
}Nous avons également ajouté un peu de style supplémentaire à certains éléments:
Exemple
/* Overwrite default styles of h3 and h4 */
h3, h4 {
margin: 10px 0 30px 0;
letter-spacing: 10px;
font-size: 20px;
color: #111;
}
/* Remove rounded borders on input fields */
.form-control {
border-radius: 0;
}
/* Disable the ability to resize textareas */
textarea {
resize: none;
} Essayez - le vous - même »