Bootstrap按钮样式
Bootstrap按钮样式
1.新建一个web项目ch07。
2.在ch07中新建一个demo01.html，将css文件模版导入进来。
3.将移动设备优先拷贝到demo01的头文件中。
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no”>
4.导入css文件
5.定义一个button
<div class="container">
<button type="button" class="btn btn-danger">大家好</button>
/*"btn btn-info"是样式，一个css组件设计思想是辅加这种模式，就是先定义这种样式然后再追加一个样式。*/
</div>
6.运行效果，鼠标移上是默认是有效果的。
当然，它定义了七种样式，比如说"btn btn-info"
<div class="container">
<button type="button" class="btn btn-info">大家好</button>
</div>
运行效果：
7.定义按钮的七种样式，我们先给它增加一个样式叫btn，然后再加btn的样式，样式有默认样式、首选项、成功、一般信息、警告、危险、链接。
<!-- Standard button -->
<button type="button" class="btn btn-default ">（默认样式）
Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success ">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
8.运行效果
注意：按钮大小取决于按钮里面文字的大小
Bootstrap按钮样式相关推荐
- bootstrap 按钮样式单选效果_【20201117】Bootstrap前端框架学习笔记
1. 介绍 1.1 介绍 Bootstrap是一个免费的web前端框架,它将HTML.CSS.Javascript结合到一起,制定了一系列的前端开发规则,使设计网页就像搭积木一样简单. 今天我们就跟着 ...
- bootstrap 按钮样式汇总
类样式 描述 .btn 圆角灰色按钮,为了让按钮不那么尖锐,我们的按钮都应该使用这个样式来获得圆角,然后再覆盖上其他的特性. .btn-default 默认/标准按钮,白色的按下灰色. .btn-pr ...
- bootstrap 按钮样式单选效果_【自学C#】I 书 101 单选按钮
一.简介 当需要用户在多个选项中选择一项时,可以使用单选按钮. 单选按钮处于被选中状态时,其左边圆圈中心有一黑点. 单选按钮通常以选项组的形式存在,在由若干单选按钮组成的选项组中,每次只能选中其中一个 ...
- bootstrap 按钮样式大全
文章来自:源码在线https://www.shengli.me/css/423.html 效果: 大小按钮的样式: 代码: 效果:
- html向左箭头样式,详解Bootstrap的纯CSS3箭头按钮样式
简要教程 这是一款基于Bootstrap的纯CSS3箭头按钮样式.该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮. [相关视频推荐:Bootstrap教程] 安装 可以 ...
- Bootstrap 警告框组件 + 退出按钮样式 实现一个可退出的警告框
Bootstrap 实现可退出的警告框 通过bootstrap的警告框组件和退出按钮的样式就可以实现一个简单的可退出警告框: 先来看看退出按钮样式的实现: <button type=" ...
- html css 带图标按钮,Bootstrap带图标的按钮样式
这是一款基于bootstrap的带图标的按钮样式.这组按钮在bootstrap按钮的基础上,通过附加的HTML元素来构建小图标,并通过CSS3来制作鼠标hover动画效果. 使用方法 在页面中引入bo ...
- Bootstrap—基础样式定义
本章主要是介绍Bootstrap默认的基础样式定义,利用这些基础的定义相互组合,完成页面的整体风格定义甚至是更具体的效果. Bootstrap应该是一个基础工具,它的好处在于已经帮你定义了一个基础的样 ...
- Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...
最新文章
- 图形交互界面_人机交互界面UI简介
- 2019年寒假作业1编辑总结
- shiro实现url级别的权限控制（用户登录）配置文件分析
- JSON 数据 演示
- iOS 集合的深复制与浅复制
- MVC4发布到IIS7报404错误
- linux路由内核实现分析(二)---FIB相关数据结构(2)
- 深度学习入门有多难？这篇带你零基础入行
- webpack+vue解决前端跨域问题
- 计算机信息网络功能修改,IP地址自动修改的功能移植
- Matlab代码生成任意边长等间距正六边形采样点
- 2022年最新google drive 谷歌云盘下载文件限额解决方法
- 赚自己的淘宝佣金，让返利网无路可走
- Linux 脚本修改ps1,Ubuntu修改命令提示符PS1教程(非常详细)
- narwal机器人_Narwal云鲸扫地机器人扫拖彻底，用户用得更省心省力
- 五子棋-单机游戏-微信小游戏项目开发入门
- FlashVml2.0（WEB上的PhotoShop+Flash、VML最强开发工具）[推荐]
- 从零搭建vue-ssr详细介绍
- 模糊控制matlab算例,matlab模糊逻辑工具箱
- FC5 安装 Xine