BootStrap学习笔记-5

来源：互联网发布：高性能网络编程6 编辑：程序博客网时间：2024/05/08 08:17
fiveLesson
BootStrap-CSS-button and image
<!DOCTYPE html><html lang="zh-CN"><head><title>BootStrap-CSS</title><meta charset = "utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  </head><body><div class="container"><!-- 按钮样式 --><div class="div1"><button type="button" class="btn btn-default">default</button><button type="button" class="btn btn-success">success</button><button type="button" class="btn btn-primary">primary</button><button type="button" class="btn btn-link">link</button><button type="button" class="btn btn-warning">warning</button><button type="button" class="btn btn-info">info</button><button type="button" class="btn btn-danger">danger</button></div><hr><div class="div2"><button type="button" class="btn btn-info btn-lg">info</button><button type="button" class="btn btn-info">info</button><button type="button" class="btn btn-info btn-sm">info</button><button type="button" class="btn btn-info btn-xs">info</button></div><hr><!-- btn-block填满父容器 --><div class="div3"><!-- 虽然样式一样，但是还是建议使用button --><button type="button" class="btn btn-default btn-block">default</button><!-- a标签一样可以实现button样式效果 大多数开发时，a标签出现几率比较大 disabled="disabled"设置禁用--><a href="#" class="btn btn-default btn-block" role="button" disabled="disabled">default</a><br><input class="btn btn-default" type="button" value="default"></div><hr><!-- img标签 --><div class="div4"><!-- 圆形img --><img src="" alt="" class="img-circle"><!-- 圆角矩形img --><img src="" alt="" class="img-rounded"><!-- 带边框img --><img src="" alt="" class="img-thumbanil"></div></div></body></html>
0 0