bootstrap 之 CSS样式

原创 2013年12月02日 20:57:46

定制表单控件的大小

<label> <input class="input-sm" type="text" placeholder=".input-sm"> </label>
<label> <input class="input-lg" type="text" placeholder=".input-lg"> </label>

不可编辑的样式

<input class="span4 uneditable-input" disabled type="text" placeholder=".span4">
<span class="span4 uneditable-input">default</span>

定制帮助文本

<input type="text"><span class="help-inline">行内解释文本</span>
<input type="text"><span class="help-block">块解释文本</span>

定制表单行为

<form class="form-actions" action="">
    <label>
        <input type="text" id="userName">
    </label>
    <label>
        Password:
        <input type="password" id="userPsw">
    </label>
    <button type="button" class="btn">取消</button>
    <button type="submit" class="btn btn-primary">确定登录</button>
</form>

验证状态

<div class="control-group warning">
    <label>用户名
        <input type="text" id="user">
        <span class="help-inline">非法用户名</span>
    </label>
</div>

按钮样式

<a href="" class="btn">super</a>
<button class="btn">btn</button>
<input class="btn" type="button" value="input">
<input class="btn" type="submit" value="submit">

禁用按钮

<button type="button" class="btn btn-default btn-lg disabled" disabled="disabled">Button</button>
可以使用第三方专为Bootstrap设计的图标字体,如Font Awesome,在页面中引入相应的CSS文件即可使用







相关文章推荐

Bootstrap3.3.6 中文手册-全局CSS样式

  • 2016年04月19日 09:56
  • 832KB
  • 下载

Bootstrap全局CSS样式之排版

Bootstrap能完全友好的支持html5的文本元素,这里不再赘述,具体可参考我另一篇文章《html的文本元素总结》,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总。 .small—...
  • bboyjoe
  • bboyjoe
  • 2015年07月23日 21:55
  • 1435

Bootstrap全局CSS样式

布局容器Bootstrap需要为页面内容和栅格系统包裹容器。提供了两种容器类:.container和.container-fluid,两者不能嵌套使用。 .container 类用于固定宽度并支持响...

bootstrap基本css样式按钮

1.样式预定义 Default

Bootstrap 全局css样式布局之 栅格系统

移动设备优先 Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。 meta name="viewport" content=...

bootstrap基本的CSS样式 图片 响应式工具

1.响应式图片 2.图片形状

bootstrap学习总结-css样式设计(二)

bootstrap学习总结-css样式设计(二)    首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈。...

bootstrap——css样式(三、表格)

1、.table 为任意 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。.table { width: 100%; max-...

Bootstrap学习笔记之全局CSS样式(一)

全局CSS样式 一、概览 需要将页面设置为 HTML5 文档类型 ... 在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-...

Bootstrap3 CSS样式基本用法总结

按钮 a,input,button都可以设置为按钮 a标签按钮   a标签按钮 button标签按钮 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap 之 CSS样式
举报原因:
原因补充:

(最多只允许输入30个字)