一、列表去除样式和横排排列 classs=“list-unstyled”,“list-inline”

二、【表格】.table 类指定基本样式,.table-striped 条纹样式,.table-bordered 类为边框样式,.table-hover 类带鼠标悬停样式,.table-condensed 类紧凑样式。

状态类(行或单元格设置颜色):active,success,info,warning,info。

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格.

响应式表格: 会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

三、【按钮】

1. 基本样式,btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active、disabled(禁用)

2. 展现形式,btn-link、btn-block(块形)、close、btn-outline(线性)  btn-circle(圆形)btn-rounded(圆角)

3. 尺寸样式,.btn-lg(大)、.btn-sm(小) 、.btn-xs(很小) 。

4.3D样式, dim类

5.下拉按钮组

<div class="btn-group">
    <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">操作 <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="buttons.html#">置顶</a></li>
      <li><a href="buttons.html#">修改</a></li>
      <li><a href="buttons.html#">禁用</a></li>
      <li class="divider"></li>//分割线

      <li><a href="buttons.html#">删除</a></li>
    </ul>
</div>

6.带图标的按钮

<button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;提交</button>
<button class="btn btn-success " type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span></button>
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">警告</span></button>
<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;百度地图</button>

<a class="btn btn-success">
  <i class="fa fa-weixin"> </i> 分享到微信</a>
<a class="btn btn-success btn-outline">
  <i class="fa fa-qq"> </i> 使用QQ账号登录</a>

<a class="btn btn-white btn-bitbucket">
  <i class="fa fa-user-md"></i></a>
<a class="btn btn-white btn-bitbucket">
  <i class="fa fa-group"></i>
</a>
<a class="btn btn-white btn-bitbucket">
  <i class="fa fa-wrench"></i>
</a>
<a class="btn btn-white btn-bitbucket">
  <i class="fa fa-exchange"></i>
</a>
<a class="btn btn-white btn-bitbucket">
  <i class="fa fa-check-circle-o"></i>
</a>
<a class="btn btn-white btn-bitbucket">
  <i class="fa fa-road"></i>
</a>
<a class="btn btn-white btn-bitbucket">
  <i class="fa fa-ambulance"></i>
</a>
<a class="btn btn-white btn-bitbucket">
  <i class="fa fa-star"></i> 收藏
</a>

四、【文本】

1. 文本对齐类,text-left,text-center,text-right,text-justify(两端对齐),text-nowrap(禁止单元格内容换行)

2. 文本大小写类,text-lowercase,text-uppercase,text-capitalize

3.内联文本,使用<mark> 标签表示标注文本,<del>删除,<s>无用,<ins>插入,<u>下划线,<small>小号(父容器字体大小的 85%),<strong>着重,<em>斜体。

4.缩略语类,为 <abbr> 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例:<abbr title="attribute" class="initialism">attr</abbr>。

五、【表单】

1.内联表单,<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

2.所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。form-group,input-group,control-group,例子:

<form class="form-inline">
  <div class="form-group">
    <label>电子邮件</label>
    <input type="email" class="form-control" placeholder="请输入您的电子邮件">
  </div>
  <div class="form-group">
    <label>编号</label>
    <input type="number" class="form-control" placeholder="请输入您的编号">
  </div>
  <div class="input-group">
    <label class="input-group-addon">¥</label>
    <input type="number" class="form-control" placeholder="输入价钱">
  </div>
</form>

图例如下:全部水平放置

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label" >电子邮件</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="请输入您的电子邮件">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" >密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" placeholder="请输入您的电子邮件">
    </div>
  </div>
</form>

图例:输入框和它前面的文字水平

3.复选框和单选框,用法一样(.radio、.radio-inline、.checkbox、.checkbox-inline)

<div class="checkbox">
  <label>
    <input type="checkbox">体育
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" disabled>科学
  </label>
</div>

图例:

4. 水平排列的表单。通过为表单添加 .form-horizontal 类改变 .form-group 的行为,使其表现为栅格系统中的行(row)

col-sm-2 水平栅格的两列

col-sm-10水平栅格的十列

5.下拉列表

<select class="form-control">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

6.校验状态(错误,成功,警告).has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

<div class="form-group has-success">
   <label class="col-sm-2 control-label" >密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" placeholder="请输入您的电子邮件">
    </div>
</div>

图例:

7.添加额外的图标:  plyphicon-ok (成功状态) plyphicon-warning-sign(警告状态) plyphicon-remove(错误状态)

控制大小:input-lg(大)  input-sm(小)

<div class="form-group has-error has-feedback">
    <label class="control-label" >电子邮件</label>
    <input type="email" class="form-control input-lg" placeholder="请输入您的电子邮件">
    <span class="plyphicon plyphicon-remove form-control-feedback"></span>
</div>

