讲给后台程序员看的前端系列教程(45)——Bootstrap入门


C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

Bootstrap概述

Bootstrap简介

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷,Bootstrap一经推出后颇受欢迎。

Bootstrap优点

  • 内置众多css样式、组件、和js插件便于开发人员调用
  • 响应式布局可以兼容不同分辨率的设备
  • 界面简介美观,便于扩展

Bootstrap开发准备

若利用Bootstrap框架进行前端开发,请在其官方网站https://www.bootcss.com/下载用于生产环境的 Bootstrap。
讲给后台程序员看的前端系列教程(45)——Bootstrap入门_第1张图片
下载后对压缩包进行解压,图示如下:
在这里插入图片描述

bootstrap-3.3.7-dist中内容如下图所示:
在这里插入图片描述

  • css文件夹为Bootstrap框架提供的样式文件
  • fonts文件夹为Bootstrap框架提供的字体文件
  • js文件夹为Bootstrap框架提供的JS插件

Bootstrap入门示例

第一步:建立前端项目

在HBuilder中建立前端项目BootstrapHelloWorld
讲给后台程序员看的前端系列教程(45)——Bootstrap入门_第2张图片
此时,css、img、js文件夹均为空;index.html为默认首页。

第二步:复制Bootstrap文件至新建前端项目

讲给后台程序员看的前端系列教程(45)——Bootstrap入门_第3张图片

第三步:复制jQuery文件至js文件夹

Bootstrap的JavaScript插件依赖于jQuery,所以需将jQuery置于js文件夹中;图示如下:
讲给后台程序员看的前端系列教程(45)——Bootstrap入门_第4张图片

第四步:编写前端index.html页面




<html>
	<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>Hello BootStraptitle>
		
		<link href="css/bootstrap.min.css" rel="stylesheet">
		
		<script src="js/jquery-3.2.1.min.js">script>
		
		<script src="js/bootstrap.min.js">script>
	head>
	<body>
		<h1>Hello World BootStraph1>
	body>
html>

第五步:运行前端项目

讲给后台程序员看的前端系列教程(45)——Bootstrap入门_第5张图片

至此,我们完成了Bootstrap的入门示例。

你可能感兴趣的:(Bootstrap,入门,下载,讲给后台程序员看的前端系列教程)