Bootstrap学习笔记(3)--表格\表单\图片

Bootstrap表格

 表格类:

   .table只会在表行之间增加横线;

   .table-striped会在表格行之间增减斑马线;

   .table-hover会给表设置鼠标悬停状态;

   .table-border会为所有的表格添加边框;

   .table-condensed让表格更加紧凑;

 tr,td,th类

   .active让某一行单元格或者行处于激活状态;

   .success表示成功的样式;

   .warning表示警告的样式;

   .danger表示危险的样式;

   .info表示信息的样式;

  表单类:

  创建表单的基本步骤

 (1)首先向form元素添加role="form";

 (2)把标签和控件放在一个带有class .form-group的<div>中,这是获取最佳间距锁必须的;

 (3)向所有的文本元素<intput><textarea>和<select>添加class .form-control;

  几种表单格式;

  垂直表单-采用以上样式创建的普通表单;

  水平表单-在form中增加class .form-horizontal;

  内联表单-在form中增加class .form-inline,对于标签元素可以使用.sr-only来隐藏该标签元素(label)

  支持的表单控件:

  input,textarea,checkbox,radio,select(可以增加multiple实现多选)

  这里特别说明一点,实现内联的复选框或者单选按钮使用checkbox-line属性.

  如果想在想放置纯文本那么可以对<p>元素使用.form-control-static

 表单控件状态:

  可以对div设置has-warning,has-error,has-success来显示内部控件的状态.

  可以设置.input-large或者.input-sm来显示控件的大小,或者使用col-lg-*来显示控件占的列数.

  可以使用.class-bloc来显示一段内容的解释.

图片:

.img-rounded

:添加

border-radius:6px

来获得图片圆角。

.img-circle

:添加

border-radius:50%

来让整个图片变成圆形。

  • .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。
  • .img-responsive 图片响应式 (将很好地扩展到父元素)
  • 最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

    推荐阅读更多精彩内容

    • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
      _Yfling阅读 14,680评论 1 92
    • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
      凛0_0阅读 13,725评论 3 184
    • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
      前端进阶之旅阅读 16,684评论 32 459
    • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
      PYLON阅读 8,561评论 0 5
    • 每次休息如没事就会去看望妈妈,我在汉阳郊区,她在武昌市区一家小餐馆帮忙做早点,相隔也有两个多小时的车程。 ...
      七星莲叶阅读 1,300评论 0 0