Bootstrap学习笔记 10
来源:互联网 发布:剑三儒风盾太数据 编辑:程序博客网 时间:2024/06/11 08:33
Button 风格
<button type="button" class="btn btn-default">Default</button><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-link">Link</button>
Button Tags
button
风格可以用于 <a>
, <button>
, 或者<input>
<a href="#" class="btn btn-info" role="button">Link Button</a><button type="button" class="btn btn-info">Button</button><input type="button" class="btn btn-info" value="Input Button"><input type="submit" class="btn btn-info" value="Submit Button">
Button 大小
<button type="button" class="btn btn-primary btn-lg">Large</button><button type="button" class="btn btn-primary btn-md">Medium</button><button type="button" class="btn btn-primary btn-sm">Small</button><button type="button" class="btn btn-primary btn-xs">XSmall</button>
Button 块
Button 块会占用父元素的整个宽度
<h2>Block Level Buttons</h2><button type="button" class="btn btn-primary btn-block">Button 1</button><button type="button" class="btn btn-default btn-block">Button 2</button><h2>Large Block Level Buttons</h2><button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button><button type="button" class="btn btn-default btn-lg btn-block">Button 2</button><h2>Small Block Level Buttons</h2><button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button><button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
Button 状态
<button type="button" class="btn btn-primary">Primary Button</button><button type="button" class="btn btn-primary active">Active Primary</button><button type="button" class="btn btn-primary disabled">Disabled Primary</button>
完整代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/> <title>Buttons</title> </head> <body> <div class="container"> <div> <h2>Button Styles</h2> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </div> <div> <h2>Button Tags</h2> <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button"> </div> <div> <h2>Button Sizes</h2> <button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary btn-md">Medium</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary btn-xs">XSmall</button> </div> <div> <h2>Block Level Buttons</h2> <button type="button" class="btn btn-primary btn-block">Button 1</button> <button type="button" class="btn btn-default btn-block">Button 2</button> <h2>Large Block Level Buttons</h2> <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button> <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button> <h2>Small Block Level Buttons</h2> <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button> <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button> </div> <div> <h2>Button States</h2> <button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary disabled">Disabled Primary</button> </div> </div> </body></html>
阅读全文
1 0
- Bootstrap学习笔记 10
- Bootstrap 3.3.7学习笔记10
- bootstrap的学习笔记
- Bootstrap学习笔记
- bootstrap学习笔记
- bootstrap框架学习笔记
- bootstrap学习笔记
- AngularJs学习笔记--bootstrap
- 学习bootstrap笔记
- Bootstrap学习笔记
- bootstrap学习笔记
- AngularJs学习笔记--bootstrap
- bootstrap框架学习笔记
- Bootstrap学习笔记
- bootstrap学习笔记1
- BootStrap学习笔记
- Bootstrap学习笔记
- Bootstrap学习笔记
- Python之scrapy使用教程
- PEID加密算法识别插件Krypto ANALyzer
- hadoop实现wordcount的三种方法
- 状态保持
- 吴恩达【深度学习工程师】学习笔记(六)
- Bootstrap学习笔记 10
- 我理解的java流基础篇(四)
- Linux操作系统 第四次实验-Linux系统管理
- 定时器触发时间设置学习
- SpringMVC 4.1 新特性(三)集成Bean Validation 1.1(JSR-349)
- HTML特殊符号对照表、常用的字符实体
- 删除织梦后台验证码及数据库替换时的验证码
- easyUI 查询 入口参数和返回参数
- 并查集总结篇