您的位置：首页 > Web前端 > BootStrap

bootstrap初接触

2015-09-24 22:51 501 查看

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架.(主要是结合HTML5 CSS3的样式, 基于jquery+Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。 )

2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。

GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。

bootstrap最新版本:

V2.3.2

v3.3.5

类似jquery. 2的版本不再更新但能兼容旧版的浏览器. 3版本代码比较简洁,不再兼容IE8甚至是IE7和IE6

2版本的官方地址 http://v2.bootcss.com/

起步和脚手架大概就是介绍bootstrap的情况. 以及搭建页面. 其中可以考虑将引入的js css等文件放到本地,或者使用百度之类的cdn网站,这样访问速度比较快

bootstrap大概分为几个模块:

[脚手架][基本CSS样式] [组件] [javascript插件]

脚手架: 布局相关

基本css样式: 常规的样式.

组件: 下拉菜单按钮组导航条分页警告框进度条等如下面例子 <ul class="nav navbar-nav">

javascript插件: 组件的相关动作实现.如下面例子用到的下拉菜单组件 <li class="dropdown"> 如不使用下拉组件,则点击下拉菜单无响应动作.

插件内还可以设置很多参数和方法.

如:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的导航栏</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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">      //备注: nav是导航条样式 navbar-nav是导航条内部ui li的样式
<li class="dropdown">  //备注: 使用下拉菜单（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>

效果:

最后:

jquery 和Extjs 选择之外在ui方面也出现了新的选择:

easyUI、Extjs和Bootstrap都是浏览器前端控件库，

easyUI基于jQuery，免费的各个控件相对独立；

Extjs更高级一些控件与控件直接的交互用起来会很方便，要收费；

Bootstrap相对前两个来说在控件上面会差很多，但是在不同终端的兼容性方面做得很好，就是电脑、手机、平板等这些，这一点是前两个无法比的。

一般easyUI和Extjs是用来做后台管理系统的，Bootstrap是做网站界面的。

推荐学习地址:
http://getbootstrap.com/2.3.2/ http://v3.bootcss.com/ http://www.runoob.com/bootstrap/bootstrap-tutorial.html http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航