bootstrap初接触
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
bootstrap初接触的更多相关文章
- 初接触BurpLoader工具
初接触burp工具 菜鸟一枚,现在在接触一段时间测试,我在测试功能性的时候,想着网站被黑案例那么多,我是不是也应该弄弄安全性测试了,所以就有了下边的第一次接触BurpLoader工具来测试手机的app ...
- 软工实践练习-Git初接触
第一次听到Git,有点不知所云,听了实践课老师的讲解,才明白了Git作为最先进的分布式版本控制系统的重要性. 至于Git的安装和使用仍旧是自己摸索着去完成了,当然在这过程中也是遇到了很多的问题. 接下 ...
- vi初接触
vi初接触 它有三种模式: 一 一般模式 二 编辑模式 三 命令行模式 介绍几种比较常用的吧 -- 退出:q 写入:w 强制:! (以上可叠加) 显示行号:set nu 取消:set nonu 跳转到 ...
- ExtJS初接触 —— 了解 Ext Core
ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...
- ExtJS初接触 - 在项目中使用ExtJS
ExtJS初接触 - 在项目中使用ExtJS 今天ExtJS官网发布了ExtJS最新正式版4.2.1.Ext JS 4.2.1 正式版 下载 ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI ...
- Java之路——Java初接触
本文大纲 1.Java是什么 2.Java历史 3.Java技术范围 3.1 Java SE平台技术范围 3.2 Java EE技术范围 3.3 Java 体系技术范围 4.总结 1.Java是什么 ...
- python 之 数据类型初接触
python 之 数据类型初接触 标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Set(集合) Dicti ...
- Dapr微服务应用开发系列2:Hello World与SDK初接触
题记:上篇介绍了Dapr的环境配置,这次我们来动手尝试一下Dapr应用的开发 Hello World Dapr应用的Hello World其实和其他的Hello World一样简单: 首先用你喜欢的语 ...
- 坚持自学的第二天,bootstrap初入门
前言 昨天,初步学完了jekyll目录结构与Liquid语法的应用与认识. 日志 今天刚入门,做了一个bootstrap导航栏,但是选中状态不行,找了JS中写好的API,写法与视频中讲的有点不一样,但 ...
随机推荐
- MultiDex到底有多坑
google为什么要引入MultiDex? dex指令是用16位寄存器来保存dex中的方法数,所以限制了在apk 中最大的方法数为65535,当超过这个最大值在编译的时候会报 方法数超标的错误. 如何 ...
- 0517 Scrum 项目4.0
Sprint 1看板: 任务认领(一种标签颜色代表一个人的任务): 许佳仪:紫色 柯晓君:红色 赖文亮:蓝色 卓宇靖:黑色 每日例会的时间:16:00 地点:课室 成员 团队贡献分 许佳仪 1 ...
- flask 程序结构概括
以此结构为例,这个小项目是<Flask Web开发:基于python的web应用开发实战>第一部分结束后的代码框架 第一层 有app.tests.migrations三个文件夹和confi ...
- meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
<meta name="viewport" content="width=device-width,initial-scale=1.0"> c ...
- C++ | boost库 类的序列化
是的,这是今年的情人节,一篇还在研究怎么用的文章,文结的时候应该就用成功了. 恩,要有信心 神奇的分割线 不知何时装过boost库的header-only库, 所以ratslam中的boost是可以编 ...
- javascript画直线和画圆的方法(非HTML5的方法)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 2016 - 1- 24 大文件下载 关于NSOutStream 的使用补充
// // ViewController.m // 大文件下载 // // Created by Mac on 16/1/24. // Copyright © 2016年 Mac. All right ...
- Nested List Weight Sum -- LeetCode 339
Given a nested list of integers, return the sum of all integers in the list weighted by their depth. ...
- My first Scratch small game
My first Scratch small game:https://scratch.mit.edu/projects/62700370/ PC or Mac only. Browser & ...
- Linux多人群聊系统(简单多线程服务器)
一:要求 1.通过一个服务器实现最多5个客户之间的信息群发. 2.服务器显示客户的登录与退出: 3.客户连接后首先发送客户名称,之后发送群聊信息: 4.客户输入bye代表退出,在线客户能显示其他客户的 ...