Creare un tema: "The Band"
Questa pagina vi mostrerà come costruire un tema Bootstrap da zero.
Inizieremo con una semplice pagina HTML, e quindi aggiungere sempre più componenti, fino a quando abbiamo un sito web completamente funzionale, personale e reattivo.
Il risultato sarà simile a questo, e si è liberi di modificare, salvare, condividere, utilizzare o fare quello che vuoi con esso:
HTML Pagina di avvio
Inizieremo con la seguente pagina HTML:
<!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>Aggiungere Bootstrap CDN e Aggiungi un contenitore
Aggiungere Bootstrap CDN e un link per jQuery e mettere elementi HTML all'interno di un contenitore ( .container ):
Esempio
<!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>Risultato:
LA BANDA
Amiamo la musica!
Abbiamo creato un sito web banda immaginaria. Lorem ipsum ..
centro Testo
Aggiungere il .text-center di classe per centrare il testo all'interno del contenitore, e utilizzare il <em> elemento per rendere il testo in corsivo "Amiamo la musica":
Esempio
<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>Risultato:
LA BANDA
Amiamo la musica!
Abbiamo creato un sito web banda immaginaria. Lorem ipsum ..
Aggiungere Imbottitura
Utilizzare i CSS per rendere il contenitore guardare bene con imbottitura:
Esempio
.container {
padding: 80px 120px;
}Risultato:
LA BANDA
Amiamo la musica!
Abbiamo creato un sito web banda immaginaria. Lorem ipsum ..
Aggiungere una griglia
Creare tre colonne di uguale larghezza ( .col-sm-4 ), aggiungere testo e immagini, e metterli all'interno del contenitore:
Esempio
<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>Risultato:
LA BANDA
Amiamo la musica!
Abbiamo creato un sito web banda immaginaria. Lorem ipsum ..
Nome
Nome
Nome
Circle Immagine
Forma l'immagine di un cerchio con il .img-circle di classe.
Abbiamo anche aggiunto un po 'di CSS per rendere le immagini sembrano buone:
Esempio
.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">
Risultato:
Nome
Nome
Nome
Collapsibles
Rendere le immagini pieghevole; mostrare contenuti in più quando si fa clic su ogni immagine:
Esempio
<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>Risultato (clicca sulle immagini per vedere l'effetto):
Nome
Il chitarrista e cantante
Ama lunghe passeggiate sulla spiaggia
Membro dal 1988
Nome
Drummer
Loves Drummin '
Membro dal 1988
Nome
Bassista
ama la matematica
Membro dal 2005
Aggiungere un carosello
Creare una giostra e aggiungerlo prima che il contenitore:
Esempio
<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>Risultato:
New York
L'atmosfera a New York è lorem ipsum.
Chicago
Grazie, Chicago - Una notte che non dimenticheremo.
LA
Anche se il traffico era un disastro, abbiamo avuto il tempo migliore a giocare a Venice Beach!
Lo stile del carosello
Utilizzare i CSS per lo stile del carosello:
Esempio
.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 */
}
}Risultato:
New York
L'atmosfera a New York è lorem ipsum.
Chicago
Grazie, Chicago - Una notte che non dimenticheremo.
LA
Anche se il traffico era un disastro, abbiamo avuto il tempo migliore a giocare a Venice Beach!
Aggiungere Tour Container
Aggiungere un nuovo contenitore e aggiungere un elenco ( .list-group e .list-group-item ) all'interno di esso.
Aggiungere una classe personalizzata ( .bg-1 ) al contenitore (colore di sfondo nero) e alcuni stili ai suoi figli:
Esempio
<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>
Risultato:
DATE TOUR
Lorem ipsum giocheremo si po 'di musica.
Ricordatevi di prenotare i biglietti!
- Settembre Esaurito!
- Ottobre Esaurito!
- 3 novembre
Aggiungere Etichette e Badges
Aggiungere un'etichetta ( .label ) e un badge ( .badge ) per evidenziare biglietti disponibili / esaurito:
Esempio
<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>Risultato:
DATE TOUR
Lorem ipsum giocheremo si po 'di musica.
Ricordatevi di prenotare i biglietti!
- Settembre Esaurito!
- Ottobre Esaurito!
- 3 novembre
Aggiungere immagini in miniatura
All'interno del contenitore Tour, aggiungere tre colonne di uguale larghezza ( .col-sm-4 ):
All'interno di ciascuna colonna, aggiungere un'immagine.
Quindi, utilizzare il .img-thumbnail classe di plasmare l'immagine di una miniatura.
Normalmente, si dovrebbe aggiungere il .img-thumbnail classe direttamente al <img> elemento. In questo esempio, abbiamo posto un contenitore miniatura intorno all'immagine, in modo che possiamo specificare un testo immagine pure.
Esempio
<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>Risultato:
Parigi
Ven 27 novembre 2015
New York
Sat. 28 Novembre 2015
San Francisco
Sole. 29 nov 2015
Liste Style, Miniature & Bottoni
Utilizzare i CSS per lo stile l'elenco e le immagini in miniatura. Nel nostro esempio, abbiamo rimosso i bordi arrotondati dalla lista e abbiamo cercato di rendere le immagini in miniatura come le carte, togliendo loro confine, e impostare una larghezza di 100% su ogni immagine.
Abbiamo anche modificato gli stili di default di Bootstrap di .btn classe, a un pulsante nero:
Esempio
/* 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;
}Risultato:
- Settembre Esaurito!
- Ottobre Esaurito!
- 3 novembre
Parigi
Ven 27 novembre 2015
New York
Sat. 28 Novembre 2015
San Francisco
Sole. 29 nov 2015
Aggiungere un modale
In primo luogo, cambiare tutti i pulsanti all'interno della miniatura da <button class="btn">Buy Tickets</button> di <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button> . Questi pulsanti vengono utilizzati per aprire il modale effettivo.
Per creare il modale, guardare il seguente codice:
Esempio
<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>Risultato (cliccare sul pulsante "Acquista biglietti" per vedere l'effetto):
Aggiungi contatto Container
Creare un nuovo contenitore, con due colonne di larghezza diversa ( .col-md-4 e .col-md-8 ).
Aggiungere icone informativi con il testo all'interno delle prime controlli della colonna e la forma nel secondo:
Esempio
<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>Risultato:
contatto
Amiamo i nostri fan!
Aggiungere Toggable Tabs
Aggiungere schede ( .nav nav-tabs ) all'interno del contenitore di contatto, con "virgolette" dai membri della band:
Esempio
<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>Risultato:
Da Il Blog
Mike Ross, Direttore
L'uomo, siamo stati sulla strada da qualche tempo. In attesa di lorem ipsum.
Google Maps
Aggiungi Google Maps (Per ulteriori informazioni, leggere la nostra Google Maps Tutoria l).
Utilizzare i CSS per impostare la larghezza, l'altezza e il colore della mappa:
Esempio
<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>Risultato:
Prova tu stesso "Aggiungere un Navbar
Aggiungere una barra di navigazione nella parte superiore della pagina che crolla su schermi più piccoli:
Esempio
<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>
Risultato:
Prova tu stesso " | Tip: destro allineare i link di navigazione con la navbar-right di classe. Se si desidera che uno dei collegamenti nella barra di navigazione a comportarsi come un menu a discesa, utilizzare la .dropdown classe |
|---|
Stile La Navbar
Utilizzare i CSS per personalizzare la barra di navigazione:
Esempio
/* 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;
}Risultato:
Prova tu stesso "Aggiungere Scrollspy
Aggiungere scrollspy per aggiornare automaticamente i collegamenti barra di navigazione durante lo scorrimento:
Esempio
<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"> Prova tu stesso " Aggiungere un piè di pagina
1. Creare un <footer> elemento e aggiungere del testo.
2. Usare CSS per lo stile piè di pagina.
3. Aggiungere l'icona "freccia", che avrà l'utente alla parte superiore della pagina quando si fa clic su.
4. Utilizzare jQuery per inizializzare il plugin tooltip:
Esempio
<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>Risultato:
Prova tu stesso "Aggiunta di scorrimento uniforme
Utilizzare jQuery per aggiungere lo scorrimento uniforme (quando si fa clic sui link nella barra di navigazione):
Esempio
<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> Prova tu stesso " tocco finale
Personalizza il tuo tema con l'aggiunta di un carattere che ti piace. Abbiamo usato "Montserrat" e "Lato" dalla libreria font di Google.
Link alla fonte nella <head> sezione:
<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">
Quindi è possibile utilizzare nella pagina:
Esempio
body {
font: 400 15px/1.8 Lato, sans-serif;
color: #777;
}
.navbar {
font-family:
Montserrat, sans-serif;
}Abbiamo anche aggiunto un po 'di stile in più ad alcuni elementi:
Esempio
/* 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;
} Prova tu stesso "