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. kali sudo apt install 无法定位软件包

    在etc/apt   的sources.list 添加镜像源 debhttp://http.kali.org/kali kali-rolling main non-free contrib 或 deb ...

  2. java8 常用函数式接口

    public static void main(String[] args) { // TODO Auto-generated method stub //函数式接口 Function<Inte ...

  3. 分布式服务管理框架 ZooKeeper

      核心功能   统一命名服务(Name Service)   通过有层次的目录结构产生唯一的名称,同时可以将名称关联到特定资源   配置管理(Configuration Management)   ...

  4. 解决：org.xml.sax.SAXParseException: 元素类型 "head" 必须由匹配的结束标记 "</head>问题

    事件背景: 今天就碰到了这样的问题, org.xml.sax.SAXParseException: 元素类型 "head" 必须由匹配的结束标记 "</head&g ...

  5. Webapi 跨域 解决解决错误No 'Access-Control-Allow-Origin' header is present on the requested resource 问题

    首先是web端(http://localhost:53784) 请求 api(http://localhost:81/api/)时出现错误信息: 查看控制台会发现错误:XMLHttpRequest c ...

  6. Python-WEB -VUE初识

    走进Vue_渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 what -- 什么是Vue 可以独立完成前后 ...

  7. 基于 Confluence 6 数据中心的 SAML 单点登录设置你的身份提供者

    如果你希望 Confluence 提供 SSO,将需要将 Confluence 添加到你的 IdP 中.一些后续的步骤将会与你的 IdP 有关,但是你通常需要: 在你的 IdP 中定义一个 'appl ...

  8. 【Linux】基本命令操作

    一.用户操作 1.新增用户 useradd -u 1101 -g zte -d /home/xhs -m xhs --其中,1101,为用户ID,尽量使用500以上的 zte,为用户组 /home/x ...

  9. vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法；

    如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐  postcss-plugin-px2r ...

  10. Python实现switch效果

    Java中有switch这个东东有的地方使用switch感觉还挺好使,但是Python没有提供switch这个东东,下面我们想办法来完成类似Java和C里面的那种switch效果. Java示例代码: ...