Bootstrap学习笔记(二) 表单

3-1 基础表单

单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

1、宽度变成了100%

2、设置了一个浅灰色（#ccc）的边框

3、具有4px的圆角

4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

5、设置了placeholder的颜色为#999


    
        邮箱
        <input type="email" class="75a4-cb1f-b361-e6a1 form-control" id="exampleInputEmail" placeholder="请输入您的邮箱地址">
    
    
        密码
        
    
    
        
            记住密码

显示结果如下图所示:

3-2 水平表单

Bootstrap框架默认的表单是垂直显示风格，在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

1、在元素是使用类名“form-horizontal”。

2、配合Bootstrap框架的网格系统。

在元素上使用类名“form-horizontal”主要有以下几个作用：

1、设置表单控件padding和margin值。

2、改变“form-group”的表现形式，类似于网格系统的“row”。

显示结果如下图所示:

3-3内联表单

在Bootstrap框架中实现内联表单,只需要在元素中添加类名“form-inline”即可。如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中。

3-4表单控件(输入框input)

每一个表单都是由表单控件组成。离开了控件，表单就失去了意义。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的。

效果如下图所示：

3-7表单控件(复选框checkbox和单选择按钮radio)

1、不管是checkbox还是radio都使用label包起来了

2、checkbox连同label标签放置在一个名为“.checkbox”的容器内

3、radio连同label标签放置在一个名为“.radio”的容器内

在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按钮与标签的对齐方式。

显示结果如下:

3-8表单控件(复选框和单选框按钮水平排列)

复选框和单选按钮有时需要水平排列:

1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”

2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”

显示结果如下:

3-9表单控件(按钮)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：

☑input[type=“submit”]

☑input[type=“button”]

☑input[type=“reset”]

☑

在Bootstrap框架中的按钮都是采用来实现。

    
        
            
                Button
                class="75a4-cb1f-b361-e6a1 "
                Description
            
        
        
            
                
                btn
                Standard gray button with gradient
            
            
                
                btn btn-primary
                Provides extra visul weight and identifies the primary action in a set of buttons
            
            
                
                btn btn-info
                Used as an alternative to the default styles
            
            
                
                btn btn-success
                Indicates a successful or positive action
            
            
                
                btn btn-warning
                Indicates caution should be taken with this action
            
            
                
                btn btn-danger
                Indicates a dangerous or potentially negative action
            
            
                
                btn btn-inverse
                Alternate dark gray button, not tied to a semantic action or use

Button	class="75a4-cb1f-b361-e6a1 "	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visul weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use

显示效果如下:

3-10表单控件大小

Bootstrap框架还提供了两个不同的类名，用来控制表单控件的高度。这两个类名是：

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input，textarea和select控件

显示结果如下:

3-11表单控件状态(焦点状态)

表单状态的作用：

每一种状态都能给用户传递不同的信息，比如表单有焦点的状态可以告诉用户可以输入或选择东西，禁用状态可以告诉用户不可以输入或选择东西，还有就是表单控件验证状态，可以告诉用户的操作是否正确等。那么在Bootstrap框架中的表单控件也具备这些状态。焦点状态是通过伪类“:focus”来实现。Bootstrap框架中表单控件的焦点状态删除了outline的默认样式，重新添加阴影效果。

要让控件在焦点状态下有样式效果，需要给控件添加类名“form-control”

显示效果如下:

3-12表单控件状态(禁用状态)

Bootstrap框架的表单控件的禁用状态和普通的表单禁用状态实现方法是一样的，在相应的表单控件上添加属性“disabled”。和其他表单的禁用状态不同的是，Bootstrap框架做了一些样式风格的处理：使用方法为：只需要在需要禁用的表单控件上加上“disabled”即可：在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。对于整个禁用的域中，如果legend中有输入框的话，这个输入框是无法被禁用的。

显示结果如下:

3-13表单控件状态(验证状态)

在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。

1、.has-warning:警告状态（黄色）

2、.has-error：错误状态（红色）

3、.has-success：成功状态（绿色）

使用的时候只需要在form-group容器上对应添加状态类名。

很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起。在 Bootstrap 的小图标都是使用@font-face来制作。而且必须在表单中添加了一个 span 元素。

显示结果如下:

3-14表单提示信息

Bootstrap框架中使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。如果你想在BootstrapV3.x版本也有这样的效果，你可以添加这段代码：

.help-inline{
  display:inline-block;
  padding-left:5px;
  color: #737373;
}

如果你不想为bootstrap.css增加自己的代码，而且设计又有这种样的需求，那么只能借助于Bootstrap的网格系统。

显示效果如下:

3-15按钮

按钮是Bootstrap框架核心内容之一

显示效果如下所示:

3-16基本按钮

3-17默认按钮

Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格，然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色。使用默认按钮风格也非常的简单，只需要在基础按钮“btn”的基础上增加类名“btn-default”即可：

