Aquesta pàgina llista elements habituals de la interfície del lloc web, i mostra com es 'dibuixen' en la vista pública.

Títol h1 <h1>

I un paràgraf

Títol h2 <h2>

I un paràgraf

Títol h3 <h3>

I un paràgraf

Títol h4 <h4>

I un paràgraf

Títol h5 <h5>

I un paràgraf

Títol h6 <h6>
Exemple de codi <pre> 

Text normal de document, text en negreta, text en cursiva, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque odio sem, aliquam ut, suscipit at, aliquet non, justo. Vestibulum vitae urna et mi volutpat luctus. Nulla auctor, lacus ut consectetuer sagittis, erat odio vulputate sapien, eu placerat diam mauris id turpis. Aenean quis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rutrum. Sed mattis turpis sit amet ipsum viverra pharetra. Nunc facilisis, augue non dapibus gravida, risus quam vulputate quam, non venenatis dui massa in leo. Maecenas scelerisque dapibus libero. Suspendisse potenti. exemple de text amb enllaç dintre d'un paràgraf.

  • Llista amb punts 1
    • Llista amb punts subelement 1
  • Llista amb punts 2
  • Llista amb punts 3
  1. Llista numerada element 1
    1. Llista numerada subelement 1
  2. Llista numerada element 2
  3. Llista numerada element 3

Exemple de taula amb títols de columna

Títol columna <th> Títol columna <th> Títol columna
Odd table item Item 1 Another item
Even table item Item 2 Yet another item
Odd table item Item 3 And one more item

Exemple de taula amb títols de fila

Títol de fila <th> Odd table item
Títol de fila <th> Even table item
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Formulari sense classes

Fieldset llegenda <legend>

Camp de checkbox.

Camp de ràdio

Formulari amb classes

<form>
	<div class="form-group">
		<label for="email">Correu:</label>
		<input type="email" class="form-control" id="email">
	</div>
	<div class="form-group">
		<label for="pwd">Nom i cognoms:</label>
		<input type="password" class="form-control" id="pwd">
	</div>
	<div class="checkbox">
		<label><input type="checkbox"> Exemple de checkbox me</label>
		</div>
	<div class="radio">
		<label><input type="radio"> Exemple de radio</label>
	</div>
	<div class="form-group">
		<label for="">Exemple de textarea</label>
		<textarea name="" id="" cols="30" rows="10"></textarea>
	</div>
	<button type="submit" class="btn btn-default">Enviar</button>
</form>	
		

Formulari en línea

<form class="form-inline">
	<div class="form-group">
		<label for="exampleInputName2">Nom</label>
		<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
	</div>
	<div class="form-group">
		<label for="exampleInputEmail2">Correu</label>
		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
	</div>
	<button type="submit" class="btn btn-default">Enviar</button>
</form>

Exemple de jumbotron .jumbotron

Mauris vehicula efficitur lectus, id pretium sapien ornare a. Suspendisse erat tortor, suscipit eget placerat a, sollicitudin sed sapien. Suspendisse potenti. Duis rhoncus ipsum eu libero pellentesque rhoncus. Vestibulum vulputate enim urna, sed interdum ex aliquam et. Nulla nec libero mi. Quisque porta convallis pulvinar. In turpis quam, sagittis ac cursus pulvinar, vulputate vitae lectus.

200x200

Per defecte Primari Correcte Info Avís Perill

.label .label-default .label .label-primary .label .label-success .label .label-info .label .label-warning .label .label-danger

<div class="dropdown theme-dropdown clearfix">
	<a id="dropdownMenu1" href="#" class=" dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
	<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		<li class="active"><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>
	
Tria per mestre a aquell a qui admiris més pel que en ell veiessis que pel que escoltessis dels seus llavis.
Cita per defecte .blockquote-default
			<blockquote class="blockquote-default"> Cita per defecte .blockquote-default </blockquote>
	
.blockquote-primary
.blockquote-danger
.blockquote-info
.blockquote-success
.blockquote-warning
.blockquote-lg
.blockquote-sm
.blockquote-xs
.blockquote-reverse
60% Complete
<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
</div>
	
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<ul class="list-group">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
		<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>
			
<div class="list-group">
	<a href="#" class="list-group-item active">Cras justo odio</a>
	<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
	<a href="#" class="list-group-item">Morbi leo risus</a>
	<a href="#" class="list-group-item">Porta ac consectetur ac</a>
	<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
			
