Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScrip 的,它简洁灵活,使得 Web 开发更加快捷。
我们利用Bootstrap模板可以做出相当美观的菜单,导航,图标,按钮等各种各样的布局组件,它可以帮助我们节省大量的时间
首先要进行Bootstrap的环境安装
我们可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本
在下载页面中
- Download Bootstrap:下载 Bootstrap。点击该按钮,下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
- Download Source:下载源代码。点击该按钮,我们可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
这是一个使用了Bootstrap的Html模板
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- 包括所有已编译的插件 --> <script src="js/bootstrap.min.js"></script> </body> </html>
在这里,我们可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件,用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。非常省时省力
再如,我们要创建一个导航栏
创建一个默认的导航栏的步骤如下:
- 向 <nav> 标签添加 class .navbar、.navbar-default。
- 向上面的元素添加 role="navigation",有助于增加可访问性。
- 向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
- 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
下面是利用Bootstrap模板做出来的
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的导航栏</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </nav> </body> </html>
模型如下:
相关推荐
bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap 前端框架 css框架 bootstrap ...
这是C# mvc 5框架快速搭建文档,包含bootstrap前端框架。
bootstrap前端框架教程.zip 1.引入Bootstrap CDN 2.最简单的Bootstrap例子 3.可视化拖曳布局,生成HTML代码 4.Container类 5.Bootstrap的网格系统 6.控件 7.插件 8.UI编辑器 9.Bootstrap HTML编码规范 10.CSS编码...
最早期的 Bootstrap 前端框架,应该兼容 IE 8 - IE 11 等早期浏览器。使用 jQuery 作为默认 js 框架。 适合古董网站的维护和升级,情怀玩家们不要错过了哦 :)
Bootstrap前端框架.docx Bootstrap和普通的HTML页面一样,定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样
bui后台管理系统模板bootstrap前端框架html模板.zip
这是一个纯静态的网址导航网站,内容均由viggo收集并整理。项目基于bootstrap前端框架开发。
基于angularjs+bootstrap的前端框架,内置全套angularjs插件及bootstrap插件
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架,用于开发响应式布局、移动设备优先的WEB项目,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式。
关于ssm的多表联查实例,用bootstrap来进行前端的设计。
不错的html5的前端框架,集成了完整的bootstrap脚本,可切换8中不同的前端样式; 封装了常用的grid表格、在线编辑器、文件上传、日期控件、进度条、弹出框等。 是UI设计不错的选择。
Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 一个框架、多种设备。 你的网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC ...
一款漂亮的静态后台模板,使用Bootstrap4框架,HTML5, CSS3构建。这套后台模板集成可重用的UI组件和最新的jQuery插件。这套后台UI界面设计简约直观,可以用于所有类型的web应用程序、自定义管理系统、项目管理系统、...
简介MVC开始是存在于桌面程序中的,M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形
这个是我项目中开发的项目 是前后台分离的 这只是前台一部分 可以当成案例 是可以适应的 bootstrap的例子上传 评论回复都有
10个Bootstrap热门的前端框架网站案例.docx
素材描述:thinkphp3.2+bootstrap开发的多城市切换家教网开源源码,全国连锁一对一上门家教辅导品牌,精选全国各大名校学霸状元,提供高品质一对一辅导家教平台源码。 TP框架为国内PHP开发框架使用人数较多、操作...
Windows8 风格的BootStrap,简洁好用