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. Bootstrap框架的学习（一）

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

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

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

  3. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  4. BootStrap框架

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

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  7. Bootstrap框架(基础篇)

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

  8. bootstrap框架禁用谷歌字体

    bootstrap框架禁用谷歌字体 H5框架换字体.png

  9. css去掉使用bootstrap框架后打印网页时预览效果下的超链接

    在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...

  10. 响应式设计，bootstrap框架的IE兼容问题

    学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...

随机推荐

  1. [转]在Node.js中使用RabbitMQ系列一 Hello world

    本文转自:https://www.cnblogs.com/cpselvis/p/6288330.html 在前一篇文章中可伸缩架构简短系列中提到过关于异步的问题.当时推荐使用RabbitMQ来做任务队 ...

  2. Ocelot中文文档-Route

    路由(Routing) Ocelot主要功能是接收即将发来的请求并转发它们至下游服务.与此同时,以另一个http请求的形式(在将来这可能是任何传输的机制) Ocelot将一个请求的路由描述为另一个路由 ...

  3. 关于eclipse项目的x号报错的一些问题

    有些时候项目中并未有什么问题 但项目前会有一个X号报错且无法运行项目 我们不妨从jre和Tomcat的一些配置中找原因 1,首先查看jre的安装是否正确,可以看见并未出错 ,如果有问题,重新导入一下即 ...

  4. Wepy在VScode中的高亮显示

    小程序的wepy框架会生成后缀名为.wpy的文件,此文件用VScode打开时并不是高亮的,官方文档给我们提供了两种方案进行高亮 方案一:   1. 在 Code 里先安装 Vue 的语法高亮插件 Ve ...

  5. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  6. 安卓开发_关于WebView加载页面空白问题

    依据我自己的测试,发现有时候用APP打开网页的时候,有的网页加载成功之前需要很久,有的一下就出来了(比如百度) 当加载时间过长的情况下,这时候显示的是空白界面,其实不是代码问题,只是要打开的这个网页太 ...

  7. LyX使用中的一些问题

    编译开始产生的检查错误 试用LyX2.3,在2.15中能编译通过的文档,竟然提示错误 The user preamble of your document contains glyphs that a ...

  8. (网页)js常见报错之Unexpected token in JSON at position

    出现这个报错提示,根本原因只有一个--json解析异常,所以请大家直接去关注自己json的返回数据注意检查其返回内容和内容的格式是否正确,至于本文血案的导火索是因为json注释滴问题.

  9. Socks5 RFC1928协议中文版

    除了这个意译版rfc1928外,其他人写的好像也有错误,都是一知半解. ☆ RFC 1928意译版(非直译版) http://www.ietf.org/rfc/rfc1928.txt http://w ...

  10. TensorFlow实现Softmax回归（模型存储与加载）

    # -*- coding: utf-8 -*- """ Created on Thu Oct 18 18:02:26 2018 @author: zhen "& ...