14.字体和按钮

来源：互联网发布：公务员考试试题软件编辑：程序博客网时间：2024/06/05 03:28
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"><!--需要额外添加一个父级，input做按钮也需要父级，而a标签不需要父级-->                    <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"><!--两端对齐-input标签-->                <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标签-->                 <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.运行结果：
这里写图片描述
0 0