美文网首页
常用的控件

常用的控件

作者: 5a4982b9b5fe | 来源:发表于2016-12-01 13:45 被阅读0次

1.h1-h6

h1~h3的margin为20px;h4-h6的margin为10px

定义了6个类名。h1 h2 h3 h4 h5 h6

大小:h1为36px,依次减6

h1 small,

.h1 small,

h2 small,

.h2 small,

h3 small,

.h3 small,

h1 .small,

.h1 .small,

h2 .small,

.h2 .small,

h3 .small,

.h3 .small {

font-size: 65%;

}

h4,

.h4,

h5,

.h5,

h6,

.h6 {

margin-top: 10px;

margin-bottom: 10px;

}

h4 small,

.h4 small,

h5 small,

.h5 small,

h6 small,

.h6 small,

h4 .small,

.h4 .small,

h5 .small,

.h5 .small,

h6 .small,

.h6 .small {

font-size: 75%;

}

2.p

p {

margin: 0 0 10px;

}

3.body

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 14px;

line-height: 1.42857143;

color: #333;

background-color: #fff;

}

4.强调文本

添加class="lead";  <small>/<em>/<strong>/<cite>

.lead {

margin-bottom: 20px;

font-size: 16px;

font-weight: 200;

line-height: 1.4;

}

@media (min-width: 768px) {/*大中型浏览器字体稍大*/

.lead {

font-size: 21px;

}}

5.粗体

<b>/<strong>

6.斜体

<i>

7.强调的相关类

 

8.文本对齐

9.列表

10.列表的一些属性

.list-unstyled,

水平列表 .list-inline

水平定义列表  .dl-horizontal

11.表格

基础表格: .table

斑马表格:.table   .table-striped

带边框的表格:.table   .table-bordered

鼠标悬停高亮的表格:.table   .table-hover

紧凑型的表格: .table   .table-condensed

响应式表格: .table   .table-responsive 

12.表格的一些属性

表格行的类

13.表单

基础表单

role="form"

水平表单

.form-horizontal

内联表单 

.form-inline

阻止label换行:

.form-group/.sr-only

表单中保证样式不出错

.form-control

输入框

input+type+.form-control+placeholder

下拉选择框

<form role="form">

<div class="form-group">

<select class="form-control">

<option></options>

</select>

<div class="form-group">

<select multiple class="form-control">

<option>1</option>

</select>

</div>

</form>

文本域

<textarea class="form-control" rows="3">

</textarea>


复选框checkbox和单选择按钮radio

.checkbox+.radio

水平:在lable标签添加 class="checkbox-inline "/"radio-inline"


表单控件(按钮)

input[type="submit"]

input[type="button"]

input[type="reset"]

表单控件的大小

.control-label/

大:form-control input-lg

正常:form-control

小:form-control input-sm


表单控制状态(焦点状态)

.form-control


表单控制状态(禁用状态)

只要要标签上添加disabled


表单的控件的状态(验证状态)

.has-warning:警告状态(黄色)

.has-error:错误状态(红色)

.has-success:成功状态(绿色)

将以上3个添加上has-feedback这个类就能显示出对应的图标


表单提示的信息
.help-block


14.按钮

<span>/<input>/<div>都可以使用

按钮大小
添加:btn-lg/btn-sm/btn-xs/

15.图片

img-responsive:相应图片

.img-rounded:圆角图片

.img-circle:圆形图片

.img-thumbnail:缩略图片


16.图标

http://getbootstrap.com/components/#glyphicons

相关文章

  • UI常用控件

    UI常用控件 // // ViewController.m // UI常用控件 // // Created by ...

  • 小工具开发---万能模板

    实现:1)汇总所有控件的常用属性2)汇总每类控件的常用设计3)开发小工具时,复用对应控件 一、所有控件的常用属性 ...

  • Android - Navigation

    Android 基础知识 1. Android 常用控件 2. 控件常用属性 Android 常用知识点 动态权限...

  • IOS开发(三)高级控件

    IOS基础控件思维导图 三、高级控件 1、UITabBarController (1)常用属性 (2)常用方法 (...

  • Flutter常用布局Basic widgets

    Flutter提供了强大的基本控件,我们现在学习最常用的空间。 常用控件一: Text 我们看到这个控件的名字就知...

  • UIDatePicker简述

    // UIDatePicker控件的常用方法 时间选择控件 UIDatePicker *oneDatePicker...

  • Flutter 常用控件及使用技巧

    常用控件 SizeBox:调节 Flutter控件之间的间距控件如: SizeBox(height:8)、Size...

  • 我写了一篇文章《ISO入门之UIView(二)》

    *按钮控件(Button) 按钮控件是最常用的控件之一。iOS中按钮控件Button直接继承于UIControl:...

  • iOS UITextView

    本专题整理了 UIkit 中基本的控件,及控件的一些常用属性。方便大家研究。 常用属性

  • IOS开发(二)中级控件

    IOS基础控件思维导图 二、中级控件 1、UIStepper (1)常用属性 (2)常用方法 2、UISlider...

网友评论

      本文标题:常用的控件

      本文链接:https://www.haomeiwen.com/subject/bprxmttx.html