bootstrap 预定义样式风格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 处理低版本IE 4.0不考虑IE8 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 移动端视口的设置 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 引入bootstrap.css --><link rel="stylesheet" href="css/bootstrap.css"><style>#login{ width:400px;}</style>
</head>
<body>
<div class="container"><br><input type="button" value="默认样式"><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"><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><span>默认文字</span><span class="text-primary">首选项</span><span class="text-success">成功</span><span class="text-info">一般信息</span><span class="text-warning">警告</span><span class="text-danger">危险</span><br><a href="#" class="btn btn-primary">连接1</a><a href="#" class="bg-success">连接2</a><a href="#" class="text-danger">连接3</a><br><br><div class="alert alert-warning">我是警告框</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">我是面板的主体内容！</div></div></div>
<div class="container"><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"><div class="alert alert-warning">用户名不能为空！</div><label>密码:</label><input type="password" class="form-control"></div><a href="#" class="text-info">忘记密码?</a><input type="button" value="登录" class="btn btn-primary pull-right"></div></div>
</div></body>
<script>/*预定义样式风格primary (首选项)success (成功)info (一般信息)warning (警告)danger (危险)实例 ：登录框*/
</script>

转载于:https://www.cnblogs.com/xiaozhishang/p/5228309.html

bootstrap 预定义样式风格相关推荐

Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
一.按钮按钮是网页中不可缺少的一种组件,例如页面中搜索.注册等按钮.按钮还广泛应用于表单.下拉菜单.模态框等场景中. 1.预定义样式类 Bootstrap提供了btn来定义按钮,btn ...
android 动态设置style属性值,android中的style属性值，以及一些预定义样式
Android平台定义的主题样式:android:theme="@android:style/Theme.Dialog" // 将一个Activity显示为对话框模式 androi ...
Bootstrap常用布局样式
Bootstrap常用布局样式 1 内容布局 1.1 标题类 1.2 文本类 1.3 列表类 2 代码和图文布局 2.1 代码样式 2.2 图文样式 3 表格布局 4 辅助样式 4.1 添加或移除边框 ...
Bootstrap全局css样式_按钮
链接被作为按钮使用时的注意事项如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role ...
应用程序主题研发有妙招！DevExtreme拥有多种预定义主题样式
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout ...
bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
BootStrap 组件和样式
BootStrap 简介概念: 课程目标: 响应式布局技术了解BootStrap前端框架二.BootStrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优 ...
java基础入门-预定义类与自定义类
预定义类与自定义类先上代码 <span style="font-size:14px;">package com.ray.object;import java.util ...
Flink Pre-defined Timestamp Extractors / Watermark Emitters（预定义的时间戳提取/水位线发射器）...
https://ci.apache.org/projects/flink/flink-docs-release-1.6/dev/event_timestamp_extractors.html 根据官网 ...
预定义类型未定义或导入_LimeSurvey基础教程（二）——问题类型
在上一讲中,我们主要介绍了LimeSurvey的历史.功能.结构以及使用场景,其中就提到"20种以上题型,可自由运用".从某种意义上来说,调查就是由一系列的问题(类型)所组成,所以 ...

bootstrap 预定义样式风格

bootstrap 预定义样式风格相关推荐

最新文章

热门文章