Bootstrap开发实战之第一次接触Bootstrap
作者:水之原 发布时间:2024-06-17 15:33:12
本文我们主要了解一下 Boostrap 历史、特点、用途,以及为什么选择 Boostrap 来开发我们的 Web 项目。
学习要点:
1.Bootstrap 概述
2.Bootstrap 特点
3.Bootstrap 结构
4.创建第一个页面
5.学习的各项准备
一、Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。
2010 年 6 月,Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后,Bootstrap 最终被确定下来,并于 2011 年 8 月发布。经过很长时间的迭代升级,由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。
Bootstrap 最为重要的部分就是它的响应式布局,通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。
Bootstrap 下载及演示:
国内文档翻译官网:http://www.bootcss.com
瓢城 Web 俱乐部官网:http://www.ycku.com
二、Bootstrap 特点
Bootstrap 非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下:
(1).跨设备、跨浏览器
可以兼容所有现代浏览器,包括比较诟病的 IE7、8。当然,本课程不再考虑 IE9 以下浏览器。
(2).响应式布局
不但可以支持 PC 端的各种分辨率的显示,还支持移动端 PAD、手机等屏幕的响应式切换显示。
(3).提供的全面的组件
Bootstrap 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组件,方便开发者调用。
(4).内置 jQuery 插件
Bootstrap 提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web 中各种常规特效。
(5).支持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性,都得到很好的支持。
(6).支持 LESS 动态样式
LESS 使用变量、嵌套、操作混合编码,编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。
三、Bootstrap 结构
首先,想要了解 Boostrap 的文档结构,需要在官网先把它下载到本地。Bootstrap下载地址如下:
Bootstrap 下载地址:http://v3.bootcss.com/ (选择生产环境即可,v3.3.4)
解压后,目录呈现这样的结构:
bootstrap/
├── css/
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css
│├── bootstrap-theme.css
│├── bootstrap-theme.css.map
│└── bootstrap-theme.min.css
├── js/
│├── bootstrap.js
│└── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
主要分为三大核心目录:css(样式)、js(脚本)、fonts(字体) 。
1.css 目录中有四个 css 后缀的文件,其中包含 min 字样的,是压缩版本,一般使用这个;不包含的属于没有压缩的,可以学习了解 css 代码的文件;而 map 后缀的文件则是css 源码映射表,在一些特定的浏览器工具中使用。
2.js 目录包含两个文件,是未压缩和压缩的 js 文件。
3.fonts 目录包含了不同后缀的字体文件。
四、创建第一个页面
我们创建一个 HTML5 的页面,并且将 Bootstrap 的核心文件引入,然后测试是否正常显示。
//第一个 Bootstrap
<!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">Bootstrap</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
五、学习的各项准备
1.开发工具, 我们使用Sublime Text3作为Bootstrap的开发工具, 并且安装了Emmet代码生成插件;
2.测试工具,除了常规的现代浏览器,其次就是作为移动端的测试工具,我们这里采用的是 Opera Mobile Emulator,和 Chrome 的移动 Web 测试工具。
3.所需基础,至少有 HTML5 第一季课程的基础,Bootstrap 内置了很多 jQuery 插件,虽然使用起来比 jQuery 或 JS 本身要简单的多,但如果有 jQuery 和 JS 课程的基础,那学习理解力就更加深入;
4.课程分辨率:基础课程,我们使用 1024 x 768 来录制,但某些特殊部分,比如响应式和项目课程,需要大分辨率录制,会采用 1440 x 900 来录制。
猜你喜欢
- asin()方法返回x的反正弦,以弧度表示。语法以下是asin()方法语法:asin(x)注意:此函数是无法直接访问的,所以我们
- 使用itertools工具类中的chain方法,可以很方便的将多个iterable对象一起遍历. 不过,对于dict类型的iterable对
- 前言pytorch对一下常用的公开数据集有很方便的API接口,但是当我们需要使用自己的数据集训练神经网络时,就需要自定义数据集,在pytor
- 窗口函数OVER (PARTITION BY xxx ORDER BY xxx ASC/DESC)测试数据表及数据测试表 employeeC
- 代码如下:function checkip(checkstring)'用正则判断IP是否合法 dim re1 set re1=new
- 前端部分(Vue + Vant)引入Vant、使用Vant中的Uploader组件上传文件(支持手机拍照)import Vue from &
- Vuex 中有以下几个核心概念:State:应用程序的状态存储在单一的状态树中,即 State。State 可以通过 store.state
- 谢谢icedblog提供的代码, 从那个js中我参考了moveSelect的利用, 不过那个代码中有几个BUG, 比如按住鼠标不放会不见显示
- 前言项目开发中,产品经理提了这样一个需求:将系统中的附件实现批量打包下载功能。本来系统中是有单个下载及批量下载功能,现在应业务方的需求,需要
- 一、直接导入模块import 模块名优点:干净直接import sysprint(sys.path)import os # os是一个模块i
- BMP文件头定义:WORD 两个字节 16bitDWORD 四个字节 32bitpackage main import ( "en
- mysqladmin是MySQL官方提供的shell命令行工具,它的参数都需要在shell
- 背景目前项目在移动端上,首推使用微信小程序。各项目的小程序访问数据有必要进行采集入库,方便后续做统计分析。虽然阿拉丁后台也提供了趋势分析等功
- 1、实现目标编写一个命令行通讯录程序,可以添加、查询、删除通讯录好友及电话2、实现方法创建一个类来表示一个人的信息。使用字典存储每个人的对象
- 箱线图箱线图一般用来展现数据的分布,如上下四分位值、中位数等,也可以直观地展示异常点。Matplotlib提供了boxplot()函数绘制箱
- 首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果。以下为完整代码,很简单,但也是个技巧。<!DOCTYP
- 错误类型: Microsoft JET Database Engine (0x80004005) 不能使用 '';文件已在使
- 之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下。效果图:子组件 dropdown.vue<template
- SQL Server在删除数据后,会重新利用这部分空间,所以如果不是空间紧张的情况下,可以不回收。回收一般先回收日志文件,因为这个回收速度非
- 想要使用xpath来解析html内容, PHP自带两个对象DOMDocument,DOMXpath,其中初始化 loadHtml一般都会报很