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文件即可使用







bootstrap——css样式(二、排版)

1、标题HTML 中的所有标题标签,h1到h6 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。h1. Bootstrap heading h...
  • zaichuanguanshui
  • zaichuanguanshui
  • 2017年01月18日 13:28
  • 178

Bootstrap全局CSS样式之表单

.form-control——将单独的表单控件赋予一些全局样式,如默认宽度width:100%; .form-group——包裹表单控件,获得最好的排列; .form-inline——将表单设置为内联...
  • bboyjoe
  • bboyjoe
  • 2015年07月26日 12:05
  • 3664

bootstrap css样式起步

Bootstrap是一个HTML/CSS/JS框架,用于开发移动设备优先的响应式网页。由Twitter两位工程师编写,主要涉及:   HTML: 为已有的H5标签添加自定义属性   CSS: CS...
  • web1504
  • web1504
  • 2015年08月05日 22:32
  • 634

Bootstrap框架---CSS全局样式之按钮样式

预定义样式 首先,我们先要链接css样式和JQ文件 使用下面列出的类可以快速创建一个带有预定义样式的按钮。 Default Primary Success ...
  • xiaowu_hhb
  • xiaowu_hhb
  • 2016年12月02日 14:50
  • 2756

修改bootstrap 中 CSS 样式表,以实现自己需要的部分样式。

bootstrap当中,已经自动配置好许多CSS 样式,但是,咱们可以根据自己的需要来修改相应的部分内容,实现自己想要的结果。 目前,尼玛哥在web前端开发的过程当中, 使用到了bootstrap框...
  • u010801439
  • u010801439
  • 2017年04月25日 11:05
  • 2482

bootstrap css样式(一)

基本的全局显示 使用 body {margin: 0;} 来移除 body 的边距网格系统 1、添加... 元素,确保居中和最大宽度。 2、一旦添加了容器,接下来需要考虑以行为单位。添加 ......
  • qq_36748278
  • qq_36748278
  • 2017年03月05日 14:56
  • 150

Bootstrap CSS样式

下表总结了 Bootstrap 网格系统如何跨多个设备工作:   超小设备手机( 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型...
  • qq_26329981
  • qq_26329981
  • 2015年11月26日 09:59
  • 208

Bootstrap全局CSS样式之排版

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

bootstrap框架之基本CSS样式

bootstrap框架之基本CSS样式 排版 标题 从  到  所有的HTML标题都是可用的. h1. Heading 1 h2. Heading...
  • Mary201572
  • Mary201572
  • 2016年07月24日 20:38
  • 494

Bootstrap 全局CSS样式之栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具...
  • diligentkong
  • diligentkong
  • 2017年05月27日 15:01
  • 796
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap 之 CSS样式
举报原因:
原因补充:

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