bootstrap --- 按鈕

在這里插入圖片描述

<head><!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body style="padding:5px;"><p><!-- 標準按鈕樣式 --><button type="button" class="btn btn-default">默認</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><!-- 使其看起來向一個鏈接, 同時保持按鈕的行為 --><button type="button" class="btn btn-link">Link</button></p><p><button type="button" class="btn btn-primary btn-lg">大號按鈕</button><button type="button" class="btn btn-default btn-lg">大號按鈕</button></p><p><button type="button" class="btn btn-primary ">默認按鈕</button><button type="button" class="btn btn-default ">默認按鈕</button></p><p><button type="button" class="btn btn-primary btn-sm">小號按鈕</button><button type="button" class="btn btn-default btn-sm">小號按鈕</button></p><p><button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button><button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button></p><p><button type="button" class="btn btn-primary btn-lg btn-block"> 此按鈕為塊級元素</button><button type="button" class="btn btn-default btn-lg btn-block"> 此按鈕為塊級元素</button></p><p><button type="button" class="btn btn-primary btn-lg" disabled="disabled">主要按鈕</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">按鈕</button></p><p><a href="#" class="btn btn-primary btn-lg disabled" role="button">主要鏈接</a><a href="#" class="btn btn-default btn-lg disabled" role="button">鏈接</a></p>
</body>
</html>

提交按鈕樣式

在這里插入圖片描述

// 點擊提交之后顯示loading... 且按鈕變為禁用狀態
<button id='loading-btn' data-loading-text="Loading..." class="btn btn-primary"> 提交 </button>
<script>$('#loading-btn').click(function (){var btn = $(this)btn.button('loading')})
</script>
// data-loading-text:點擊之后的文本

參考 https://v3.bootcss.com/css/#buttons
參考《CSS高效開發實戰》 P161~P163

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251489.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251489.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251489.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！