Asta se face folosind shape-outside:circle(); <div> <div style=”width: 300px; height: 300px; border-radius: 50%; float: left; overflow: hidden; margin: 10px; shape-outside: circle();”> <img style=”width: 100%;” src=”img.png” /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu bibendum nunc, sed accumsan est. Vivamus lobortis purus quis elit </p> <div> Lorem ipsum dolor sit amet, consectetur adipiscing […]
Text imagine
HELLO WORLD !
FontAwesome
FontAwesome va ofera pictograme vectoriale scalabile, care pot fi personalizate instantaneu – dimensiunea, culoarea, umbra, si tot ce se poate face cu puterea CSS. Configurarea FontAwesome se poate realiza prin downloadarea directorului FontAwesome de aici , inserarera acestuia in proiect si adaugarea in HEAD a liniei : <link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”> Folosirea FontAwesome este la fel […]
Liste
Unu Doi Trei Important Patru Cinci Unu Doi Trei Important Patru Cinci
Bootstrap responsive embed
embed-responsive-16by9 embed-responsive-4by3 <div class=”embed-responsive [responsivetype]”> <iframe class=”embed-responsive-item” src=”https://www.youtube.com/embed/e6cSOtcc6l0?rel=0&showinfo=0″ frameborder=”0″ allowfullscreen></iframe> </div> [responsivetype] poate fi embed-responsive-4by3 sau embed-responsive-16by9 Pentru alte [responsivetype] adaptati CSS-ul dupa modelul : .embed-responsive-square { border: 1px solid #eee; padding-bottom: 100%; position: relative; }
Carusel (image slider)
Previous Next <div data-ride="carousel" class="carousel slide" id="carousel-example-generic"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li> <li data-slide-to="1" data-target="#carousel-example-generic" class=""></li> <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li> <li data-slide-to="3" data-target="#carousel-example-generic" class=""></li> </ol> <div role="listbox" class="carousel-inner"> <div class="item active"> <img alt="First slide" src="http://www.mommypotamus.com/wp-content/uploads/2012/03/431589_66152372.jpg" data-holder-rendered="true"> </div> <div class="item"> <img alt="Second slide" src="http://diamondpages.co.za/wpimages/wpe6693555_05_06.jpg" data-holder-rendered="true"> </div> <div class="item"> <img alt="Third slide" src="http://www.westlandsdentalstudio.co.uk/images/facial.jpg" data-holder-rendered="true"> </div> <div […]
Panouri
Titlul panoului Continutul panoului Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus risus, tempor dignissim sodales a, dignissim et ex. Cras egestas consequat rhoncus. Nam fringilla pellentesque nunc non hendrerit. Aliquam condimentum tincidunt tortor, in pellentesque tortor molestie nec. Donec cursus egestas lacus, vel mollis urna lacinia quis. Cum sociis natoque penatibus et […]
Bara de navigare
Tab-uri
Acasa Profil Mesaje <ul role="tablist" class="nav nav-tabs"> <li class="active" role="presentation"><a href="#">Acasa</a></li> <li role="presentation"><a href="#">Profil</a></li> <li role="presentation"><a href="#">Mesaje</a></li> </ul> In loc de nav-tabs mai merge nav-pills
Alerte
Mesaj de alerta <div role="alert" class="alert alert-[type]"> Mesaj de alerta </div> [type] – una din variantele : default, primary, success, info, warning, danger CSS pentru alte tipuri : .alert-facebook { background-image: -webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%); background-image: -o-linear-gradient(top,#f2dede 0,#e7c3c3 100%); background-image: -webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3)); background-image: linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff2dede’,endColorstr=’#ffe7c3c3′,GradientType=0); background-repeat: repeat-x; border-color: #dca7a7; }