<div class="list-group">
	<a href="#" class="list-group-item active">
		<h4 class="list-group-item-heading">List group item heading</h4>
		<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">List group item heading</h4>
		<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
	</a>
	<a href="#" class="list-group-item">
		<h4 class="list-group-item-heading">List group item heading</h4>
		<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
	</a>
</div>
			

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<div class="panel panel-default">
	<div class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</div>
	<div class="panel-body"> Panel content </div>
</div>

			
<div class="panel panel-success">
	<div class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</div>
	<div class="panel-body"> Panel content </div>
</div>

			
<div class="panel panel-warning">
	<div class="panel-heading">
		<h3 class="panel-title">Panel title</h3>
	</div>
	<div class="panel-body"> Panel content </div>
</div>
<div class="panel panel-danger">
	
			
<div class="panel panel-primary">
	<div class="panel-heading">
			<h3 class="panel-title">Panel title</h3>
	</div>
	<div class="panel-body"> Panel content </div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">
			<h3 class="panel-title">Panel title</h3>
	</div>
	<div class="panel-body"> Panel content </div>
</div>
<div class="panel-heading">
	<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body"> Panel content </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

<span class="glyphicon glyphicon-asterisk"></span>
	
  • .glyphicon-asterisk
  • .glyphicon-plus
  • .glyphicon-euro
  • .glyphicon-minus
  • .glyphicon-cloud
  • .glyphicon-envelope
  • .glyphicon-pencil
  • .glyphicon-glass
  • .glyphicon-music
  • .glyphicon-search
  • .glyphicon-heart
  • .glyphicon-star
  • .glyphicon-star-empty
  • .glyphicon-user
  • .glyphicon-film
  • .glyphicon-th-large
  • .glyphicon-th
  • .glyphicon-th-list
  • .glyphicon-ok
  • .glyphicon-remove
  • .glyphicon-zoom-in
  • .glyphicon-zoom-out
  • .glyphicon-off
  • .glyphicon-signal
  • .glyphicon-cog
  • .glyphicon-trash
  • .glyphicon-home
  • .glyphicon-file
  • .glyphicon-time
  • .glyphicon-road
  • .glyphicon-download-alt
  • .glyphicon-download
  • .glyphicon-upload
  • .glyphicon-inbox
  • .glyphicon-play-circle
  • .glyphicon-repeat
  • .glyphicon-refresh
  • .glyphicon-list-alt
  • .glyphicon-lock
  • .glyphicon-flag
  • .glyphicon-headphones
  • .glyphicon-volume-off
  • .glyphicon-volume-down
  • .glyphicon-volume-up
  • .glyphicon-qrcode
  • .glyphicon-barcode
  • .glyphicon-tag
  • .glyphicon-tags
  • .glyphicon-book
  • .glyphicon-bookmark
  • .glyphicon-print
  • .glyphicon-camera
  • .glyphicon-font
  • .glyphicon-bold
  • .glyphicon-italic
  • .glyphicon-text-height
  • .glyphicon-text-width
  • .glyphicon-align-left
  • .glyphicon-align-center
  • .glyphicon-align-right
  • .glyphicon-align-justify
  • .glyphicon-list
  • .glyphicon-indent-left
  • .glyphicon-indent-right
  • .glyphicon-facetime-video
  • .glyphicon-picture
  • .glyphicon-map-marker
  • .glyphicon-adjust
  • .glyphicon-tint
  • .glyphicon-edit
  • .glyphicon-share
  • .glyphicon-check
  • .glyphicon-move
  • .glyphicon-step-backward
  • .glyphicon-fast-backward
  • .glyphicon-backward
  • .glyphicon-play
  • .glyphicon-pause
  • .glyphicon-stop
  • .glyphicon-forward
  • .glyphicon-fast-forward
  • .glyphicon-step-forward
  • .glyphicon-eject
  • .glyphicon-chevron-left
  • .glyphicon-chevron-right
  • .glyphicon-plus-sign
  • .glyphicon-minus-sign
  • .glyphicon-remove-sign
  • .glyphicon-ok-sign
  • .glyphicon-question-sign
  • .glyphicon-info-sign
  • .glyphicon-screenshot
  • .glyphicon-remove-circle
  • .glyphicon-ok-circle
  • .glyphicon-ban-circle
  • .glyphicon-arrow-left
  • .glyphicon-arrow-right
  • .glyphicon-arrow-up
  • .glyphicon-arrow-down
  • .glyphicon-share-alt
  • .glyphicon-resize-full
  • .glyphicon-resize-small
  • .glyphicon-exclamation-sign
  • .glyphicon-gift
  • .glyphicon-leaf
  • .glyphicon-fire
  • .glyphicon-eye-open
  • .glyphicon-eye-close
  • .glyphicon-warning-sign
  • .glyphicon-plane
  • .glyphicon-calendar
  • .glyphicon-random
  • .glyphicon-comment
  • .glyphicon-magnet
  • .glyphicon-chevron-up
  • .glyphicon-chevron-down
  • .glyphicon-retweet
  • .glyphicon-shopping-cart
  • .glyphicon-folder-close
  • .glyphicon-folder-open
  • .glyphicon-resize-vertical
  • .glyphicon-resize-horizontal
  • .glyphicon-hdd
  • .glyphicon-bullhorn
  • .glyphicon-bell
  • .glyphicon-certificate
  • .glyphicon-thumbs-up
  • .glyphicon-thumbs-down
  • .glyphicon-hand-right
  • .glyphicon-hand-left
  • .glyphicon-hand-up
  • .glyphicon-hand-down
  • .glyphicon-circle-arrow-right
  • .glyphicon-circle-arrow-left
  • .glyphicon-circle-arrow-up
  • .glyphicon-circle-arrow-down
  • .glyphicon-globe
  • .glyphicon-wrench
  • .glyphicon-tasks
  • .glyphicon-filter
  • .glyphicon-briefcase
  • .glyphicon-fullscreen
  • .glyphicon-dashboard
  • .glyphicon-paperclip
  • .glyphicon-heart-empty
  • .glyphicon-link
  • .glyphicon-phone
  • .glyphicon-pushpin
  • .glyphicon-usd
  • .glyphicon-gbp
  • .glyphicon-sort
  • .glyphicon-sort-by-alphabet
  • .glyphicon-sort-by-alphabet-alt
  • .glyphicon-sort-by-order
  • .glyphicon-sort-by-order-alt
  • .glyphicon-sort-by-attributes
  • .glyphicon-sort-by-attributes-alt
  • .glyphicon-unchecked
  • .glyphicon-expand
  • .glyphicon-collapse-down
  • .glyphicon-collapse-up
  • .glyphicon-log-in
  • .glyphicon-flash
  • .glyphicon-log-out
  • .glyphicon-new-window
  • .glyphicon-record
  • .glyphicon-save
  • .glyphicon-open
  • .glyphicon-saved
  • .glyphicon-import
  • .glyphicon-export
  • .glyphicon-send
  • .glyphicon-floppy-disk
  • .glyphicon-floppy-saved
  • .glyphicon-floppy-remove
  • .glyphicon-floppy-save
  • .glyphicon-floppy-open
  • .glyphicon-credit-card
  • .glyphicon-transfer
  • .glyphicon-cutlery
  • .glyphicon-header
  • .glyphicon-compressed
  • .glyphicon-earphone
  • .glyphicon-phone-alt
  • .glyphicon-tower
  • .glyphicon-stats
  • .glyphicon-sd-video
  • .glyphicon-hd-video
  • .glyphicon-subtitles
  • .glyphicon-sound-stereo
  • .glyphicon-sound-dolby
  • .glyphicon-sound-5-1
  • .glyphicon-sound-6-1
  • .glyphicon-sound-7-1
  • .glyphicon-copyright-mark
  • .glyphicon-registration-mark
  • .glyphicon-cloud-download
  • .glyphicon-cloud-upload
  • .glyphicon-tree-conifer
  • .glyphicon-tree-deciduous
  • .glyphicon-cd
  • .glyphicon-save-file
  • .glyphicon-open-file
  • .glyphicon-level-up
  • .glyphicon-copy
  • .glyphicon-paste
  • .glyphicon-alert
  • .glyphicon-equalizer
  • .glyphicon-king
  • .glyphicon-queen
  • .glyphicon-pawn
  • .glyphicon-bishop
  • .glyphicon-knight
  • .glyphicon-baby-formula
  • .glyphicon-tent
  • .glyphicon-blackboard
  • .glyphicon-bed
  • .glyphicon-apple
  • .glyphicon-erase
  • .glyphicon-hourglass
  • .glyphicon-lamp
  • .glyphicon-duplicate
  • .glyphicon-piggy-bank
  • .glyphicon-scissors
  • .glyphicon-bitcoin
  • .glyphicon-btc
  • .glyphicon-xbt
  • .glyphicon-yen
  • .glyphicon-jpy
  • .glyphicon-ruble
  • .glyphicon-rub
  • .glyphicon-scale
  • .glyphicon-ice-lolly
  • .glyphicon-ice-lolly-tasted
  • .glyphicon-education
  • .glyphicon-option-horizontal
  • .glyphicon-option-vertical
  • .glyphicon-menu-hamburger
  • .glyphicon-modal-window
  • .glyphicon-oil
  • .glyphicon-grain
  • .glyphicon-sunglasses
  • .glyphicon-text-size
  • .glyphicon-text-color
  • .glyphicon-text-background
  • .glyphicon-object-align-top
  • .glyphicon-object-align-bottom
  • .glyphicon-object-align-horizontal
  • .glyphicon-object-align-left
  • .glyphicon-object-align-vertical
  • .glyphicon-object-align-right
  • .glyphicon-triangle-right
  • .glyphicon-triangle-left
  • .glyphicon-triangle-bottom
  • .glyphicon-triangle-top
  • .glyphicon-console
  • .glyphicon-superscript
  • .glyphicon-subscript
  • .glyphicon-menu-left
  • .glyphicon-menu-right
  • .glyphicon-menu-down
  • .glyphicon-menu-up
