bootstrap-预定义样式及简单登录框

最新推荐文章于 2024-03-25 08:19:22 发布
最新推荐文章于 2024-03-25 08:19:22 发布
阅读量1.5k 收藏
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aloe_904/article/details/78511328
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预定义样式风格</title>
    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
    <script src="../JS/jquery-3.2.1.min.js"></script>
    <script src="../JS/bootstrap.js"></script>

    <style type="text/css">
        #login{width: 400px;}
    </style>
</head>
<body style="height: 2000px">
<div class="container">
    <br>
    <input type="button" value="自定义" class="btn">
    <input type="button" value="首选项" class="btn btn-primary">
    <input type="button" value="成功" class="btn btn-success">
    <input type="button" value="一般信息" class="btn btn-info">
    <input type="button" value="警告" class="btn btn-warning">
    <input type="button" value="危险" class="btn btn-danger">
    <input type="button" value="默认" class="btn btn-default">
    <input type="button" value="链接" class="btn btn-link">
    <br><br>
    <input type="button" value="首选项" class="btn btn-primary">
    <input type="button" value="首选项" class="btn btn-primary btn-lg">
    <input type="button" value="首选项" class="btn btn-primary btn-sm">
    <input type="button" value="首选项" class="btn btn-primary btn-xs">
    <br><br>
    <br><br>
    <input type="button" value="首选项" class="btn btn-primary">
    <input type="button" value="首选项" class="btn btn-primary active">
    <input type="button" value="首选项" class="btn btn-primary disabled">
    <br><br>
    <br><br>
    <p>默认段落</p>
    <p class="bg-primary">首选项</p>
    <p class="bg-success">成功</p>
    <p class="bg-info">一般信息</p>
    <p class="bg-warning">警告</p>
    <p class="bg-danger">危险</p>
    <br><br>
    <span>默认文字</span><br>
    <span class="text-paimary bg-primary">首选项</span><br>
    <span class="text-success bg-success">成功</span><br>
    <span class="text-info bg-info">一般信息</span><br>
    <span class="text-warning bg-warning">警告</span><br>
    <span class="text-danger bg-danger">危险</span><br>
    <br><br>
    <div class="alert alert-primary">我是警告框</div>
    <div class="alert alert-warning">我是警告框</div>
    <div class="alert alert-info">我是警告框</div>
    <div class="alert alert-success">我是警告框</div>
    <div class="alert alert-danger">我是警告框</div>
    <br><br>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h4>我是面板的标题</h4>
        </div>
        <div class="panel-body">
            <h4>我是面板的主体内容</h4>
        </div>
    </div>
    <br><br><br><br>


    <div id="login" class="panel panel-primary">
        <div class="panel-heading">Login</div>
        <div class="panel-body">
            <div class="form-group">
                <label>用户名：</label><input type="text" class="form-control input-sm">
                <div class="alert alert-warning">用户名不能为空</div>
                <label>密码：</label><input type="password" class="form-control">
                <a href="#" class="text-info">忘记密码</a>
            </div>
            <input type="button" value="登录" class="btn btn-primary pull-right">
        </div>
    </div>
</div>  
</body>
</html>
    <!-- 
    预定义风格的样式： 首选项 成功 一般信息 警告 危险 

    1.按钮样式：
     btn(自定义) primary  success  info  warning  danger default(默认) link(链接)
    2.按钮大小：
    如果没有定义就是默认大小 还有三种：lg sm xs
    3.按钮状态：
    选中状态active  禁用状态:disabled  
    4.按钮种类：
    常给 a input button 这三种标签加按钮样式
    5.按钮默认是行内样式，可以通过设置btn-block使它变成块状，独占一行
    6.按钮组，下节学习

    <种类 class='btn btn-[primary  success  info  warning  danger] btn-[lg sm xs] [active disabled]'>


    背景样式：
    首选项 成功 一般信息 警告 危险
    class='bg-[primary  success  info  warning  danger]'


    文字样式：
    首选项 成功 一般信息 警告 危险
    class='text-[primary  success  info  warning  danger]'


    警告样式：
    首选项 成功 一般信息 警告 危险
    class='alert alert-[primary  success  info  warning  danger]'


    面板样式：
    首选项 成功 一般信息 警告 危险
    class='panel panel-[primary  success  info  warning  danger]'
    class="panel-[heading body]"


    表单样式：
    class="form-control" 大小可以设置input-[lg sm xs]
    <input type="text" class="form-control input-sm">

    -->
