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

Mybatis研习录
笨鸟向东飞
谷哥的小弟

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。
在这里插入图片描述
下载后对压缩包进行解压,图示如下:
在这里插入图片描述

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

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

Bootstrap入门示例

第一步:建立前端项目

在HBuilder中建立前端项目BootstrapHelloWorld
在这里插入图片描述
此时,css、img、js文件夹均为空;index.html为默认首页。

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

在这里插入图片描述

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

Bootstrap的JavaScript插件依赖于jQuery,所以需将jQuery置于js文件夹中;图示如下:
在这里插入图片描述

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

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟-->
<!-- 博客地址:https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于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 BootStrap</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<h1>Hello World BootStrap</h1>
	</body>
</html>

第五步:运行前端项目

在这里插入图片描述

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

Bootstrap学习参考资料

在此,简单介绍与Bootstrap学习与前端开发的相关的资料

Bootstrap可视化布局

可拖动控件进行布局,自动生成前端代码。

layui

在Bootstrap基础上封装的经典模块化前端框架;操作简单,入手较快,功能丰富;非常适合后端程序员使用。

X-admin

在layui基础之上封装的前端框架。

Bootstrap模板库

可依据自身需要套用现成模板。

后台模板库

包含Bootstrap等常用模板。

展开阅读全文
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值