Photos by Trish McGinity
@link: #0087CC; @linkHover: #0087CC; @border: #608FAF; @navbarBackground: #D6E7F2; @navbarHover: #333333; @dropdownBackground: #EFF5F9; @dropdownHover: #D6E7F2; @sidebarBackground: #EFF5F9; @headerDarkBackground: #C3EEB7; @headerMediumBackground: #D6F3CD; @headerLightBackground: #ffffff; @iconLargeYPosition: -263px; @iconYPosition: -718px;
@import '@colors';
a { color: @link }
a:hover { color: @linkHover }
.navbar div > ul > li {
border: 1px solid @border;
background-color: @navbarBackground;
border-top: 0;
}
.navbar-inner {
border-top: 1px solid @border;
}
<macrodef name="create-css">
<attribute name="theme"/>
<sequential>
<echo message="Compiling LESS files :: Creating '@{theme}' Theme"/>
<copy description="Setup themes for processing" todir="${build}/themes">
<fileset dir="${basedir}/web/css/UIv9/themes" includes="@{theme}-colors.less"/>
</copy>
<concat destfile="${build}/themes/@{theme}.less" eol="dos" force="no">
<fileset dir="${basedir}/web/css/UIv9/themes">
<include name="@{theme}-colors.less"/>
<include name="theme.less"/>
</fileset>
</concat>
<replace file="${build}/themes/@{theme}.less" token="@import '@colors';" value=""/>
<wro4j processor="lessCss" dir="${build}/themes" todir="${basedir}/web/css/UIv9"
target-groups="@{theme}"/>
<delete dir="${basedir}/web/css/UIv9" includes="**-colors.css"/>
</sequential>
</macrodef>
<macrodef name="wro4j">
<attribute name="processor"/>
<attribute name="wro-file" default="wro.xml"/>
<attribute name="target-groups"/>
<attribute name="dir"/>
<attribute name="todir"/>
<sequential>
<exec executable="java" failonerror="true">
<arg value="-jar"/>
<arg value="../common/lib-ext/wro4j-runner-1.4.4-jar-with-dependencies.jar"/>
<arg value="--wroFile"/>
<arg value="@{wro-file}"/>
<arg value="--contextFolder"/>
<arg value="@{dir}"/>
<arg value="--targetGroups"/>
<arg value="@{target-groups}"/>
<arg value="--destinationFolder"/>
<arg value="@{todir}"/>
<arg value="-c"/>
<arg value="@{processor}"/>
</exec>
</sequential>
</macrodef>
{ zoom: 1; position: relative } for negative top marginstable-layout: fixed so td widths would workposition: fixed to fix nav width
Designing a different interface for every device is impossible.
<body>
<div class="container">
...
</div>
</body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
<div class="row">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<div class="row-fluid">
<div class="span6">...</div>
<div class="span6">...</div>
</div>
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap: Getting Started</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" >
</head>
<body>
<h1>Responsive Bootstrap</h1>
</body>
</html>
<h1>h1. Heading 1</h1> <h2>h2. Heading 2</h2> <h3>h3. Heading 3</h3> <h4>h4. Heading 4</h4> <h5>h5. Heading 5</h5> <h6>h6. Heading 6</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous <cite title="Source Title">Source Title</cite></small> </blockquote>
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<ul> <li>Lorem ipsum dolor sit amet</li> ... </ul>
<table class="table"> … </table>
<table class="table table-striped"> … </table>
<table class="table table-bordered"> … </table>
<table class="table table-hover"> … </table>
<table class="table table-condensed"> … </table>
<form>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</form>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
...
</form>
<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
<input class="input-mini" type="text" placeholder=".input-mini"> <input class="input-small" type="text" placeholder=".input-small"> <input class="input-medium" type="text" placeholder=".input-medium"> <input class="input-large" type="text" placeholder=".input-large"> <input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"></select> <select class="span2"></select> <select class="span3"></select>
<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-polaroid">
<i class="icon-search"></i> <i class="icon-search icon-white"></i> <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> <a class="btn btn-small" href="#"><i class="icon-star"></i></a> <span class="add-on"><i class="icon-envelope"></i></span> <input class="span2" id="inputIcon" type="text">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
<div class="alert alert-success"> </div>
You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript.
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<a href="#"
class="btn btn-large btn-danger"
rel="popover"
data-content="And here's some amazing content. It's very engaging. right?"
data-original-title="A Title">
Click to toggle popover
</a>
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 854px) {
body.mainPage.click-thru {
padding: 0;
}
}
/* iPad (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body.mainPage.click-thru {
padding-top: 50px;
}
}