Títol de la targeta

Text de la targeta amb les cantonades arrodonides

<div class="card card-rounded">
	<div class="card-block">
		<h5 >Títol de la targeta</h5>
		<p >Text de la targeta amb les cantonades arrodonides.</p>
	</div>
</div>

Text en 2 columnes .cols2

Praesent euismod mauris ac congue tristique. Mauris ipsum magna, sodales eget imperdiet id, mattis sed sapien. Donec eu leo libero. Proin sem orci, laoreet ac porta sit amet, dignissim nec est. Nunc eget lorem velit. Sed volutpat dignissim libero, et bibendum dolor sagittis in. Nullam rhoncus fringilla neque, porta volutpat lacus auctor id. Aliquam non urna a odio egestas pellentesque nec a tortor. Vivamus pharetra eleifend mauris eu viverra. Duis id luctus lacus. Etiam libero odio, semper in justo nec, mollis aliquet elit. Nullam at nisl dui. Praesent ut sem commodo, viverra nisl accumsan, molestie lacus. Fusce eget hendrerit tellus. Nunc facilisis euismod justo vitae pretium. Etiam urna magna, vulputate at tincidunt eget, eleifend nec purus.

In leo felis, rutrum at accumsan sit amet, pulvinar nec libero. In ullamcorper et sapien eu vulputate. Cras venenatis vel est in consequat. Morbi dapibus odio ac lorem aliquet, et suscipit lacus congue. Donec efficitur lacinia interdum. Nulla ac euismod felis. Quisque iaculis risus lacus, vel auctor neque ornare eu. Curabitur id euismod lectus. Mauris lorem neque, pharetra euismod nisi quis, cursus consectetur neque.

