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. Linux中配置别名

    Linux中修改配置别名 ####用到的命令: alias是用来查看系统中有什么别名 source 让配置生效 临时取消别名的方法 unalias 临时取消别名 \cp /mnt/test.txt / ...

  2. .Net开源框架列表

    API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框架,基于.Net 及 Mono 平台.官网 ASP.NET WebAPI:快捷创建 HTTP 服务 ...

  3. C# ACtiveMQ 收发数据

    1.下载ActiveMQ 官方网站下载地址:http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.10.0-bin.zip,然后双 ...

  4. Java框架之Spring（二）

    前一篇博客讲述了Spring的一些基础概念,下面我们来创建第一个Spring程序吧. 步骤如下: 1) 导包 2) 配置文件 附没有提示的情况 MyEclipse ->File and Edit ...

  5. 基于IDEA的bs三层架构

    1.在大学的老师讲课中,可能会用到myeclipse或者eclipse来进行编译运行.其中的缺点就是要自行去下载开发所需要的一些jar包,要考虑都版本的不同造成的影响,且ORACLE和MYSQL的链接 ...

  6. elasticsearch6.7 01.入门指南（2）

    2.安装(略) 默认情况下,elasticsearch 使用端口 9200 来访问它的 REST API.如果有必要,该端口也可以配置 3.探索集群 3.1 The REST API 既然我们已经启动 ...

  7. Strange Way to Express Integers（中国剩余定理+不互质）

    Strange Way to Express Integers Time Limit:1000MS Memory Limit:131072KB 64bit IO Format:%I64d & ...

  8. PHP7.27: MySqlhelper class

    https://github.com/ThingEngineer/PHP-MySQLi-Database-Class https://github.com/wildantea/php-pdo-mysq ...

  9. Android常用数据类型转换

    String转int.float.double.byte[].bitmap Int i = Integer.parseInt(str); Float f = Float.parseFloat(str) ...

  10. 第四周读书笔记——读《我是一只IT小小鸟》有感

             读<我是一只IT小小鸟>有感 这是邓老师倾力推荐的一本书.这本书的标题化用了我们耳熟能详的歌词,算是较有新意吧.更重点在于,这本书的作者不是哪一位大牛,而是一群刚刚走出校 ...