1、环境搭建

中文官网下载地址：http://www.bootcss.com/

右击选中的WEB项目，点击导入，选择文件系统，然后下一步，选择BootStrap文件目录路径，如下：

完成后，WEB项目下的css、img、js就出现相应文件，说明导入成功。

然后导入较新版本的JQuery库，目录结构如下：

至此环境搭建完成。

3、BootStrap基本模板

 <!DOCTYPE html>

 <html lang="zh-CN">

     <head>

         <meta charset="utf-8">

         <!--声明文档兼容模式，表示使用IE浏览器的最新模式-->

         <meta http-equiv="X-UA-Compatible" content="IE=edge">

         <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

         <title>Bootstrap基本模板</title>

         <!-- 引入Bootstrap核心样式文件 -->

         <link href="../../css/bootstrap.min.css" rel="stylesheet">

     </head>

     <body>

         <h1>你好，世界！</h1>

         <!-- 引入jQuery核心js文件 -->

         <script src="../../js/jquery-1.11.3.min.js"></script>

         <!-- 引入BootStrap核心js文件 -->

         <script src="../../js/bootstrap.min.js"></script>

     </body>

 </html>

BootStrap学习(一)——BootStrap入门的更多相关文章

  1. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  2. bootstrap学习笔记--bootstrap安装环境

    Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...

  3. bootstrap学习笔记--bootstrap排版类的使用

    标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式,这个和一般的html没啥区别.请看下面的实例: <h1>测试1 h1</h1> <h2& ...

  4. bootstrap学习笔记--bootstrap布局方式

    Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优 ...

  5. bootstrap学习笔记--bootstrap概览

    HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 B ...

  6. bootstrap学习笔记--bootstrap网格系统

    移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...

  7. bootstrap学习笔记 Bootstrap 列表组

    本文将介绍列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素ul 添加class list-group 向li添加class list-group-ite ...

  8. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  9. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

随机推荐

  1. Spring《二》 Bean的生命周期

    Bean初始化 1.bean中实现public void init():方法,config.xml中增加init-method="init" 属性. 2.bean实现接口Initi ...

  2. Android 高大上的侧滑菜单DrawerLayout，解决了不能全屏滑动的问题

    DrawerLayout预览 DrawerLayout主要功能就是 实现侧滑菜单效果的功能,并且可以通过增加一些设置来实现高大上的效果,那么就请看动态图:   注意左上角那个图标,有木有很好玩,哈哈. ...

  3. svn: E155017: Checksum mismatch while updating 校验错误的解决方法

    [10.3.53.53:/EMRCV5]# svn up svn: E155004: Working copy '/EMRCV5' locked. svn: E155004: '/EMRCV5' is ...

  4. HDU 1205 吃糖果（水题）

    链接:传送门 思路:思维僵硬了,僵硬...... 简单的插隔板思想......选出来数量最多的糖果种类X,假设X数量为MAX,然后以X作为"隔板",形成X _ X _ X _ X ...

  5. 洛谷 P1338 末日的传说 （字典序 + 逆序对）

    这道题需要对排列有深刻的理解和认识 给出逆序对的个数,求改逆序对个数的字典序最小的排列 那么既然是最小,那么一开始一段肯定是升序,一直到某个数后才开始改变 即1 2 3-- n-1 n a b c d ...

  6. [luogu] P3294 [SCOI2016]背单词 （贪心）

    题目描述 Lweb 面对如山的英语单词,陷入了深深的沉思,"我怎么样才能快点学完,然后去玩三国杀呢?".这时候睿智的凤老师从远处飘来,他送给了 Lweb 一本计划册和一大缸泡椒,他 ...

  7. C# .net IDE Rider入门

    话说史上最强IDE Visual Studio 所向披靡数十载尚无敌手,现在Intellij带着统一IDE界的目标来挑战VS的霸主地位.了解Rider后发现,哎哟亮点多多,还不错哦! Rider是一款 ...

  8. java中BufferedReader 有什么用

    这个类就是一个包装类,它可以包装字符流,将字符流放入缓存里,先把字符读到缓存里,到缓存满了或者你flush的时候,再读入内存,就是为了提供读的效率而设计的. BufferedReader buffer ...

  9. 6.between...and...

    6.在WHERE中使用between...and...   用于区间值的条件判断(包含边界值)     //查询工资在2000(包含)到3000(包含)之间的员工信息   select empno,e ...

  10. BZOJ——1787: [Ahoi2008]Meet 紧急集合

    http://www.lydsy.com/JudgeOnline/problem.php?id=1787 题目描述 输入 输出 样例输入 6 4 1 2 2 3 2 4 4 5 5 6 4 5 6 6 ...