Bootstrap主要功能

来源：互联网发布：hao123网址之家淘宝编辑：程序博客网时间：2024/05/22 04:44
Bootsrap学习笔记之二

<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>Bootstrap例子</title>  <meta name="viewport" content="width=device-width,initial-scale=1">  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">  <link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>  <script src="js/jquery-1.7.2.min.js"></script>  <script src="js/bootstrap.min.js"></script></head><body><h1 class="text-center"><em>Hello World!</em></h1><p class="lead text-center text-primary">测试段落<strong>this is test</strong> 完毕.</p><div class="row"><div class="col-md-4">占位4列</div><div class="col-md-4">占位4列</div><div class="col-md-4">占位4列</div></div><p class="text-center text-danger">测试段落<strong>this is test</strong> 完毕.</p><p class="text-center"><small>测试段落</small><strong>this is test</strong> 完毕.</p><<!--省略--><abbr title="你好提高课堂够了够了如果了两个">attr</abbr><!--地址写法--><address class="text-center"><strong>Twitter,Inc.</strong><br>795 Folsom Ave,Suite 600<br><abbr title="Phone">P:</abbr>(123) 456-7890</address><address class="text-center"><strong>Full Name</strong><br><a href="mailto:#">first.last@example.com</a></address><!--引用 --><blockquote><p>Please don't worry.This is test!</p><small>Someone famouse in<cite title="Source Title">Source Title</cite></small></blockquote><blockquote class="pull-right"><p>Please don't worry.This is test!</p><small>Someone famouse in<cite title="Source Title">Source Title</cite></small></blockquote><!--内联列表-->    <ul class="list-inline">    <li>test1</li>    <li>test2</li>    <li>test3</li>    </ul>    <dl>    <dt>hello gay</dt>    <dd>hello boy</dd>    </dl>    <dl class="dl-horizontal">    <dt>hello gay</dt>    <dd>hello boy</dd>    </dl>    <!--表格-->    <div>    <table class="table table-hover">    <thead>    <tr class="active">    <th>#</th>    <th>FirstName</th>    </tr>    </thead>    <tbody>    <tr class="danger">    <td>1</td>    <td>Jay</td>    </tr>    <tr class="success">    <td>2</td>    <td>Tom</td>    </tr>    </tbody>    </table>    </div>    <!--表单 -->    <form class="form-horizontal" role="from">    <div class="form-group">    <label for="inputEmail" class="col-sm-2 control-label">Email</label>    <div class="col-sm-6">    <input type="email" class="form-control" id="inputEmail" placeholder="Email">    </div>    </div>    <div class="form-group">    <label for="inputPassword" class="col-sm-2 control-label">Password</label>    <div class="col-sm-6">    <input type="password" class="form-control" id="inputPassword" placeholder="Password">    </div>    </div>    <div class="form-group">    <label class="col-sm-2 control-label">你是好人吗？</label>    <div class="col-sm-offset-2 radio">    <label>    <input type="radio" name="people" id="optionRadios1" value="option1" checked="checked">    是的，我是好人。    </label>    <label>    <input type="radio" name="people" id="optionRadios2" value="option2">    不是，我是坏人。    </label>    </div>    </div>    <div class="form-group">    <label class="col-sm-2 control-label">入学年份？</label>    <div class="col-sm-6">    <select  class="form-control">    <option>2014</option>    <option>2013</option>    <option>2012</option>    </select>    </div>    </div>    <div class="form-group">    <div class="col-sm-offset-2 col-sm-6">    <div class="checkbox">    <label>    <input type="checkbox"> Remember me    </label>    </div>    </div>    </div>    <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span>Sign in</button>    </div>    </div>    </form></body></html>
0 0