第03天 - 环境建立(下)

前言:
今天来把环境都给整理完,如:
怎麽开启(展示).php档、引入 Bootstrap。

1.首先我们先打开【XAMPP】,并勾选图片上红色勾勾的两个按钮。
https://ithelp.ithome.com.tw/upload/images/20210903/20141355lFJuJ55mkO.png

2.在你的浏览器输入【localhost/csieOO】(csieOO 是我取的资料夹名称,第02天发文有提到),
把它加进你的书签(我的最爱)里面,方便日後操作。
并进入以下画面。
https://ithelp.ithome.com.tw/upload/images/20210903/20141355FETSvGvNwe.png
图片中有两个名为 csie 、 test的资料夹,点进去,就可以选择你要打开的.php了。
(csie 、 test的资料夹在 【C:\xampp\htdocs\csieOO】)

3.【引入 Bootstrap】官方网站有个【初学者范本】复制里面的内容。
https://bootstrap5.hexschool.com/docs/5.0/getting-started/introduction/

或是也可以复制我的范例

<!DOCTYPE html>
<html lang="en">
<head>
	<title>(网页名称)</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

 2021-09-03   你好呀~~<br>
<div class="alert alert-primary" role="alert">
  这是一个 Bootstrap 的范例
</div>


</body>
<!--BOOTSTRAP的东西------------------------------------------------------------------------->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</html>

补充:
CTRL+? 可以把反白的部份给注解掉
以及习惯 CTRL+S 储存你写的东西,储存之後刷新网页也才会呈现最新的成果。

打开你的 Sublime text,选择你想要写的.php 。
我选择 test资料夹 底下的 Hello.php,输入以上范例,会长这样。
https://ithelp.ithome.com.tw/upload/images/20210903/20141355We4TDSJ6c7.png

然後进到浏览器打开你想要看的.php
(此时 XAMPP 两个按钮依然是运作的,否则你进不到以下画面)
https://ithelp.ithome.com.tw/upload/images/20210903/20141355fOc0zEatiZ.png
https://ithelp.ithome.com.tw/upload/images/20210903/20141355UREBMA9dh8.png

以後写程序,如以下步骤:
01. 打开 XAMPP 的两个按钮。
02. 打开 Sublime text 执行撰写。
03. 打开浏览器到【localhost/csieOO】选择你要看的专案。
04. 最後,不写的时候记得把 XAMPP 两个按钮确实取消掉,否则下次开机出错的话,又得重新安装 XAMPP。

今天就先这样,我们下次见。


<<:  Day 03 认识你的消费者

>>:  Day 3 - 试试 Tailwind CLI

冒险村15 - customize tooltips with data attribute

15 - customize tooltips with data attribute 虽然这...

Day 9 - Laravel 8.0的Error Handling

不管是预期或非预期,程序往往会发生一些错误,我们不希望使用者Call API或浏览网页的时候发生错误...

用React刻自己的投资Dashboard Day28 - 串接台股技术面API

tags: 2021铁人赛 React 上一篇刻好版型後,这篇就可以来串接API拉,目标当然就是让使...

{CMoney战斗营} 的第十五周 # NoSql

目前最常被开发者使用的资料库系统为关联式资料 NoSQL: 全名为「Not only SQL」,也就...

Day03:职场生态观察力

一、前言   上一篇文章分享了我的求职前中後记录,重要的职场生态观察力我决定独立一篇来写,应该更清楚...