只看五分钟佩奇的小姑姑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap显示隐藏密码输入代码.zip
07-04
Bootstrap显示隐藏密码输入代码是一款可用于在表单密码字段上显示或隐藏用户输入的密码。
Bootstrap_03_(全局CSS之表单&按钮&图片&辅助类&响应式工具)
muxianzhi的博客
05-03 646
表单 基本表单 class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100% 示例代码： <form action="" method=""> <label>用户名:</label> <input type="text" class="form-control" /> </form> 之前我们写在文本框前面写用户名 一直都是直接写
CSS实现登录样式
最新发布
nothing
03-25 807
CSS实现登录样式
Bootstrap系列之输入组（Input group）
老__L的博客
06-14 3038
在input的任意一边放置一个附加组件或按钮。你也可以在input的两边都放一个。记住将放在输入组之外。 默认情况下，输入组通过来适应输入组中自定义的表单字段验证。你可以用来禁用它。 将相对表单大小类添加到本身，其中的内容将自动调整大小，而不需要在每个元素上重复表单控件大小类。 在输入组的插件中放置任何复选框或单选选项，代替文本。 虽然可支持多个，但验证样式仅用于具有单个的输入组。 支持多个插件，可以与复选框和单选输入版本混合使用。 输入组包括支持自定义选择和自定义文件输入。不支持这些浏览器的默认版本
WEB前端网页设计-Bootstrap 输入框组
君逍遥o
03-16 1891
输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
关于解决一些密码类型的文本框，在文本框失去焦点之后小眼睛消失的一种解决方案
P1346的博客
05-30 914
像一些系统的登录页面的密码框，没有做特殊的处理，只会在输入的时候有小眼睛，但失去焦点之后就需要清除内容，再输入才能显示 <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/CommonJs/jquery.1.11.min.js"></script&g
Java bootstrap-3.4.1-dist 前端框架
03-18
Java bootstrap-3.4.1-dist 前端框架
swagger-bootstrap-ui-1.9.6-API文档-中文版.zip
07-13
赠送jar包：swagger-bootstrap-ui-1.9.6.jar； 赠送原API文档：swagger-bootstrap-ui-1.9.6-javadoc.jar； 赠送源代码：swagger-bootstrap-ui-1.9.6-sources.jar； 赠送Maven依赖信息文件：swagger-bootstrap-ui-...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
bootstrap最新版资源下载不易。
bootstrap-5.1.3-dist.zip
11-11
bootstrap 发布版本 5.1.3
dash-bootstrap-components：Plotly Dash的Bootstrap组件
01-30
dash-bootstrap-components是用于的组件库，可以更轻松地构建具有复杂，响应式布局的一致样式的Dash应用程序。 目录 安装 聚酰亚胺 您可以使用pip安装dash-bootstrap-components ： pip install dash-bootstrap-...
基于Bootstrap的登录&注册模板（html+css）
热门推荐
皮埃尔的博客
01-28 1万+
基于Bootstrap的登录&注册模板（html+css），适合django等框架，可直接修改对接后端。
Bootstrap组件——输入框
xun__xing的博客
07-30 2186
输入框一、输入框1.基本2.尺寸3.多选框和单选框4.多个输入框与多个额外组件5.按钮组合6.带下拉列表的按钮组合7.分离式按钮8.自定义表单组合9.自定义文件 一、输入框 1.基本 <div class="form-row"> <div class="col"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="in
用vue和bootstrap实现用户登录页面
2201_75321887的博客
04-12 810
用vue和bootstrap实现用户登录页面
简单且实用的密码修改模态框
weixin_44542089的博客
07-17 2878
修改密码相信大家都不会陌生，几乎每个系统都缺不了修改密码，这是增强用户体验性的一种基本要求，一个网站中，若是没有修改密码这一功能的话，绝对活不长久，因为每位用户的都会有账号被盗取，信息被泄露的风险，若不能修改密码，那么对用户的利益便造成了巨大的损失，谁会用这样的网站呢? 所以说，密码的修改功能对于一个完整系统来说是必不可少的，具有重要性的。因此，这次便分享给大家一个以Bootstrap为基础来搭建...
Bootstrap 输入框组
shengyin714959的博客
08-14 219
本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。向。
Bootstrap输入框组中可以使用的元素
歪脖先生的博客
05-16 743
可添加的元素 在输入框组中，你可以在输入框前面或后面添加复选框、单选按钮、按钮、按钮下拉菜单、拼接式按钮下拉菜单、多个按钮等。 1、复选框和单选按钮 只需把复选框或单选按钮放到一个.input-group-addon的 <span> 中，就可以将复选框或单选按钮作为额外元素添加到输入框组中。如： <divclass="input-group"> <sp...
bootstrap—预定义样式风格
秃头少女
09-23 1231
预定义样式风格:        bootstrap给我们预定义了六种不同意义的类——所对应的颜色              muted：    无显示的——无颜色              primary：  重要的——蓝色              success： 成功——绿色              info：        信息——天蓝色              warning： 警告...
使用bootstrap的组件制作一个美观的登陆界面 要求包含用户名 密码与登录按钮 并给出html代码...
weixin_35754676的博客
02-18 353
登录 用户名:
bootstrap框架的介绍及优点
05-28
Bootstrap是一个流行的前端框架，由Twitter开发，它提供了一系列的CSS、JavaScript组件和插件，帮助开发者快速构建现代化的响应式网站和Web应用程序。Bootstrap的优点如下： 1. 响应式设计：Bootstrap框架提供了响应式网格系统，可以根据不同设备的屏幕大小自动调整布局和样式。 2. 简单易用：Bootstrap框架提供了大量的预定义CSS类和JavaScript插件，开发者可以轻松地创建各种组件和交互效果。 3. 浏览器兼容性：Bootstrap框架支持所有主流的浏览器，包括Chrome、Firefox、Safari、IE等。 4. 社区支持：Bootstrap拥有庞大的开发者社区，提供了大量的文档、示例和第三方插件，帮助开发者更加高效地使用框架。 5. 可定制性：Bootstrap框架提供了丰富的选项和配置，可以根据开发者的需要进行定制和扩展。 总之，Bootstrap框架提供了一种快速、简单和强大的开发方式，可以帮助开发者更加高效地构建现代化的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值