Bootstrp学习(二)

最新推荐文章于 2022-07-30 14:47:44 发布

weixin_44615756

最新推荐文章于 2022-07-30 14:47:44 发布

阅读量243

点赞数 1

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_44615756/article/details/88883628

版权

表格

bootstrap关于表格的一些属性:

class=“table” 为table表格添加一些基本属性:每一行 tr标签下添加分隔线,添加了少量的padding边距
class=“table-striped” 为table表格添加斑马状条纹
class=“table-bordered” 为table添加border边框,每个单元格都添加边框
class=“table-hover” 为table表格添加鼠标悬浮效果
class=“table-condensed” 使table表格更紧凑,减少表格padding

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

<body>
	<div class="container table-responsive">
	 <table class="table table-striped table-bordered table-hover table-condensed">
    <!--表头-->
    <thead>
        <tr>
            <td>class属性</td>
            <td>效果</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>class="active"</td>
            <td class="active">鼠标hover在单元格上时的颜色</td>
        </tr>
    <tr>
        <td>class="success"</td>
        <td class="success">标识成功或是积极状态的颜色</td>
    </tr>
    <tr>
        <td>class="info"</td>
        <td class="info">标识普通信息或提示的颜色</td>
    </tr>
    <tr>
        <td>class="warning"</td>
        <td class="warning">标识警告的颜色</td>
    </tr>
    <tr>
        <td>class="danger"</td>
        <td class="danger">标识潜在负面状态或危险的颜色,亦可用来标识错误的信息提示</td>
    </tr>
    </tbody>
</table>
	</div>
</body>

代码执行效果

表单

表单的基本应用

class=“form-group” 将 label 元素和 input , textarea , select 包裹在 .form-group 中可以获得最好的排列
class=“form-control” input , textarea , select使用这个class,宽度设置为默认100%
class=“btn btn-info” btn 设置为按钮样式,btn-info 设置按钮颜色,需要更改颜色,可以改成btn-…,btn-default,btn-danger,等等,参考上方表格的颜色,不设置颜色,则默认白色

<div class="container">
    <form>
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="密码">
        </div>
        <button class="btn btn-info">登录</button>
    </form>
</div>

在这里插入图片描述

内联表单

为form标签添加 form-inline class,将form内的元素左对齐并设置为行内块
上方代码给form添加class=form-inline后的效果
在这里插入图片描述
宽度被改变了,并且排列在了一行

<form class="form-inline">
        <div class="form-group">
            <label>Email</label>
            <div class="input-group">
                <span class="input-group-addon"> your email</span>
                <input type="email" class="form-control" placeholder="email">
                <span class="input-group-addon">@163.com</span>
            </div>
        </div>
    </form>

input-group 与form-group效果类似
input-group-addon 是将标签内的内容添加在输入区域前/后方
效果图:

水平排列的表单

将form表单的class属性设置为form-horizontal,与form-inline相对,竖状排列
在这里插入图片描述

支持的空间

输入框

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
注:只有设置了type的输入控件才能被赋予正确的样式

文本域

支持多行文本的表单控件。可根据需要改变 rows 属性。

多选框和单选框

<div>
    <div class="checkbox">
      <label><input type="checkbox" value="">可以选择多个</label>
    </div>
    
    <div class="radio">
      <label><input type="radio" name="rad" value="option1" checked>选一个1</label>
    </div>
    
    <div class="radio">
      <label><input type="radio" name="rad" value="option2">选一个2</label>
    </div>
</div>

效果图:
在这里插入图片描述

内联单选框和多线框

使用上方的代码,只需要给label添加 .checkbox-inline 或 .radio-inline属性即可,效果可参考form-inline

禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互

只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容

校检状态以及添加额外的图标

<div class="container form-horizontal" style="width: 500px;">
        <div id="uname" class="form-group has-success">
            <label class="control-label">please input username</label>
            <input type="text" class="form-control" placeholder="your username">
            <span class="help-block">username is not normalize</span>
        </div>
        <div id="passwd" class="form-group has-warning">
            <label class="control-label">please input password</label>
            <input type="password" class="form-control" placeholder="password">
            <span class="help-block"> your password so easy</span>
        </div>
        <div id="emails" class="form-group has-error">
            <label class="control-label">please input your's email</label>
            <input type="email" class="form-control" placeholder="email">
            <span class="help-block"> your's email is error</span>
        </div>
    <input type="submit" class="btn btn-info form-control">
</div>

关键点在has-… has-error 等class属性改变了元素内的字体样式,将提示信息明确的显现在页面上,这是基于色彩,可是的提示,但是使用辅助设备的用户或是色盲的用户并不能感受到,因此可以使用label等标签以文本形式显示信息,
还可以使用 .sr-only ,除了屏幕阅读器外，其他设备上隐藏元素

添加额外的图标

<div class="container form-horizontal">
        <div id="uname" class="form-group has-success has-feedback">
            <label class="control-label">please input username</label>
            <input type="text" class="form-control" placeholder="your username">
            <p id="uname-help" class="help-block"></p>
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <div class="form-group has-error has-feedback">
            <div >
                <label class="control-label">input password</label>
                <input type="password" class="form-control" placeholder="password">
                <p id="pass-help" class="help-block"></p>
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            </div>
        </div>
    <div class="form-group has-warning has-feedback">
            <div >
                <label class="control-label">input email</label>
                <input type="email" class="form-control" placeholder="password">
                <p id="email-help" class="help-block"></p>
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
        </div>
        <input type="submit" id="login" class="btn-info btn-link form-control" value="登录">
</div>

要添加额外的图标,给输入框的父级标签添加 .has-feedback属性,参照上方代码,span标签添加的属性就是添加图标
span中class解释: glyphicon属性与glyphicon-warning-sign同时使用显示图标,form-control-feedback将图标在输入框中显示
注意:对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位,建议添加label标签,如果不想显示可以添加 .sr-only属性
glyphicon-warning-sign:警告标识
glyphicon-remove:错误的标识
glyphicon-ok:正确的标识
更多的标识:https://v3.bootcss.com/components/?#pagination

控件尺寸

.input-lg,.input-sm等等为控件设置高度

==.col-lg-*==设置宽度
.form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸
用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

按钮

为 < a>,< button> 或 < input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。虽然按钮类可以应用到 < a> 和 < button> 元素上，但是，导航和导航条组件只支持 < button> 元素。
如果 < a> 元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=“button” 属性。
使用.btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮
.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 < button> 元素，是通过 :active 状态实现的。对于 < a> 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 < button> 上（包含 aria-pressed=“true” 属性)），并通过编程的方式使其处于激活状态