Bootstrap全局css样式_按钮
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap全局css样式_按钮
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
鏈接被作為按鈕使用時的注意事項
如果 <a> 元素被作為按鈕使用 -- 并用于在當前頁面觸發某些功能 -- 而不是用于鏈接其他頁面或鏈接
當前頁面中的其他部分，那么，務必為其設置 role="button" 屬性。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><a href="#" class="btn btn-default" role="button">Link</a></div></body>
</html>
跨瀏覽器展現
我們總結的最佳實踐是：強烈建議盡可能使用 <button> 元素來獲得在各個瀏覽器上獲得相匹配的繪制效果。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><button class="btn btn-default" type="submit">提交</button><input type="button" class="btn btn-default" value="按鈕"></div></body>
</html>
預定義樣式
使用下面列出的類可以快速創建一個帶有預定義樣式的按鈕。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><button type="button" class="btn btn-default">默認按鈕</button><button type="button" class="btn btn-primary">首選按鈕</button><button type="button" class="btn btn-success">成功按鈕</button><button type="button" class="btn btn-info">信息按鈕</button><button type="button" class="btn btn-warning">警告按鈕</button><button type="button" class="btn btn-danger">危險按鈕</button></div></body>
</html>
尺寸
需要讓按鈕具有不同尺寸嗎？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><button type="button" class="btn btn-default btn-lg">最大按鈕</button><button type="button" class="btn btn-default">默認按鈕</button><button type="button" class="btn btn-default btn-sm">小按鈕</button><button type="button" class="btn btn-default btn-xs">手機按鈕</button></div></body>
</html>
通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變為了塊級（block）元素。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><button type="button" class="btn btn-default">默認按鈕</button><button type="button" class="btn btn-info btn-xs btn-block">手機按鈕</button></div></body>
</html>
激活狀態
當按鈕處于激活狀態時，其表現為被按壓下去（底色更深、邊框夜色更深、向內投射陰影）。
對于 <button> 元素，是通過 :active 狀態實現的。對于 <a> 元素，是通過 .active 類實現的。
然而，你還可以將 .active 應用到 <button> 上（包含 aria-pressed="true" 屬性)），
并通過編程的方式使其處于激活狀態。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><button type="button" class="btn btn-default active">默認按鈕</button><button type="button" class="btn btn-info btn-xs btn-block active">手機按鈕</button></div></body>
</html>
為 <button> 元素添加 disabled 屬性，使其表現出禁用狀態。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表單</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><button type="button" class="btn btn-default active">默認按鈕</button><button type="button" class="btn btn-info btn-xs" disabled="disabled">手機按鈕</button></div></body>
</html>
?
總結
以上是生活随笔為你收集整理的Bootstrap全局css样式_按钮的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap全局css样式_表单
- 下一篇： Bootstrap全局css样式_辅助类