自适应的按钮

/*自适应按钮*/
button{
padding:.3em .8em;
border:1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgb(0,0,0,.5);
color:white;
text-shadow: 0 -.05em .05em rgb(0,0,0,.5);
font-size: 125%;
line-height: 1.5;
}
button.cancel{background:#c00;}
button.ok{background:#6b0;}

***************未完待续*******************

时间: 2024-10-07 16:32:03

自适应的按钮的相关文章

自适应宽度按钮

按钮的宽度会随着字数而变 <title>无标题文档</title> <style type="text/css"> a{ float:left; text-decoration:none; display:block; height:37px; line-height:37px; text-align:center; font-weight:bold; color:#FF6600; font-size:14px; background:url(an3

Bootstrap系列 -- 33. 等分按钮

等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名. <div class="btn-wrap"> <div class="btn-group btn-group-justified"> <a class="btn btn-default" href="#">首页</a> <

Bootstrap之菜单、按钮及导航

下拉菜单(基本用法) 特别声明:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" dat

Bootstarp学习(九)按钮扩展

按钮(按钮组) 单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等.那么在这一节中,我们主要向大家介绍Bootstrap框架为大家提供的按钮组组件. 源码查询: 按钮组也是一个独立的组件,所以可以找到对应的源码文件: ?  LESS版本:对应的源文件为buttons.less ?  Sass版本:对应的源文件为_buttons.scss ?  CSS版本:对应bootstrap.css文件第3131行-第3291行

【前端】css自适应宽度滑动门菜单

html     css    width  自适应 什么是CSS自适应宽度滑动门菜单? CSS自适应宽度菜单指菜单的宽度可以随着内容的增加而变宽,就拿下边的实例来说,是按4个字的宽度来设计的,如果其中一项为5个字或更多,就放不下了.那么我们就需要让它的宽度可以随着内容的增减而变化,这就是css自适应宽度菜单.         自适应宽度按钮的效果是怎样的呢? 那么,自适应宽度按钮,是怎么实现的呢? 要想实现自适应宽度,需要在文字上增加一个辅助标签,如span,分别在a上和span上设置背景,一

Bootstrap

第一章:认识Bootstrap Bootstrap的特点:灵活.优雅.可扩展. Bootstrap的定义:简单灵活的用于搭建Web页面的HTML.CSS.JavaScript工具集. Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用. Bootstrap不支持IE8. 第二章:排版 一.全局样式: Bootstrap不再一味的清零,而是注重重置可能产生的样式,保留和坚持部分浏览器的基础样式. 二.标题: Bootstrap定义标题也使用<h1>到

bootstrap学习记录(慕课网教程)

1.当主标题下需要副标题时可在h中嵌套small<h1>nihao<small>a</samll></h1> 2.当某一段落需要突出显示时可添加lead类,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理 class="lead" 3.在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗.在Bootstrap中,可以使用<b>和<strong>标签让文本直接加粗.

bootstrap-12

按钮(按钮组) 使用方法:按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行.不过我们同样可以直接只调用bootstrap.js文件.使用一个名为btn-group的容器. <div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step

2015年11月27日 BootStrap知识点汇总

一.BootStrap简介 BootStrap不支持IE的兼容模式,加入 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 平时使用的移动浏览器是放在虚拟视口viewport中,虚拟视口比屏幕宽,会破坏没有针对移动浏览器的布局,viewport可以让开发者控制网页的大小和缩放,width=device-width让宽度等于设备的宽度,初始缩放比例为1也就是不缩放,网页会显得更细腻,为了更好地适配移