Bootstrap的安装和使用

83人阅读 评论(0) 收藏 举报
分类:

Bootstrap的安装和使用

Bootstrap简介

Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活。它基于HTML、CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件,用起来简单,粗暴。


具体Bootstrap的学习教程可参考菜鸟教程


安装Bootstrap

①登录Bootstrap官网

Bootstrap安装


②下载Bootstrap

Bootstrap下载

Download Bootstrap:下载预编译和压缩版Bootstrap(不含文档和源码)。

Download code:Bootstrap源码,如官网介绍,需要编译Less文件 和一些安装。

刚接触Bootstrap的话建议下载第一个,下载下来直接用。


使用Bootstrap进行前端开发

开发环境:WAMP(windows下的Apache + MySQL + PHP)

编辑器:sublime


Step 1: 将下载下来的压缩包解压,将里面的css,fonts和js文件夹放到你的工程目录中。在工程根目录中新建了一个”index.html”,用来测试Bootstrap。

Bootstrap


Step 2: 编辑”index.html”,使用Bootstrap封装的功能部件。这里以“菜鸟教程”上的教程例子“垂直的胶囊式导航菜单”为例。即用Bootstrap在我们网页上实现一个垂直的胶囊式导航菜单。

导航菜单


Step 3: 在浏览器中打开我们编写好的”index.html”查看。

结果

这就是用Bootstrap实现一个垂直的胶囊式导航菜单全过程。总结就是,性感,简单,粗暴。


Step 4: 如果不想通过CDN引入Bootstrap,可以将代码中的路径都改一下:

<!-- CDN引入 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
  • 1
  • 2
  • 3
<!-- 本地调用 -->
<script src="./js/bootstrap.min.js">
</script>
  • 1
  • 2
  • 3

总结

Bootstrap功能确实挺强大的,用起来方便简洁。关于更多的Bootstrap使用例子以及详细教程可以到菜鸟教程进行享受学习的快乐。

查看评论

在Vue项目中使用npm安装bootstrap以及jquery

经过我好多次的查询和实验,总结了一下在vue项目中使用bootstrap框架,npm安装注意. bootstrap中js插件依赖于jquery,所以在这之前必须安装jquery。jquery安装1、...
  • guorui_cara
  • guorui_cara
  • 2017-11-23 16:33:08
  • 2871

使用bower安装bootstrap遇到的问题

在用bower管理安装bootstrap时遇到EACCES的权限不够的问题: 解决方式: 通过chown命令修改权限:...
  • u010793138
  • u010793138
  • 2017-03-31 17:02:14
  • 416

20160707 Bootstrap下载与安装(配图)

1.在Node.js官网下载Node.js 2.安装Node.js  3.使用npm工具安装Bootstrap
  • u013511989
  • u013511989
  • 2016-07-07 20:39:18
  • 2218

bootstrap安装配置

bootstrap安装配置 下载Bootstrap 打开官方网站http://getbootstrap.com/,点击Download Bootstrap。 ...
  • yang5726685
  • yang5726685
  • 2017-04-03 09:51:58
  • 2910

Django+bootstrap配置过程

1.建立django的project django-admin.py startproject mysite 2.在与manage.py同级的project目录里建立django的app ./mana...
  • withmayday
  • withmayday
  • 2015-06-09 15:35:33
  • 2285

ASP.NET MVC 5 (三) VS使用NuGet安装Bootstrap与使用Bootstrap

加载bootstrap 设置Index视图加载bootstrap在Visual Studio中Tools(工具)菜单中找到NuGet程序包管理器中打开包管理器控制台,在其中输入以下命令并按回车键:PM...
  • github_37410569
  • github_37410569
  • 2017-02-04 19:16:14
  • 2252

Node.js学习(三)——Node.js使用Bootstrap

Node.js学习(三)——Node.js使用Bootstrap
  • flygoa
  • flygoa
  • 2016-09-27 09:10:55
  • 6002

【bootstrap】使用bower安装bootstrap

本来这么简单的东西耽误了我好长时间。 使用bower安装bootstrap的命令是: bash$ bower install bootstrap 不过问题出在如何安装bowe...
  • chunyang2178
  • chunyang2178
  • 2013-10-16 17:36:37
  • 5527

神器sublime+bootstrap插件的安装

sublime和bootstrap的下载和安装,我就不多说了,直接去baidu
  • mmayanfa
  • mmayanfa
  • 2014-07-16 14:59:39
  • 4090

Bootstrap(引入)环境安装

首先你应该知道Bootstrap是一个前端框架,Bootstrap 让前端开发更快速、简单,简单的来说就是更加方便的布局web页面,不用开发者在一个一个块的去拼凑界面了。 既然bootStrap是一...
  • luoyang2
  • luoyang2
  • 2015-12-29 10:00:50
  • 4125
    个人资料
    持之以恒
    等级:
    访问量: 5万+
    积分: 829
    排名: 6万+
    最新评论