显示效果如下图所示:

3-18多标签支持

一般制作按钮除了使用标签元素之外，还可以使用和标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

 
    
    span标签按钮
    div标签按钮

显示效果如下图所示:

3-19定制风格

在Bootstrap框架中除了默认的按钮风格之外，还有其他六种按钮风格，每种风格的其实都一样，不同之处就是按钮的背景颜色、边框颜色和文本颜色。在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现，在使用过程中，开发者只需要选择不同的类名即可：

代码和图请参考3-15

3-20按钮大小

在Bootstrap框架中，对于按钮的大小，也是可以定制的。类似于input一样，通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小，btn-lg，btn-sm，btn-xs分别表示大型，小型，和超小型。

显示效果如下:

3-21块状按钮

Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。

显示效果如下图所示:

3-22按钮状态

Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种：活动状态和禁用状态。Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。而且不同风格下的按钮都具有这几种状态效果，只是颜色做了一定的调整

代码及图请参考3-15

3-23按钮状态--禁用状态

在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

两者的主要区别是：

“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

显示效果如下图所示:

3-24图像

在Bootstrap框架中对于图像的样式风格提供以下几种风格：

1、img-responsive：响应式图片，主要针对于响应式设计

2、img-rounded：圆角图片

3、img-circle：圆形图片

4、img-thumbnail：缩略图片

使用方法非常简单，只需要在

标签上添加对应的类名

显示效果如下图所示:

3-25图标(一)

Bootstrap框架中提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码

显示效果如下图所示:

3-26图标(二)

在网页中使用图标也非常的简单，在任何内联元素上应用所对应的样式即可：

显示效果如下图所示:

JavaWeb笔记整理——HTML、CSS、JavaScript

标签上，而其他标签里的内容就不受影响。

如果选择器是h1，那么所有标签的内容就会按照这里的属性来展现。

在html中有什么样的标签，就会有什么样的选择器。

样式属性在选择器的大括号中写出，并且样式的类型和样式的值是用 "："隔开的，而不是“=”。

值与值之间用空格隔开，而不同的样式之间使用“；”隔开。

如：

4、常见的样式（1）color

规定字体的颜色。

（2）border

规定边框的样式，可以指定颜色，和宽度等。




    
    Span Example
    



    div块1

    

    

    





    div块2
    

    

    





    div块3

（3）width、height

可以填入像素值如100px 也可以是百分值如 50%，百分值则代表使用其父元素的50%计算大小。

（4）background-color

设置背景颜色

（5）字体样式

font-size:字体大小

font-weight:字体是否加粗

font-family:使用指定的字体类型

（6）div居中

margin-left:auto

margin-right:auto

（7）文本居中

text-align：center

这里注意不是align了，要写成text-align。

（8）超链接去下划线

text-decoration：none；

还有很多样式，遇到了就自己查一下吧，作为后端程序员了解一下就可以了。

5、css的三种形式（1）在html标签指定

也就是我们最初使用的方式：

（2）在中的标签中指定

（3）导入css文件

我们可以将css写成一个单独的文件，然后在程序中引入。

6、css选择器（1）元素选择器

也就是选中某个标签作为选择器，如之前的div。

可以在div后面继续加元素，从而让这些元素也显现这样的样式。（称为组合选择器）

（2）id选择器

我们可以指定某一个html标签的id，然后使用id作为选择器。这样，css的样式只会作用在这一个id的标签上。并且每个标签的id不可以重复。




    
    Span Example
    



    div块1

    

    

    





    div块2
    

    

    





    div块3

（3）class选择器

class选择器的含义则是可以将每个html标签进行分组，让某一个分组使用同一个样式。




    
    Span Example
    



    div块1

    

    

    





    div块2
    

    

    





    div块3

（4）优先级

如果同时有元素选择器、id选择器和class选择器还有标签内的css样式，那么他们有一个先后次序：

标签样式>id选择器>class选择器>元素选择器

也就是范围越小的样式设置，优先级越高。

三、JavaScript（js） 1、JavaScript的作用

JavaScript定义了用户和网页之间的交互逻辑，如，我们有了html定义的按钮之后，我们还需要使用JavaScript定义的按钮逻辑来进行网页实际的操作。

JavaScript可以改变html的内容、属性和css的样式等，还可以完成页面提交的数据的验证。

JavaScript中可以定义变量和函数，就像Java一样也有循环、判断等语句，而且我们可以把JavaScript和网页相关联，当用户在点击、光标移动到目标上等操作后让网页进行相应的操作。

2、JavaScript简单演示

JavaScript代码要放在body标签中的

Bootstrap学习笔记(二) 表单

案例1

案例1

案例2

示例1

示例2

示例3

示例1

示例2

示例1

示例2

相关文章

发表评论

评论列表

最新发布

成都企业网站建设维护

热门文章

热评文章

猜您喜欢

热门标签