Text en 3 columnes .cols3

Praesent euismod mauris ac congue tristique. Mauris ipsum magna, sodales eget imperdiet id, mattis sed sapien. Donec eu leo libero. Proin sem orci, laoreet ac porta sit amet, dignissim nec est. Nunc eget lorem velit. Sed volutpat dignissim libero, et bibendum dolor sagittis in. Nullam rhoncus fringilla neque, porta volutpat lacus auctor id. Aliquam non urna a odio egestas pellentesque nec a tortor. Vivamus pharetra eleifend mauris eu viverra. Duis id luctus lacus. Etiam libero odio, semper in justo nec, mollis aliquet elit. Nullam at nisl dui. Praesent ut sem commodo, viverra nisl accumsan, molestie lacus. Fusce eget hendrerit tellus. Nunc facilisis euismod justo vitae pretium. Etiam urna magna, vulputate at tincidunt eget, eleifend nec purus.

In leo felis, rutrum at accumsan sit amet, pulvinar nec libero. In ullamcorper et sapien eu vulputate. Cras venenatis vel est in consequat. Morbi dapibus odio ac lorem aliquet, et suscipit lacus congue. Donec efficitur lacinia interdum. Nulla ac euismod felis. Quisque iaculis risus lacus, vel auctor neque ornare eu. Curabitur id euismod lectus. Mauris lorem neque, pharetra euismod nisi quis, cursus consectetur neque.

Promedio (1 Voto)
Documentos
Mostrando el intervalo 1 - 20 de 47 resultados.
  • thumbnail
    Ahora mismo por

    {title}