全局CSS之表单&按钮&图片&辅助类&响应式工具

梓轩wdw

已于 2022-05-03 17:54:00 修改

阅读量247

点赞数 2

文章标签： css 前端 html javascript

于 2022-05-03 17:51:50 首次发布

本文链接：https://blog.csdn.net/weixin_67780833/article/details/124558267

版权

本文介绍了Bootstrap中全局CSS的使用，涵盖表单（如基本表单、内联表单、组合、水平排列等）、按钮（尺寸、状态）、图片（形状、响应式）和辅助类（颜色、背景、浮动）以及响应式工具（可见、隐藏）。通过示例代码展示了如何应用这些样式以实现不同效果。

摘要由CSDN通过智能技术生成

前言

一、表单

1.基本表单

2.内联表单：class=”form-inline”

5、快速浮动class=”pull-right”,class=”pull-left”

5、响应式工具

1、可见：class=”visible-xs-*” *指的是block或者inline

2、隐藏：class=”hidden-xs”

前言

本节课我们接着上节课内容继续讲全局CSS的样式，今天主要讲表单、按钮、图片、辅助类、以及响应式工具

提示：以下是本篇文章正文内容，下面案例可供参考

一、表单

1.基本表单

class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100%

示例代码：

<form action="" method="">

<label>用户名:</label>

<input type="text" class="form-control" />

</form>

之前我们写在文本框前面写用户名一直都是直接写字，在实际开发中一般用文本标签包起来例如 <label> <span> 标签

我们可以看到效果文本框的宽度占满了整行，下拉框的宽度也占满了整行

class=”form-group”：可以为<div>设置该属性。如果<div>中包含<label>和<input>表示为一组。层次会更清晰

示例代码：

<form action="" method="">

<div class="form-group">

<label>用户名:</label>

<input type="text" placeholder="请输入用户名" class="form-control" />

</div>

<div class="form-group">

<label>密码:</label>

<input type="text" class="form-control" />

</div>

</form>

这个页面效果可能不是很明显

2.内联表单：class=”form-inline”

<form class="form-inline" action="" method="">

<label>用户名:什么是内联表单呢，就是让我们的所有表单元素都在一行

<form action="" method="">

<label>用户名:</label>

<input type="text" class="form-control" />

<select class="form-control">

<option value ="">北京</option>

</select>

</form>

刷新页面，我们可以看到效果，每一个元素都自动换行，总共占了四行。用内联表单我们再来看看

/label>

<input type="text" />

<select >

<option value ="">北京</option>

</select>

</form>

现在都显示在一行

3.表单组合

class=”input-group”、class=”input-group-addon”

表单组合就是把几个元素组合在一起，我们一起来看一下代码:

<div class="form-group">

<label>工资:</label>

<input type="text" class="form-control" />

</div>

现在的效果就是工资后面跟着一个文本框，如果我们先想在文本框中的前面一部分来一个$美元符合。看一下怎么写:

<div class="form-group">

<label>工资:</label>

<div class="input-group">

<span class="input-group-addon">$</span>

<input type="text" class="form-control" />

</div>

</div>

首先我们需要把$美元符合和文本框组合在一起，所用用div把他们两个包括起来,给div设置属性:class=”input-group，表示把他们分为一组，给span设置属性:class=”input-group-addon”.这样就可以把他们组合在一起。刷新看一下效果，是不是漂亮多了