美化自适应按钮

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>等分按钮</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
    .btn{

    text-overflow:ellipsis;
/*超出部分显示省略号*/
    overflow:hidden;
/*超出部分隐藏*/
    white-space:pre;
/*元素内空白符保留*/

}
</style>
</head>
<body>
<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
        <!--自适应按键组-->
    <a class="btn btn-default" href="#">首页</a>
    <a class="btn btn-default" href="#">产品展示</a>
    <a class="btn btn-default" href="#">案例分析</a>
    <a class="btn btn-default" href="#">联系我们</a>
  </div>
</div>
   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

时间: 2024-08-30 05:48:24

美化自适应按钮的相关文章

实例:美化自适应按钮

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>等分按钮</title><link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel

关于Google圆角高光高宽自适应按钮及其拓展

关于Google圆角高光高宽自适应按钮及其拓展————源自张鑫旭css讲解 这篇文章发布于 2009年10月24日,星期六,18:08,归类于 css相关. 阅读 48770 次, 今日 1 次 by zhangxinxu from http://www.zhangxinxu.com本文地址: http://www.zhangxinxu.com/wordpress/?p=292 一.前言对于一门技术而言,要想达到真正的高度,需要形成自己关于这门技术的世界观.我在研究css上花费的功夫相对多些,但

input file上传表单美化file按钮美化篇

一.表单input file样式说明   -   TOP 本上传表单特效是使用纯DIV+CSS代码实现,兼容各大浏览器,使用方便在此美化基础上稍加CSS美化将获得更好的美化效果,也就是通过DIV CSS样式美化上传表单控件. 二.CSS file美化后效果图   -   TOP file表单美化效果图 支持多浏览器与老旧版本浏览器,测试IE6-IE8 火狐.谷歌浏览器均兼容. 三.所有HTML+CSS代码:   -   TOP <!DOCTYPE html PUBLIC "-//W3C//

通过CSS3伪类,美化Radio按钮样式

CSS3样式: /* RADIO */.button-holder { width: 100%;}.regular-radio { display: none;}.regular-radio + label { -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12

java中swing组件设置icon自适应按钮大小

代码如下: ImageIcon icon1 = new ImageIcon(curDir + "/img/folder.png"); Image img = icon1.getImage(); Image newimg = img.getScaledInstance(width,height,java.awt.Image.SCALE_SMOOTH); ImageIcon icon = new ImageIcon(newimg); JButton button = new JButton

html bottom html submit按钮表单控件与CSS美化(http://www.divcss5.com/html/h619.shtml)

html bottom按钮html submit按钮控件html表单按钮控件-html bottom与html submit按钮表单控件与CSS美化,介绍form input bottom按钮和html input submit按钮基本结构与用法,html按钮控件bottom和submit区别,同时DIVCSS5对html按钮美化布局. 一般提交按钮使用了html submit和html bottom两种按钮控件实现同时可将按钮设置CSS样式美化为时间设计图片按钮,首先DIVCSS5介绍html

自适应的按钮

/*自适应按钮*/ 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,.

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:自适应大小的按钮组

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 按钮</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quo

bootstrap3 - 自适应导航

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title>自适应导航</title>     <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> </