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里面你需要的东西拷贝过来，根据具体需求决定直接使用或者进行修改。

Bootstrap 框架、插件的更多相关文章

  1. Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)

    Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架)   插件名称:javascript-API-Completions 支持Javascript.J ...

  2. python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架

    一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...

  3. 使用BootStrap框架中的轮播插件

    在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...

  4. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  5. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  6. BootStrap框架

    简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...

  7. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

  8. bootstrap框架应用

    ---------------------------------------------------------------bootstrap---------------------------- ...

  9. Twitter Bootstrap JavaScript插件

    Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...

  10. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

随机推荐

  1. gulp.基础

    1.安装 全局安装 npm install --global gulp 作为项目的开发依赖安装 npm install gulp --save-dev 2.在根目录下创建一个名为gulpfile.js ...

  2. (转载)(int)a、&a、(int)&a、(int&)a的区别，很偏僻的题

    #include <iostream>#include <stdio.h>#include <string.h>#include <conio.h>us ...

  3. a href=#与 a href=javascript:void(0) 的区别（转）

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...

  4. Confluence 6 创建一个主题

    如果你希望创建你自己的主题,你需要写一个 Confluence 插件.请参考我们开发文档中的下面页面 开始使用 插件开发. 请参考开发者指南的页面来 写一个 Confluence 主题. 使用 主题插 ...

  5. U盘权限不足，只读文件系统

    https://blog.csdn.net/baocheng_521/article/details/77161791 用第一种方式成功

  6. Android UiAutomator

    UiAutomator是一个做UI测试的自动化框架.<Android自动化测试框架>中已有详细介绍,这里就不再累赘了. 一.首先了解自动化测试流程 自动化需求分析 测试用例设计 自动化框架 ...

  7. requireJs require.config公共配置

    //场景:让require.config配置文件成一个公共文件,每个页面引用这个公共配置 //方式一样例: require.config({ baseUrl: (function () { var p ...

  8. Python实战二

    要求:按照要求完成对文件的增.删.改.查操作. def add(**kwargs): '''新增内容,在指定位置新增''' while True: flag = False with open(&qu ...

  9. 编辑技巧之如何跟PDF文档添加贝茨编号

    除了office办公软件,pdf文档现在使用的频率也便多了,不论是工作或是学习,阅读都用阅读器打开就行了,可是如果想要修改.编辑那只用阅读器是无法进行编辑的,其实PDF文件的编辑还是很方便,使用PDF ...

  10. 51nod1158 最大子矩形 单调栈应用

    #include<iostream> #include<cstring> #include<cstdio> using namespace std; ][6],m, ...