如何使用bootstrap
2017-03-28 22:29
218 查看
前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子。但我完全不会bootstrap...
View Code
效果图:
现在,你会使用bootstrap了吧,哈哈
建议好好看下官网,我可是看了整个下午……都没看完……
下载&目录
看bootstrap官网,接着我下载了用于生产环境Bootstrap:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好,世界!</h1> <div class="jumbotron container"> <div > <h1>Hello, world!</h1> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </body> </html>
View Code
效果图:
现在,你会使用bootstrap了吧,哈哈
建议好好看下官网,我可是看了整个下午……都没看完……
相关文章推荐
- 如何使用开源库,吐在VS2013发布之前,顺便介绍下VS2013的新特性"Bootstrap"
- [备用]权限设计方案、如何使用session、MVC如何使用模板、DropdownList、怎么添加Bootstrape框架、使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)
- bootstrap中如何多次使用一个摸态框
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- 对于Bootstrap的介绍以及如何使用
- bootstrap-如何在modal中使用collapse
- Bootsrtap学习之一:如何使用Bootstrap
- 如何使用bootStrap中的dataTable插件
- javaweb动态网站-----如何在javaweb项目中使用bootstrap框架
- ruby on rails 如何使用gem "twitter-bootstrap-rails"
- 如何使用开源库,吐在VS2013发布之前,顺便介绍下V2013的新特性"Bootstrap"
- 如何在 Laravel 5.1 中使用 Laravel Elixir 集成安装 Bootstrap
- 如何开始使用bootstrap
- html中如何使用bootstrap
- CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:
- Bootstrap系列 -- 1. 如何使用Bootstrap
- 前端框架Bootstrap的Modal使用Ajax数据源,如何避免数据被缓存
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- 如何使用Bootstrap 按钮实例详解
- Bootsrtap学习之一:如何使用Bootstrap