8.图片:img-rounded(圆角矩形)img-circle(椭圆)thumbnail(加边框的矩形)img-responsive(响应式的格式)

  <img src="img/a1.jpg" alt="图片" class="img-rounded img-responsive">
  <img src="img/a2.jpg" alt="图片" class="img-circle">
  <img src="img/a3.jpg" alt="图片" class="img-thumbnail">

9. bootstrap用于使得页面自适应移动设备的声明语句

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">

10.栅格系统 12列  超小屏幕(<768px)小屏幕(<=768px   sm)中等屏幕(>=992px   md)大屏幕(>=1200px  lg)

<div class="container-fluid">
   <div class="row">
    <div class="col-sm-1 a">1</div>
    <div class="col-sm-1 a">2</div>
        .

        .

        .
    <div class="col-sm-1 a">11</div>
    <div class="col-sm-1 a" >12</div>
  </div>

</div>

图例:

<div class="col-lg-3 col-md-4 col-sm-6 a" >12</div>//意味着当缩小屏幕,有4列,然后3列,2列依次减小

10.1 偏移

<div class="row">//

  <div class="col-sm-8 a" >12</div>

  <div class="col-sm-3 col-sm-offset-1 a" >12</div>//向右偏移一格

</div>

10.2 嵌套

10.3 交换

col-sm-push-5  //向右移动5个位置

col-sm-pull-7 //向左移动7个位置

六.搜索框

<div class="input-group">
  <input type="text" placeholder="查找客户" class="input form-control">
  <span class="input-group-btn">
    <button type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
  </span>
</div>

七.提示notification

代码:

<div class="tooltip-demo">
  <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="left" data-content="这里是提示内容">左侧提示</button>
  <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="这里是提示内容">顶部提示</button>
  <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="这里是提示内容">底部提示</button>
  <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="right" data-content="这里是提示内容">右侧提示
  </button>
</div>

加一个js文件:<script src="js/content.min.js?v=1.0.0"></script>

 八.使用 Fancybox  插件实现图片的美化展示

1.额外js文件的引入

<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script>
  $(document).ready(function(){$(".fancybox").fancybox({openEffect:"none",closeEffect:"none"})});
</script>

2.额外CSS的引入

<link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">

3.html代码

<div class="ibox-content">
  <a class="fancybox" href="img/p1.jpg" title="图片1">
    <img alt="image" src="img/p_big1.jpg" />
  </a>
  <a class="fancybox" href="img/p2.jpg" title="图片2">
    <img alt="image" src="img/p_big2.jpg" />
  </a>
  <a class="fancybox" href="img/p3.jpg" title="图片3">
    <img alt="image" src="img/p_big3.jpg" />
  </a>
        。。。
  <a class="fancybox" href="img/p2.jpg" title="图片8">
    <img alt="image" src="img/p_big2.jpg" />
  </a>
</div>

九.电子相册滑动播放功能

1.额外js文件的引入

<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>

2.额外CSS的引入

<link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">

<link href="css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">

3.html代码

<div class="lightBoxGallery">
  <a href="img/p_big1.jpg" title="图片" data-gallery=""><img src="img/p1.jpg"></a>
  <a href="img/p_big2.jpg" title="图片" data-gallery=""><img src="img/p2.jpg"></a>
  <a href="img/p_big3.jpg" title="图片" data-gallery=""><img src="img/p3.jpg"></a>
  <a href="img/p_big1.jpg" title="图片" data-gallery=""><img src="img/p1.jpg"></a>
  <a href="img/p_big2.jpg" title="图片" data-gallery=""><img src="img/p2.jpg"></a>
  <a href="img/p_big3.jpg" title="图片" data-gallery=""><img src="img/p3.jpg"></a>
  <a href="img/p_big1.jpg" title="图片" data-gallery=""><img src="img/p1.jpg"></a>

</div>

<div id="blueimp-gallery" class="blueimp-gallery">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="close">×</a>
  <a class="play-pause"></a>
  <ol class="indicator"></ol>
</div>

十.单图滑动 HTML内容

<div class="ibox-content">
  <div class="carousel slide" id="carousel1">
  <div class="carousel-inner">
    <div class="item active">
      <img alt="image" class="img-responsive" src="img/p_big3.jpg">
    </div>
    <div class="item">
      <img alt="image" class="img-responsive" src="img/p_big1.jpg">
    </div>
    <div class="item ">
      <img alt="image" class="img-responsive" src="img/p_big2.jpg">
    </div>

  </div>
    <a data-slide="prev" href="carousel.html#carousel1" class="left carousel-control">
      <span class="icon-prev"></span>
    </a>
    <a data-slide="next" href="carousel.html#carousel1" class="right carousel-control">
      <span class="icon-next"></span>
    </a>
  </div>
</div>

