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. Zabbix3.0.4监控Windows的CPU使用百分比并在CPU使用率超过90%触发报警

    Zabbix3.0.4监控Windows的CPU使用百分比 Zabbix 自带的模块没有 CPU 使用率(百分比)这个监控项,我们可以通过添加计数器的方式实现 CPU 百分比的监控. 1.在Zabbi ...

  2. mysql 定时备份bat脚本 ，方便小型服务简单快速备份mysql

    mysql定时备份bat脚本 echo 数据库为用户名为root 密码为root 数据库名为kdykt echo mysqldump 命令如果没有配置环境变量要在bin目录下执行 set " ...

  3. C++ sizeof()练习

    class A { int a; short b; int c; char d; }; class B { double a; short b; int c; char d; }; 在32位机器上用g ...

  4. IP保留地址

    保留地址的网络只能在内部进行通信,而不能与其他网络互连.因为本网络中的保留地址同样也可能被其它网络使用,如果进行网络互连,那么寻找路由时就会因为地址的不唯一而出现问题. 但是这些使用保留地址的网络可以 ...

  5. vue v-time指令封装(接口返回时间戳 在到日期转换)

    // 全局时间戳转换指令注册Vue.directive('time',{ bind: function (el,binding) { let getTime = new Date(binding.va ...

  6. Confluence 6 配置默认语言界面

    Confluence 6 配置默认语言使用的界面. https://www.cwiki.us/display/CONFLUENCEWIKI/Choosing+a+Default+Language

  7. 移动端touchstart,touchmove,touchend

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  8. 浅谈js的join()方法

    简单描述:今天看同事的代码,看js的时候,看到了一个join()方法,我从来都没有用过,就查了查,第一次用就记录一下 正经的: 定义和用法 join() 方法用于把数组中的所有元素放入一个字符串. 元 ...

  9. WampServer & XAMPP Configure with MariaDB and MySQL

    第一部分补上次的一个问题 1.WampServer 3不支持的硬件格式 FAT3和 exFAT 他只能工作在NTFS的格式硬盘上. 不能在Windows XP上运行. 安装 WampServer 必须 ...

  10. ZenMap扫描笔记

    1.软件界面如下,ZenMap 扫描工具是kali linu中对WEB渗透扫描的一款工具