bootstrap基础样式使用

<small>
为了给段落添加强调文本，则可以添加 class="lead"

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>

<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>

<p class="text-primary">本行内容带有一个 warning class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

样式title  文本提示

<blockquote>引用 <cite title="tishi" class="pull-right"> 放在右边  缩小字体

ul class   

背景样式class= alert-success

滚动条 <pre class="pre-scrollable "

表格
 <table class="table table-hover"> .table-striped 纹理表格 table-responsive 响应式表格
        <thead>
          <tr>
            <th>#</th>
            <th>Firstname</th>
          </tr>
        </thead>
        <tbody>

表格紧凑 table-condensed
tr td th 样式 active success info waring 

表单 Bootstrap 提供了下列类型的表单布局：

垂直表单（默认）
内联表单
水平表单

向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<form role="form">
	<div class="form-control">
		<input class="form-control" placeholder="chuli...">
	</div>

灰色文字
 <p class="help-block">这里是块级帮助文本的实例。</p>
</form>

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">名字</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname"
            placeholder="请输入名字">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">姓</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname"
            placeholder="请输入姓">
      </div>
   </div>

栅格布局 class="col-sm-2
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

text、password、datetime、datetime-local、date、month、time、week、number、email、url、

search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

有一些样式在ie 火狐上不支持

checkbox-inline

 <select multiple class="form-control">
         <option>1</option>

纯静态文本
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>

控制文本大小
class="form-control input-sm" 

控制显示隐藏
<div class="hidden"> show

按钮表单
btn-block  百分百方大

   <button class="btn btn-block" type="button">yuanshidaxiao</button>

.btn-lg	制作一个大按钮	尝试一下
.btn-sm	制作一个小按钮	尝试一下
.btn-xs	制作一个超小按钮
.active

图片
   .img-rounded	为图片添加圆角 (IE8 不支持)	尝试一下
.img-circle	将图片变为圆形 (IE8 不支持)	尝试一下
.img-thumbnail	缩略图功能	尝试一下
.img-responsive	图片响应式 (将很好地扩展到父元素)

灰色样式文本
  <p class="text-muted">该段落使用了样式 "text-muted"。</p>   

显示下拉<p class="caret"> close clearfix清除浮动 center-block .pull-right

显示图标
	<a type="button" class="btn btn-primary btn-xs"  href="#">
  <span class="glyphicon glyphicon-user"></span> 用户
</a>
style="text-shadow: black 5px 3px 3px;阴影

常用图标设置
<a type="button" class="btn btn-primary btn-lg"  href="#">
<span class="glyphicon glyphicon-remove" ></span>camera
</a>

search music  ok  user cloud pencil circle暂停 repeat重复  trash删除
file volume-off静音 volume-down音量 camera glyphicon打印机 video picture

arrow-up 向上 arrow-down left right  share-alt转发 resize-full 全屏  resize-small

thumbs-down 踩 thumbs-up顶  glyphicon glyphicon-save保存下载

下拉菜单的使用

<li role="presentation" class="dropdown-header">下拉菜单标题</li>
下拉菜单
例子：
<div class="dropdown">
	<button class="btn dropdown-toggle" data-toggle="dropdown">
		click<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li>xianzhe1</li>
		<li>xianzhe1</li>
		<li class="divider"></li>
		<li class="alert-success">xianzhe3</li>
		<li class="alert-success"><a href="#">xianzhe3</a></li>
	</ul>

<div class="btn-group-vertical">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>

设置按钮大小btn-lg .btn-large、.btn-sm 或 .btn-xs。

分割线按钮
<div class="btn-group">
   <button type="button" class="btn btn-default">默认</button>
   <button type="button" class="btn btn-default dropdown-toggle"
      data-toggle="dropdown">
      <span class="caret"></span>

注意这个  可以隐藏文字
      <span class="sr-only">切换下拉菜单</span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">功能</a></li>
      <li><a href="#">另一个功能</a></li>
      <li><a href="#">其他</a></li>
      <li class="divider"></li>
      <li><a href="#">分离的链接</a></li>
   </ul>
</div>

导航栏
<div class="btn-group">
   <button type="button" class="btn btn-default">默认</button>
   <button type="button" class="btn btn-default dropdown-toggle"
      data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">切换下拉菜单</span>
   </button>

控制div 在同一行  <div class="container">
<div class="row" style="margin-left:50px; margin-top:200px">
<div class="btn-group dropup">  需要相同的样式div

改变输入框的大小
 <div class="input-group">  使用方式
         <span class="input-group-addon">$</span>
         <input type="text" class="form-control">
         <span class="input-group-addon">.00</span>
      </div>
.input-group-lg、input-group-sm、input-group-xs）

垂直布局nav-stacked   自适应布局 导航 nav-justified

固定菜单样式 navbar-fixed-bottom   倒置颜色navbar-inverse

<ul class="nav nav-pills nav-justified navbar-fixed-bottom navbar-inverse">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li class="active"><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>
折叠菜单 需要下载插件

导航中的文本，控件
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <form class="navbar-form navbar-left" role="search">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn-default">提交按钮</button>
      </form>
      <button type="button" class="btn btn-default navbar-btn">
         导航栏按钮
      </button>
   </div>
</nav>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <p class="navbar-text">Signed in as Thomas</p>
   </div>
</nav>

面包屑
class="breadcrumb"

分页
<ul class="pagination">
  <li><a href="#">«</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="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>  设置大小 pagination-sm

翻页
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

标签label-danger

徽章 <a href="#">Mailbox <span class="badge">50</span></a>

超大屏幕 class="jumbotron"

图文操作
 <div class="col-sm-2 col-md-4">
      <a href="#" class="thumbnail">
         <img src="1.png"
         alt="通用的占位符缩略图">
      </a>
	   <div class="caption">
         <h3>缩略图标签</h3>
         <p>一些示例文本。一些示例文本。</p>
         <p>
            <a href="#" class="btn btn-primary" role="button">
               按钮
            </a>
            <a href="#" class="btn btn-default" role="button">
               按钮
            </a>
         </p>
   </div>

显示隐藏
<div class="alert alert-success alert-dismissable">
   <button type="button" class="close" data-dismiss="alert"
      aria-hidden="true">
      ×
   </button>
   成功！很好地完成了提交。
</div>

提示超链接
<div class="alert alert-success">
   <a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>

进度条
<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
      <span class="sr-only">40% 完成</span>
   </div>
</div>

设置条纹进度条progress-striped   active动画

面板的样式使用，  脚注  <div class="panel-footer">面板脚注</div> panel-primary"  颜色
<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
         带有 title 的面板标题
      </h3>
   </div>
   <div class="panel-body">
      面板内容
   </div>
</div>

样式带有表格
<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
   <table class="table">
      <th>产品</th><th>价格 </th>
      <tr><td>产品 A</td><td>200</td></tr>
      <tr><td>产品 B</td><td>400</td></tr>
   </table>

添加面板
 <ul class="list-group">
      <li class="list-group-item">免费域名注册</li>
      <li class="list-group-item">免费 Window 空间托管</li>
      <li class="list-group-item">图像的数量</li>
      <li class="list-group-item">24*7 支持</li>
      <li class="list-group-item">每年更新成本</li>
   </ul>
</div>
媒体对象的使用