刚开始使用bootstrap css开源项目。遇到一个问题,默认的input 宽度太大,需要找小一点的。

其实只需要在input tag中选用预定义的较小的宽度即可。比如:

<input type="number" class="input-small"></input>

input-small是预定义的一种类别,在bootstrap.css文件中有一组这样的类别:

.input-mini {
width: 60px;
} .input-small {
width: 90px;
} .input-medium {
width: 150px;
} .input-large {
width: 210px;
} .input-xlarge {
width: 270px;
} .input-xxlarge {
width: 530px;
}

bootstrap css选择不同的宽度的更多相关文章

  1. 前端插件之Bootstrap Switch 选择框开关控制

    简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...

  2. 前端基础(十):Bootstrap Switch 选择框开关控制

    简介 Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式 它是依赖于Bootstrap的一款插件 下载 下载地址 在线引用 导入 因为它是依赖于Bootstrap的一款 ...

  3. Bootstrap CSS概览代码文字标注篇

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 4.1HTML和Bootstrap css精华

    1.HTML 2.理解Bootstrap HTML元素告诉浏览器,他要表现的是什么类型的内容,当他们不提供任何关于如何显示内容的信息.如何显示内容的信息,由CSS提供. 本书仅包含足够的信息,让你查看 ...

  5. Bootstrap CSS 描述

    <!DOCTYPE html><html lang="zh-CN"><head> <!--定于内容,和内容的编码格式--> < ...

  6. (二)Bootstrap CSS 概览

    在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...

  7. [css选择器]总结:IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  8. 3.Bootstrap CSS 概述

    1.HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 ...

  9. 2.Bootstrap CSS

    Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...

随机推荐

  1. Android-onInterceptTouchEvent()和onTouchEvent()总结

    老实说,这两个小东东实在是太麻烦了,很不好懂,我自己那api文档都头晕,在网上找到很多资料,才知道是怎么回事,这里总结一下,记住这个原则就会很清楚了: 1.onInterceptTouchEvent( ...

  2. Swift - 使用HTML5进行iOS开发(将HTML5打包成iOS应用)

    最近越来越流行使用HTML5进行跨平台应用开发,先不说运行效率如何.从人力成本来说,只要写一套html页面就可以打包发布到安卓和iOS等多个平台,确实会省下不少时间和人力(这个领导最喜欢了). 下面简 ...

  3. android 巧用资源文件(不断积累)

    1.shape的使用 <shape xmlns:android="http://schemas.android.com/apk/res/android" > <s ...

  4. Windows Phone 8初学者开发的翻译终于过半

    从2013年7月19日开始,到2013年12月9日,一共花了143天时间完成了18篇Windows Phone 8初学者开发的翻译,还剩下17篇文章需要翻译,看到了完成的希望! I love Wind ...

  5. dos2unix与unix2dos之学习记录

    1. unix2dos与dos2unix这两个tool是用来干什么的? 这首先应该要说明一下背景知识: unix类操作系统下,换行字符是\n: 而早期的dos操作系统,其换行字符是由\r\n组成. 所 ...

  6. Android中获取网页表单中的数据

    MainActivity如下: package cn.testjavascript; import java.util.StringTokenizer; import android.os.Bundl ...

  7. Swift - 委托(delegate)的介绍,及使用样例

    1,委托的说明 委托(delegate)是Cocoa的一个术语,表示将一个对象的部分功能转交给另一个对象. 比如对象A希望对象B知道将要发生或已经发生某件事情,对象A可以把对象B的引用存为一个实例变量 ...

  8. 根据input 标签取value属性的值

    jrhmpt01:/root/lwp/0526# cat a1.pl use LWP::UserAgent; use DBI; use POSIX; use Data::Dumper; use HTM ...

  9. Javascript 进阶 封装

    js中处处是对象,面向对象的第一步当然就是封装了,由于Js中没有类的概念,所以封装起来也比较麻烦,下面介绍两种js的封装. 1.使用约定优先的原则,将所有的私有变量以_开头 <script ty ...

  10. 《火球——UML大战需求分析》(第2章 耗尽脑汁的需求分析工作)——2.1 需求分析面面观

    说明: <火球——UML大战需求分析>是我撰写的一本关于需求分析及UML方面的书,我将会在CSDN上为大家分享前面几章的内容,总字数在几万以上,图片有数十张.欢迎你按文章的序号顺序阅读,谢 ...