bootstrap初接触

时间 2019-11-13

原文原文链接

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

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

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

bootstrap最新版本:前端

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

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

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

bootstrap大概分为几个模块:css3

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

脚手架: 布局相关github

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

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

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

插件内还能够设置不少参数和方法.

如:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4    <title>Bootstrap 实例 - 默认的导航栏</title>
 5    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 6    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 7    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 8 </head>
 9 <body>
10 
11 <nav class="navbar navbar-default" role="navigation">
12    <div class="navbar-header">
13       <a class="navbar-brand" href="#">W3Cschool</a>
14    </div>
15    <div>
16       <ul class="nav navbar-nav">  //备注: nav是导航条样式 navbar-nav是导航条内部ui li的样式
17          <li class="dropdown"> //备注: 使用下拉菜单（Dropdown）插件
18             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
19                Java 
20                <b class="caret"></b>
21             </a>
22             <ul class="dropdown-menu">
23                <li><a href="#">jmeter</a></li>
24                <li><a href="#">EJB</a></li>
25                <li><a href="#">Jasper Report</a></li>
26                <li class="divider"></li>
27                <li><a href="#">分离的连接</a></li>
28                <li class="divider"></li>
29                <li><a href="#">另外一个分离的连接</a></li>
30             </ul>
31          </li>
32       </ul>
33    </div>
34 </nav>
35 
36 </body>
37 </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