十一.徽章,标签,进度条

1.徽章类 badge badge-primary(基本), badge-info,badge-success。。。

2.标签类 label label-primary(基本),label-info,label-success,label-danger...

3.进度条:

<div class="ibox-content">
   <h5>基本</h5>
  <div class="progress">
    <div style="width: 35%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" role="progressbar" class="progress-bar progress-bar-success">
      <span class="sr-only">35% Complete (success)</span>
    </div>
  </div>

  <div class="progress progress-bar-default">
    <div style="width: 43%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="43" role="progressbar" class="progress-bar">
      <span class="sr-only">43% Complete (success)</span>
    </div>
  </div>

  <h5>条纹</h5>

  <div class="progress progress-striped">
    <div style="width: 50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar" class="progress-bar progress-bar-warning">
      <span class="sr-only">40% Complete (success)</span>
    </div>
  </div>

  <h5>动画</h5>

  <div class="progress progress-striped active">
    <div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-danger">
      <span class="sr-only">40% Complete (success)</span>
    </div>
  </div>

</div>

bootstrap的学习-基础样式和排版一的更多相关文章

  1. Java 新手学习 CSS样式列表 排版 格式布局

    1,样式表分为  内联样式表   内嵌样式表  外部样式表  三种. 内联样式表是直接写在标签里面的  比如 <p style=“”></p>  <div style=& ...

  2. 13 ,CSS 入门基础,行内排版内嵌式排版和外部排版样式

    1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

  3. bootstrap 学习 ---css样式学习

    bootstrap 适用于响应式布局,移动设备优先的web项目 1.学习bootstrap需要引入bootstrap的css,jquery,bootstrap的js,注意:jquery文件必须在boo ...

  4. 通过bootstrap来学习less

    很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.平时自己写页面用less的话,感觉是方便了些,但是难道less的好处就只是这样? 刚好 ...

  5. bootstrap组件学习

    转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...

  6. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  7. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  8. WeUI基础样式库——写一个移动端界面

    WeUI是一套基础样式库,同微信原生视觉体验一致,由微信官方设计团队为微信内网页和微信小程序量身设计的.我们来看看这个基础库样式到底长什么样. 这些密密麻麻的就是压缩后的样式库.密密麻麻地看起来简直要 ...

  9. 现代3D图形编程学习-基础简介(2) (译)

    本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...

随机推荐

  1. 37-wc 简明笔记

    显示行数.单词数和字节数 wc [options] [file-list] 参数 file-list是wc分析的一个或多个文件的路径名列表.如果省略file-list,wc就从标准输入中读取输入 选项 ...

  2. Java网络编程——概述

    一.网络模型 OSI七层模型 应用层 表示层 会话层 传输层: 网络层: 链路层 物理层:比特流 TCP/IP四层模型 应用层 传输层:数据包,TCP/UDP 网络层:数据帧 物理层:比特流 二.网络 ...

  3. centos中crontab(计时器)用法详解

    关于crontab: crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和执行.该 ...

  4. [转]oracle学习入门系列之五内存结构、数据库结构、进程

    原文地址:http://www.2cto.com/database/201505/399285.html 1 Oracle数据库结构 关于这个话题,网上一搜绝对一大把,更别提书籍上出现的了,还有很多大 ...

  5. swift项目实战--微博的未登录界面的实现,和监听未登录界面两个按钮的两种实现方法

    1.未登录界面的实现 微博项目中,用户不登录的话,显示的是未登录的界面.项目中TabBarVC的子控制器都是tableViewVC,所以抽取了父类,让父类判断用户是否登录,决定显示什么样的界面.loa ...

  6. Redis集群(一):基本概念

    一.使用版本:3.0.0.0 二.基本概念:  号至 11000 号的哈希槽, 这样集群就不会因为主节点 B 的下线而无法正常运作了. 异步复制(虽然是异步复制,但是执行写命令和复制命令到从节点几乎是 ...

  7. javascript 学习一(概述+基本语法)

    http://js.do/ 概述 JavaScript :脚本语言 诞生于1995年. javascript 1.0,发布于Netscape Navigator 2  @1996年3月 布兰登·艾奇( ...

  8. mysql查询时间戳和日期的转换

    mysql提供了两个函数: from_unixtime(time_stamp) -> 将时间戳转换为日期 unix_timestamp(date) -> 将指定的日期或者日期字符串转换为时 ...

  9. Echarts-画柱状,折线图

    导入echarts包 <script src='../scripts/libraries/echarts/echarts-all.js'></script> 堆积图js var ...

  10. KVO内部实现原理

    KVO的原理: 只要给一个对象注册一个监听, 那么在运行时, 系统就会自动给该对象生成一个子类对象, (格式如:NSKVONotifying_className), 并且重写自动生成的子类对象的被监听 ...