比较好看的一套前端框架（html）

<div class="row "> <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4"> <h1 class="page-title txt-color-blueDark"> <i class="fa fa-desktop fa-fw"></i> UI 组件 <span> > 普通组件 </span> </h1> </div> <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8"> <ul id="sparks" > <li class="sparks-info"> <h5> 个人收入 <span class="txt-color-blue">$47,171</span></h5> <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm"> 1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471 </div> </li> <li class="sparks-info"> <h5> 站点流量 <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5> <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm"> 110,150,300,130,400,240,220,310,220,300, 270, 210 </div> </li> <li class="sparks-info"> <h5> 站点营收 <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5> <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm"> 110,150,300,130,400,240,220,310,220,300, 270, 210 </div> </li> </ul> </div> </div> <section id="widget-grid" class=""> <div class="row"> <article class="col-sm-12"> <div class="alert alert-warning"> <button class="close" data-dismiss="alert">×</button> <i class="fa fa-fw fa-warning"></i> <strong>警告</strong> 您该月的交通费已经超出上限. </div> <div class="alert alert-success"> <button class="close" data-dismiss="alert">×</button> <i class="fa fa-fw fa-check"></i> <strong>成功</strong> 添加页面成功. </div> <div class="alert alert-info fade in"> <button class="close" data-dismiss="alert">×</button> <i class="fa fa-fw fa-info"></i> <strong>提示</strong> 您有198条未读短信. </div> <div class="alert alert-danger fade in"> <button class="close" data-dismiss="alert">×</button> <i class="fa fa-fw fa-times"></i> <strong>错误</strong> 任务添加失败. </div> </article> <!-- end widgetGridCol --> </div> <!-- end widgetGridRow --> <div class="row"> <article class="col-sm-12"> <div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-x" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-sortable="false" ) > <header> <span class="widget-icon"><i class="fa fa-align-justify"></i></span> <h2>标准进度条</h2> </header> <div> <div class="jarviswidget-editbox"> </div> <div class="widget-body "> <p class="alert alert-info no-margin"> 所有的进度条都包含一个基本样式 <code>.progress</code>. 并可以通过以下样式控制进度条的大小 <code>.progress-xs</code>,<code>.progress-sm</code>, <code>.progress-lg</code> 或者不用添加样式，保持默认大小. </p> <div class="row "> <div class="col-sm-12 "> <h3>进度动态变化的进度条</h3> <p><span class="label bg-color-darken txt-color-white">JS required</span> 这个小巧的动画进度条需要CSS样式和javascript的支持</p> <p>你只需要简单的在<strong>.progress-bar</strong>样式后面，添加以下属性值<code>aria-valuetransitiongoal="25".</code></p> <div class="row "> <div class="col-sm-6 "> <p>添加以下样式，可以使进度条右对齐<code>.progress .right</code></p> <div class="well no-padding "> <div class="bar-holder"> <div class="progress right" rel="tooltip" data-original-title="25%" data-placement="top"> <div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25"></div> </div> </div> <div class="bar-holder"> <div class="progress right" > <div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div> </div> </div> <div class="bar-holder"> <div class="progress right" > <div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75"></div> </div> </div> <div class="bar-holder"> <div class="progress right" > <div class="progress-bar bg-color-redLight" aria-valuetransitiongoal="100"></div> </div> </div> </div> </div> <div class="col-sm-6 "> <p>默认是左对齐.</p> <div class="well no-padding "> <div class="bar-holder"> <div class="progress " > <div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25"></div> </div> </div> <div class="bar-holder"> <div class="progress " > <div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div> </div> </div> <div class="bar-holder"> <div class="progress " > <div class="progress-bar bg-color-blue" aria-valuetransitiongoal="75"></div> </div> </div> <div class="bar-holder"> <div class="progress " > <div class="progress-bar bg-color-redLight" aria-valuetransitiongoal="100"></div> </div> </div> </div> </div> </div> </div> </div> <hr class="simple"> <div class="row "> <div class="col-sm-12 "> <h3><small>继续介绍进度动态变化的进度条...</small></h3> <div class="row "> <div class="col-sm-12 col-md-6 col-lg-3"> <p>在进度条基本样式上，添加一个覆盖的div样式<code>.progress .vertical</code></p> <div class="well no-padding "> <ul class="vertical-bars"> <li> <div class="progress vertical" > <div class="progress-bar bg-color-teal" aria-valuetransitiongoal="25"></div> </div> </li> <li> <div class="progress vertical" > <div class="progress-bar bg-color-blueLight" aria-valuetransitiongoal="50"></div> </div> </li> <li> <div class="progress vertical" > <div class="progress-bar b