"E-mail Interface"
Bootstrap 3.0.0 Snippet by RameshSundar

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="btn-compose pull-left"> <a type="button" class="btn btn-danger navbar-btn" href="#compose" role="tab" data-toggle="tab"> <span class="glyphicon glyphicon-pencil"></span> Compose</a> </div> <ul class="nav navbar-nav"> <li> <a href="#inbox" role="tab" data-toggle="tab"> Inbox <span class="label label-success">10</span> </a> </li> <li><a href="#sent-mail" role="tab" data-toggle="tab">Sent mail</a> </li> <li><a href="#draft" role="tab" data-toggle="tab">Draft</a> </li> <li><a href="#trash" role="tab" data-toggle="tab">Trash</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Username</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="tab-content"> <div class="tab-pane active" id="inbox"> <div class="container"> <div class="content-container clearfix"> <div class="col-md-12"> <h1 class="content-title">Inbox</h1> <input type="search" placeholder="Search Mail" class="form-control mail-search" /> <ul class="mail-list"> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">You have ten more subscriptions click her...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="compose"> <div class="container"> <div class="content-container clearfix"> <h1 class="content-title">Compose</h1> <div class="col-md-12"> <div class="form-group"> <input id="tokenfield" type="text" class="form-control" placeholder="To" /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Cc" /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Bcc" /> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Subject" /> </div> <textarea class="form-control" placeholder="message"></textarea> <div class="btn-send"> <button class="btn btn-success btn-lg"><span class="glyphicon glyphicon-send"></span> Send</button> </div> </div> </div> </div> </div> <div class="tab-pane" id="sent-mail"> <div class="container"> <div class="content-container clearfix"> <div class="col-md-12"> <h1 class="content-title">Sent Mail</h1> <input type="search" placeholder="Search Mail" class="form-control mail-search" /> <ul class="mail-list"> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">You have ten more subscriptions click her...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="draft"> <div class="container"> <div class="content-container clearfix"> <div class="col-md-12"> <h1 class="content-title">Draft</h1> <input type="search" placeholder="Search Mail" class="form-control mail-search" /> <ul class="mail-list"> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">You have ten more subscriptions click her...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="trash"> <div class="container"> <div class="content-container clearfix"> <div class="col-md-12"> <h1 class="content-title">Trash</h1> <input type="search" placeholder="Search Mail" class="form-control mail-search" /> <ul class="mail-list"> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">You have ten more subscriptions click her...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> <li> <a href=""> <span class="mail-sender">You Tube</span> <span class="mail-subject">New subscribers!</span> <span class="mail-message-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil eveniet ipsum nisi? Eaque odio quae debitis saepe explicabo alias sit tenetur animi...</span> </a> </li> </ul> </div> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700); body { background-color:#F7F7F7; font-family: 'Open Sans', sans-serif; } /*Navbar*/ .navbar-default { background-color:#fff; border-bottom-color:#E3E3E3; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{ background-color:transparent!important; } .navbar-default .btn-compose { padding-right:10px; border-right:1px solid #F0F0F0; } /*Forms setup*/ .form-control { border-radius:0; box-shadow:none; height:auto; } .float-label{ font-size:10px; } input[type="text"].form-control, input[type="search"].form-control{ border:none; border-bottom:1px dotted #CFCFCF; } textarea { border:1px dotted #CFCFCF!important; height:130px!important; } /*Content Container*/ .content-container { background-color:#fff; padding:35px 20px; margin-bottom:20px; } h1.content-title{ font-size:32px; font-weight:300; text-align:center; margin-top:0; margin-bottom:20px; font-family: 'Open Sans', sans-serif!important; } /*Compose*/ .btn-send{ text-align:center; margin-top:20px; } /*mail list*/ ul.mail-list{ padding:0; margin:0; list-style:none; margin-top:30px; } ul.mail-list li a{ display:block; border-bottom:1px dotted #CFCFCF; padding:20px; text-decoration:none; } ul.mail-list li:last-child a{ border-bottom:none; } ul.mail-list li a:hover{ background-color:#DBF9FF; } ul.mail-list li span{ display:block; } ul.mail-list li span.mail-sender{ font-weight:600; color:#8F8F8F; } ul.mail-list li span.mail-subject{ color:#8C8C8C; } ul.mail-list li span.mail-message-preview{ display:block; color:#A8A8A8; } .mail-search{ border-bottom-color:#7FBCC9!important; }
/** * FloatLabels * Version: 1.0 * URL: http://clubdesign.github.io/floatlabels.js/ * Description: * Author: Marcus Pohorely ( http://www.clubdesign.at ) * Copyright: Copyright 2013 / 2014 http://www.clubdesign.at */

Related: See More


Questions / Comments: