web前端 (18) Bootstrap 02

最新推荐文章于 2022-02-14 17:20:17 发布

士不可以不弘毅，任重而道远

最新推荐文章于 2022-02-14 17:20:17 发布

阅读量298

点赞数

分类专栏： WEB前端文章标签： web前端

本文链接：https://blog.csdn.net/weixin_44075537/article/details/85036578

版权

WEB前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

目录
按钮
表单
响应式
输入框
栅格

按钮样式

给如下的html标签, 添加按钮样式class, 可以完成按钮样式的编写 :

1.  span标签      (推荐)
2.  button标签
3.  input标签 type属性为 button/submit/reset ...
4.  a标签

class 效果

btn 基本按钮效果 (需配合其他背景颜色使用)
btn btn-default 默认按钮效果
btn btn-primary 主要蓝按钮样式
btn btn-success 成功绿按钮样式
btn btn-info 信息蓝按钮样式
btn btn-warning 警告黄按钮样式
btn btn-danger 危险红按钮样式
btn btn-link 超链接按钮样式

案例:

<span class="btn btn-success">span按钮</span> 
<button class="btn btn-success">button按钮</button> 
<input type="button" value="input按钮" class="btn btn-success"> 
<a href="#" class="btn btn-success">超链接按钮</a>
<br><br><hr><br><br>
<span class="btn btn-success">示例按钮</span>   
<span class="btn btn-default">示例按钮</span>   
<span class="btn btn-primary">示例按钮</span>   
<span class="btn btn-info">示例按钮</span>  
<span class="btn btn-warning">示例按钮</span>   
<span class="btn btn-danger">示例按钮</span>    
<span class="btn btn-link">示例按钮</span>

按钮尺寸样式

class: 效果

btn-lg 大按钮
btn-sm 小按钮
btn-xs 小小按钮
btn-block 块按钮 (常用于手机网页的编写 , 独占一行)

案例:

<span class="btn btn-success btn-lg">示例大按钮</span>
<span class="btn btn-success">示例正常按钮</span>
<span class="btn btn-success btn-sm">示例小按钮</span>
<span class="btn btn-success btn-xs">示例小小按钮</span>
<span class="btn btn-success btn-block">示例块按钮</span>

激活&禁用 (可用于按钮等组件)

class 效果
active 激活样式
disabled 禁用样式

案例:
示例激活按钮
示例禁用按钮

表单样式 (input输入框的样式)

给表单的input标签通过bootstrap修改样式时, input标签必须是指定了type属性的 ! 如果使用文本输入框, 必须指定type=text

block 块样式

独占一行的输入框
(可以应用到submit按钮上)

class :
form-control

案例:

<h3 class="text-center">用户登录</h3><br><br>
<form action="https://itdage.cn">
    <input type="text" placeholder="请输入帐号" class="form-control"><br>
    <input type="password" placeholder="请输入密码" class="form-control"><br>
    <input type="submit" value="登录" class="btn btn-info form-control">
</form>

响应式内联输入框

当屏幕的宽度小于768px时, 自动切换为适用手机的输入框效果 !
组合class:

form标签  :   form-inline
input标签 :   form-control

案例:

<h3 class="text-center">用户登录</h3><br><br>
<form class="form-inline" action="https://itdage.cn">
    <input type="text" placeholder="请输入帐号" class="form-control"><br>
    <input type="password" placeholder="请输入密码" class="form-control"><br>
    <input type="submit" value="登录" class="btn btn-info form-control">
</form>

组合输入框

用于将一组元素组合为一个输入框
(可以给输入框添加前置与后置的内容)

步骤:
1. 给form表单标签添加class=“form-group”
2. 给表单中的每一个输入框 ,添加父元素div,div的class=input-group , 此div是组合输入框的容器 !
3. 给输入框添加前一个兄弟元素或后一个兄弟元素div , 并指定class=input-group-addon

案例:

<h3 class="text-center">用户注册</h3><br><br>
<form class="form-inline form-group" action="https://itdage.cn">
    <div class="input-group">
        <div class="input-group-addon">帐号:</div><input type="text" placeholder="请输入帐号" class="form-control">
    </div>
    <br>
    <div class="input-group">
        <div class="input-group-addon">密码:</div><input type="password" placeholder="请输入密码" class="form-control">
    </div><br>
    <div class="input-group">
        <div class="input-group-addon">邮箱:</div>
        <input type="text" placeholder="请输入邮箱" class="form-control">
        <div class="input-group-addon">
            <select>
                <option>@163.com</option>
                <option>@qq.com</option>
                <option>@126.com</option>
                <option>@itxdl.cn</option>
                <option>@itdage.cn</option>
            </select>
        </div>
    </div>
    <br>
    <input type="submit" value="登录" class="btn btn-info form-control">
</form>

输入框校验状态

实现步骤:

给输入框添加父元素div

当输入框满足特定条件时 , 给输入框的父div 添加class:

has-error   :   输入错误 红
has-success :   输入成功 绿
has-warning :   输入警告 黄

案例:

<h3 class="text-center">用户登录</h3>
<br>
<br>
<form class="form-inline" action="https://itdage.cn">
    <div class="has-error">
        <input type="text" placeholder="请输入帐号" class="form-control">
    </div>
    <br>
    <div class="has-success">
        <input type="password" placeholder="请输入密码" class="form-control">
    </div>
    <br>
    <div class="has-warning">
        <input type="password" placeholder="请猜测输入验证码" class="form-control">
    </div>
    <br>
    <input type="submit" value="登录" class="btn btn-info form-control">
</form>

输入框尺寸

input标签class:
- input-lg : 大输入框
- input-sm : 小输入框

也可以给组合输入框修改尺寸 , 给输入框的父div添加class:
- form-group-lg : 大组合输入框
- form-group-sm : 小组合输入框

案例:

<h3 class="text-center">用户登录</h3>
<br>
<br>
<form class="form-inline" action="https://itdage.cn">
    <input type="text" placeholder="请输入帐号" class="form-control input-lg"><br>
    <input type="password" placeholder="请输入密码" class="form-control"><br>
    <input type="password" placeholder="请确认密码" class="form-control input-sm"><br>
    <input type="submit" value="登录" class="btn btn-info form-control">
</form>

响应式
栅格系统

栅格系统: 指的是bootstrap所提供的一套用于响应式以及移动设备优先的流式栅格布局!

栅格容器

共分为两种栅格容器:

1.  固定宽度的栅格 (宽度由bootstrap在不同设备中自动调整)
    <div class="container"></div>
2.  占用屏幕100%宽度的栅格
    <div class="container-fluid"></div>

栅格中的行与列

在栅格中, 需要将内容编写到栅格行中

通过创建div , 指定class=row来实现栅格行的创建 .

一个栅格行中等分为12分, 超出部分自动换行 !

固定栅格容器

        超小屏幕<768px          992px>小屏幕≥768       1200px>中等屏幕≥992px   大屏幕≥1200px

固定宽度: auto 750px 970px 1170px
类前缀 : col-xs- col-sm- col-md- col-lg-
每一列的宽度: auto 大约62px 大约81px 大约97px

案例:

    <div class="container">
    <div class="row">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/3.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/4.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/5.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/3.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/4.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/5.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/3.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/4.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/5.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/3.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/4.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/5.jpg">
        <img class="col-lg-2 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
    </div>
</div>

栅格偏移

类前缀-offset-数字: 偏移值

案例:
运行的效果: 两张图片靠左显示

<div class="container">
    <div class="row">
        <img class="col-lg-4 col-lg-offset-4" src="images/3.jpg">
        <img class="col-lg-4" src="images/4.jpg">
    </div>
</div>

栅格移动

向左移动
类前缀-pull-数字

向右移动
类前缀-push-数字
移动后的元素是覆盖显示的

案例:

<div class="container">
    <div class="row">
        <img class="col-lg-4 col-lg-push-1" src="images/3.jpg">
        <img class="col-lg-4 col-lg-pull-1" src="images/4.jpg">
    </div>
</div>

栅格嵌套

栅格中每一个占有固定份数的元素内部, 也可以当作栅格容器行来使用

例如:

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
            <img class="col-lg-3 col-md-4 col-sm-6 col-xs-12" src="images/6.jpg">
        </div>
    </div>
</div>

响应式显示与隐藏
在这里插入图片描述
*号的取值为:
block / inline-block - inline
表示的是元素的显示分类 !