每日一bootstrap 按钮

左手的ㄟ右手 2022-07-29 09:16 143阅读 0赞

按钮是网页上常见的一个标签，所以复习下按钮的样式。

首先要知道的是，在bootstrap中 a button input都可以赋予按钮样式，a标签需要注意有些地方的使用  
所以如果就是单纯的按钮的话建议就使用button标签就好。而且如果在导航条上单独使用按钮时（如果不在form中出现）也需要注意垂直居中问题。下面开始敲代码

<button class="btn btn-default">default</button>
            <button class="btn btn-success">success</button>
            <button class="btn-danger">danger</button>
            <button class="btn btn-info">info</button>
            <button class="btn btn-warning">warning</button>
            <button class="btn btn-primary">primary</button>
            <button class="btn btn-link">link</button>

![这里写图片描述][20160319215228487]

可以看到btn给按钮加了圆角样式。让按钮更加好看一些吧。

下面是改变按钮大小，其实bootstrap很多改变大小的代码差不多。。

![这里写图片描述][20160319215858130]

这个色很好看，反正我经常用

接下来就是导航栏里的按钮如何使用。。

<nav class="navbar navbar-default">
                <button class="btn btn-default">按钮</button>
            </nav>
            <nav class="navbar navbar-default">
                <button class="btn btn-default navbar-btn">按钮</button>
            </nav>

![这里写图片描述][20160319221818221]

为了看得更清楚一些，navbar-default是给导航条添加了灰色背景色，可以清楚地看出之间的差别一个垂直居中，一个没有

[20160319215228487]: /images/20220728/173f81a795ea4fdcb99a5eadb4082a57.png
[20160319215858130]: /images/20220728/53b2a1efb45c4f8d8a8d60b77cfd76de.png
[20160319221818221]: /images/20220728/2dbce8c9430449c3a50e52d9146252f6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。按钮主要有下面两类形式： ![在这里插入图片描述][755f5d09c8b4427dad35711bf0

╰+哭是因爲堅強的太久メ/ 2023年09月24日 16:57/ 0 赞/ 81 阅读

相关 Bootstrap按钮

任何带有class.btn的元素都会继承圆角灰色按钮的默认外观。 .btn 为按钮添加基本的样式 .btn-default 默认/标准按钮 .btn-

矫情吗；*/ 2022年08月23日 05:44/ 0 赞/ 211 阅读

相关每日一bootstrap 表单

这一篇来到复习一下bootstrap的表单，表单还是比较重要的一部分，学好表单还是很重要的。表单有几点还是要注意的，一个是label虽然在网页上没什么太多效果，但对于鼠标用

快来打我*/ 2022年08月21日 04:58/ 0 赞/ 133 阅读

相关每日一bootstrap 表格

表格so easy的。今天复习起来还是蛮快的一会就敲完了~~敲完就可以干别的事了表格只要记住原来的HTML格式，那就是加几个class的事情，非常容易代码用到了上一

拼搏现实的明天。/ 2022年08月21日 03:06/ 0 赞/ 129 阅读

相关每日一bootstrap 栅格

最近写bootstrap少了，老是忘记，所以决定每天从基础开始一点点敲敲，bootstrap很好学，看着官网的API都敲一遍就会了一下都是我的一下体会什么的，希望可以帮到

Bertha 。/ 2022年08月21日 02:08/ 0 赞/ 135 阅读

相关 bootstrap按钮

本文主要讲解的是按钮的样式，主要包括：1.选项；2.尺寸；3.活动状态；4.禁用状态；5.可做按钮使用的Html标签；6.总结。选项 [![Image 1][]][Ima

﹏ヽ暗。殇╰゛Y/ 2022年08月18日 02:59/ 0 赞/ 203 阅读

相关每日一bootstrap 按钮

按钮是网页上常见的一个标签，所以复习下按钮的样式。首先要知道的是，在bootstrap中 a button input都可以赋予按钮样式，a标签需要注意有些地方的使用

左手的ㄟ右手/ 2022年07月29日 09:16/ 0 赞/ 144 阅读

相关 bootstrap 按钮

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

阳光穿透心脏的1/2处/ 2022年06月03日 09:49/ 0 赞/ 227 阅读

相关 bootstrap按钮

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

左手的ㄟ右手/ 2022年01月15日 18:53/ 0 赞/ 285 阅读

相关 bootstrap_按钮

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="...

灰太狼/ 2021年03月28日 14:01/ 0 赞/ 581 阅读