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@example.com</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>

媒体对象的使用

bootstrap基础样式使用的更多相关文章

bootstrap基础样式学习（一）
1.按钮btn .btn 按钮基础的样式 .btn-default 白底黑子的按钮 .btn-danger/warning/success/info/primary .btn-lg/sm/xs 按钮大 ...
bootstrap基础样式学习（二）——栅格
(1)最外层必须使用容器 div.container或 div.container-fluid (2)容器可以放置任何内容,若想使用栅格系统必须用 div.row div.container > ...
<<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
Bootstrap <基础二十九>面板（Panels）
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
Bootstrap<基础二十七> 多媒体对象（Media Object）
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
Bootstrap <基础二十五>警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
Bootstrap<基础十七>导航栏
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

随机推荐

cocos2dx CCTextFieldTTF
CCTextFieldTTF是一个提供文本输入的控件. 先上个简单的例子 CCSize size = __winSize; CCTextFieldTTF* textEdit = CCTextField ...
Android 开发佳站【转】
Android控件拖动这里演示控件拖动的动画: 原理就是响应控件的Touch事件,在Touch事件中对移动进行处理,注意,一定要在布局文件中设置控件的 android:clickable=& ...
纯代码自己主动屏幕适配iPhone button
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2h1bmdlc2hpaHVhdGlhbg==/font/5a6L5L2T/fontsize/400/fil ...
ASP.NET WebApi 简单记录
//获取当前提交过来的Request对象 var request = System.Web.HttpContext.Current.Request;
c/c++ double的数字转成字符串后可以有效的避免精度要求不高的数
char n[100]; sprintf(n,"%lf",db);
Ubuntu 14.10 编译 qt4.8.6
0. 假设你已经可以在上面写基本的C++程序.(即:c/C++开发环境已经就绪)1. $ sudo apt-get build-dep libqt4-dev 2. $ sudo apt-get ins ...
Problem B The Blocks Problem（vector的使用）
题目链接:Problem B 题意:有n块木块,编号为0~n-1,要求模拟以下4种操作(下面的a和b都是木块编号) 1. move a onto b: 把a和b上方的木块全部归位,然后把a摞在b上面. ...
BZOJ 1034: [ZJOI2008]泡泡堂BNB( 贪心 )
贪心...用最弱的赢最弱的,用最强的赢最强的,否则用最弱的和最强的比... (贴个官方题解:将双方的选手均按从强到弱排序,然后第一次扫描尽可能用当前剩下的选手中能赢对手当前最强选手中最弱的一个去赢得胜 ...
[IOI1996] USACO Section 5.3 Network of Schools(强连通分量）
nocow上的题解很好. http://www.nocow.cn/index.php/USACO/schlnet 如何求强连通分量呢?对于此题,可以直接先用floyd,然后再判断. --------- ...
5.7.1.3 Global 对象的属性
Global对象还包含了一些属性,例如,特殊的值undefined.NaN以及Infinity都是Global对象的属性.此外,所有原生引用类型的构造函数,像Object和Function,也都是Gl ...

bootstrap基础样式使用

bootstrap基础样式使用的更多相关文章

随机推荐

热门专题