1.Bootstrap介绍

作者: 何向宇 | 来源:发表于2016-07-20 11:44 被阅读641次

1.1简介:
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

1.2特点:
(1)跨设备、浏览器
甚至兼容IE7、8,一般不考虑IE9以下的浏览器
(2)响应式布局
不仅可以支持PC端的各种分辨率的显示,还可以支持移动端屏幕响应式切换显示。
(3)提供全面的组件
提供大量实用的组件,包括:导航、标签、工具条、按钮等一系列组件
(4)内置jQuery插件
内置很多实用的jQuery插件
(5)支持HTML5 、CSS3
HTML5语义化标签和CSS3属性都得到很好的支持。
(6)支持LESS动态样式
LESS实用变量、嵌套,操作混合编码,编写更快、更灵活的CSS,能和Bootstrap很好的配合开发。

1.3Bootstrap结构:
BootStrap下载地址:http://v3.bootcss.com/ (选择生产环境,最新版) 如下图:

Paste_Image.png

下载完解压后主要有三个文件夹,分别是css(样式) 、fonts(字体)、js(脚本),结构如下:

Paste_Image.png

1.3.1 css目录下有四个css后缀的文件,min是压缩包,一般使用这个;其他属于没有压缩的。map后缀的文件是css源码映射表,在一些特定的浏览器工具中使用。
1.3.2 js目录包含两个文件,分别为压缩和未压缩的js文件。
1.3.3 fonts目录下包含不同后缀的字体文件。

1.4创建第一个页面
我使用的编辑器是sublime text。大家也可以网上搜索这个编辑器,感觉还是很强大的,当然你也可以使用其他的编辑器。好的,不废话进入主题。
1.首先新建一个文件夹,然后把刚刚下载解压得到额三个文件夹放进文件夹内,利用编辑器新建一个index.html文件。
2.引入样式
在head里引入

<link rel="stylesheet" href="css/bootstrap.min.css">

3.下载jQuery脚本库
浏览器打开http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
右键另存为jquery.min.js保存到js文件夹下
4.引入脚本库
在body底部引入,这样网页打开时先不加载js库,能提高页面加载速度。

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

第一个页面代码:页面显示一个按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>第一个Bootstrap页面</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-info">按钮</button>
  <script src="js/jquery.min.js"></script> 
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

效果图如下:

Paste_Image.png

相关文章

  • 1.Bootstrap介绍

    1.1简介:Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTM...

  • 前端

    1.bootstrap 1.bootstrap treeview Bootstrap-treeview 常用方法b...

  • 1.bootstrap

    1.在bootstrap官网中查看基本模板,,直接复制粘贴,一个响应式的小demo就好了 注意点1.bootstr...

  • Bootstrap4从入门到精通视频教程

    一、布局 0.课件 1.Bootstrap介绍_栅格系统 2.禁用响应式_响应式分界点 二、内容 3.排版_代码 ...

  • 几款实用的前端日历时间日期选择控件

    1.Bootstrap的datetimepicker 具体用法:https://blog.csdn.net/lia...

  • 【转载】框架

    1.BootStrap https://v4.bootcss.com/ 2.Layui https://www.l...

  • Tomcat主流程的启动

    1.Bootstrap启动 Tomcat的入口,调用main()方法去启动整个tomcat的服务 main()...

  • Bootstrap初学

    为什么前端不用Bootstrap 1.Bootstrap 引入 2.网格/栅栏系统 布局容器 .container...

  • 0215--Bootstrap

    1.Bootstrap网格系统(Grid System)Bootstrap 提供了一套响应式、移动设备优先的流式网...

  • 笔记 第十天 APP单页应用

    1.bootstrap 很大占空间 有很多不用的css 2.jQuery mobile 框架 xjax异步传递数...

网友评论

本文标题:1.Bootstrap介绍

本文链接:https://www.haomeiwen.com/subject/pmsvjttx.html