Bootstrap 框架、插件

Bootstrap,前端工程师比较常用的框架、插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品。所以更加准确说,我们更多的时候是去学习如何去使用Bootstrap,那么我们该如何学会更好的使用Bootstrap?下面是我个人在Bootstrap学习使用过程中得一些心得,在这儿跟大家分享,不足之处欢迎前辈们多多指教!

第一:在学习一个新的知识,我们首先的明白它是什么以及我们为什么要学习它,然后深入,理解它的一些概念性的知识,不必死记硬背,记住不是目的,透彻理解才是。

第二:下载Bootstrap,认真阅读,深入学习Bootstrap里面的js和JQ的一些插件,动手实践,加深印象。

第三:如何吧Bootstrap运用在自己的开发中,步骤:

1》第一步,构建一个基本HTML页面,基本模板,可以在Bootstrap里面找到直接复制过来,EX:

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好,世界!</h1>

    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

说明

1)<meta name="viewport" content="width=device-width,initial-scale=1.0">

用来修复网页在移动设备上显示的问题

2)

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

这是对ie9之前等版本不支持HTML5的浏览器进行特殊的处理

4)在head中的bootstrap-responsive.css是非必须文件,可以不引入,这个文件的主要作用是做一个响应式的网页。

5)在网页中bootstrap.css是bootstrap中的样式文件,bootstrap.js是脚本文件,两个文件相互对应,引入的顺序和位置一般是:CSS文件在head标签中引入,js文件在body标签里引入。其中jquery文件要在bootstrap脚本文件之前引入。

6)Bootstrap是基于HTML5网页的,所以首先要建立一个HTML5类型的网页

做完以上的操作就建好了一个基本的bootstrap网页了,然后就可以在body里面使用bootstrap中定义好的各种好看的样式。

简要说明在Bootstrap中,网页按照十二栏的布局分布,在div中通过span类可以定义该div块占据多少栏,span1~span12可以选择.

2》第二步:根据你的网页需要,直接引入Bootstrap里面的CSS布局或JS插件,说白了就是把Bootstrap里面你需要的东西拷贝过来,根据具体需求决定直接使用或者进行修改。

时间: 2024-08-14 23:10:53

Bootstrap 框架、插件的相关文章

bootstrap javascript插件部分的笔记整理

概览 (1)每一个插件(带有js功能的组件),想使用bootstrap插件,一个是要去写他的html,第二个是使用CSS去修饰它,再引入相应的js文件. bootstrap框架里的轮播图,他有自己的js文件. JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js). 建议使用压缩版的 JavaScript 文件 bootstrap.js 和 bootstra

Bootstrap框架的学习(一)

一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属于UI框架,与Jquery不一样,准确的描述Bootstrap框架属于CSS框架,而非JavaScript框架,但是它本身使用JavaScript来完善Bootstrap框架来完善视觉效果. 三.优点 完美的支持H5和CSS3,以及支持移动端浏览器 四.内容 可以参考一下官方文档http://v3.

bootstrap框架应用

开发中文网:v3.bootcss.com (1)前段?  框架 ? 用户 -->  前端应用程序 --->后端应用程序 --->后端服务器. 框架:Library 或者lib,都值得是框架.第三方提供的,一些接口或者功能. 一.Bootstrap框架是什么?? BootStrap,最早的时候是两个单词的合成.现在成为专有名词Bootstrap,它是一个快速开发web应用程序和网站的前端框架. 二.为什么要学boot,而且为什么那么火爆? (1)容易上手,学过HTML和CSS的人就能来学习

Bootstrap按钮插件

前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息.例如,点击"加载"按钮,会触发按钮的加载的状态 通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态,但从 v3.3.5 版本开始,此特性不再建议使用,并且已经在 v4 版本中删除了 [注意]如果不

Web前端学习笔记:Bootstrap框架

Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果.此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀. 一个完整的Bootstrap框架包含如下四个部分: 脚手架(不知道官网为啥这么翻译):用于重置背景.链接样式.栅格系统等,并包含两个简单的布局结构.Bo

Bootstrap框架写的后台管理模板,快速开发

Bootstrap框架写的后台管理模板     [MATRI ADMIN] 为了解决浏览器兼容问题,公司前段UI准备使用Bootstrap框架写的模板,便于后期项目过检时,浏览器不兼容出现的不必要的麻烦 首先做一些简单的介绍 JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js). 建议使用压缩版的 JavaScript 文件 bootstrap.js 和 

bootstrap框架理解(转发)

随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计.接下来就是要详解Bootstrap框架: 首先,我们要知道为什么使用框架的原理.CSS框架是一系列CSS文件的集合体,包含了基本的元素重置,页面排版,网络布局,表单样式,通用规则等代码块.使用CSS框架,可以简化工作,提高工作效率. 然后,我们为

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作. 关于这个插件,我在早期随笔<Bootstrap文件上传插件File Input的使用>也做了一次介绍,这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x

基于Bootstrap框架的临床数据管理系统的设计与开发

    基于Bootstrap框架的临床数据管理系统的设计与开发     2018年11月10日 目  录 第一章绪论... 6 1.1 选题背景及其意义... 6 1.2国内外研究现状... 7 1.2.1 临床大数据管理系统发展现状... 7 1.2.2医疗电子表单管理发展现状... 8 1.3研究目标... 9 1.4 研究内容... 10 1.5论文整体结构... 10 第二章相关技术研究... 12 2.1 AngularJS技术简述... 12 2.2 RESTful API +sw

基于Django+Bootstrap框架,设计微型小说网站

一.项目背景: ? 为了回顾关于django的文件上传和分页功能,打算写一个微型的小说网站练练手.花了一个下午的时间,写了个小项目,发现其中其实遇到了许多问题,不过大部分通过debug之后就解决了,其他部分通过阅读了Pagination插件以及Bootstrap-FileInput插件的官方文档. 二.详细设计: ? 省去小说网站的用户模块的功能,小说网站主要的功能就是上传文件,在线阅读小说.针对这两个功能,? 主要用到dajngo内置的Pagination模块,以及选择一个上传文件插件即可.因