14.字体和按钮

2024-04-27 15:06:44

字体：大中小

来源：转载

供稿：网友

1字体详见bootstrap官网组件页面，将下载好的fonts包放在相应文件夹，但不必引用，直接在class中引用对应名称即可。地址：http://v3.bootCSS.com/components/ 2.按钮代码如下:

<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /></head><body> <div class="container" style="margin-top:5px"> <div class="row"> <button class="btn btn-PRimary">单个</button> <button class="btn btn-success">单个</button> <button class="btn btn-info">单个</button> </div> <div class="row" style="margin-top:5px"> <div class="btn-group"> <button class="btn btn-primary">按钮组</button> <button class="btn btn-success">按钮组</button> <button class="btn btn-info">按钮组</button> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group btn-group-lg"> <button class="btn btn-primary">大按钮</button> <button class="btn btn-success">大按钮</button> <button class="btn btn-info">大按钮</button> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group btn-group-md"> <button class="btn btn-primary">中按钮</button> <button class="btn btn-success">中按钮</button> <button class="btn btn-info">中按钮</button> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group btn-group-sm"> <button class="btn btn-primary">小按钮</button> <button class="btn btn-success">小按钮</button> <button class="btn btn-info">小按钮</button> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group btn-group-xs"> <button class="btn btn-primary">极按钮</button> <button class="btn btn-success">极按钮</button> <button class="btn btn-info">极按钮</button> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group-vertical"> <button class="btn btn-primary">竖着排列</button> <button class="btn btn-success">竖着排列</button> <button class="btn btn-info">竖着排列</button> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button class="btn btn-primary">两端对齐-一个父级</button> <button class="btn btn-success">两端对齐-一个父级</button> <button class="btn btn-info">两端对齐-一个父级</button> </div> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button class="btn btn-primary">两端对齐-多个父级</button> </div> <div class="btn-group"> <button class="btn btn-success">两端对齐-多个父级</button> </div> <div class="btn-group"> <button class="btn btn-info">两端对齐-多个父级</button> </div> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <input type="button" class="btn btn-primary" value="input标签按钮"/> </div> <div class="btn-group"> <input type="button" class="btn btn-success" value="input标签按钮"/> </div> <div class="btn-group"> <input type="button" class="btn btn-info" value="input标签按钮"/> </div> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">a标签按钮</a> <a href="#" class="btn btn-success">a标签按钮</a> <a href="#" class="btn btn-info">a标签按钮</a> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group"> <button class="btn btn-primary">按钮加三角<span class="caret"></span></button> <a href="#" class="btn btn-info">按钮加三角<span class="caret"></span></a> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group"> <button class="btn btn-primary">下拉按钮</button> <button class="btn btn-primary"><span class="caret"></span></button> </div> </div> <div class="row" style="margin-top:5px"> <div class="btn-group dropup"> <button class="btn btn-primary">上拉按钮</button> <button class="btn btn-primary"><span class="caret"></span></button> </div> </div> </div> <script src="js/jquery-2.1.0.js"></script> <script src="js/bootstrap.js"></script></body></html>

3.运行结果：这里写图片描述