This is a quick write up of me following the instruction at the link below to try out embedding bootstrap in the SPIFFS disk of ESP8266.
Embed bootstrap into an ESP8266 Web server with SPIFFS
Note that my Arduino IDE already has "ESP8266 Sketch Data Upload" installed from other projects, if you don't have it installed in your Arduino IDE, follow the instruction in the link below to install it.
Uploading bootstrap to SPIFFS for off-line use
1. Create a "data" directory in the directory where the Arduino sketch is kept.
2. Download the bootstrap framework from this link https://getbootstrap.com/.
the css and the js folder, find the highlighted files as shown below
and create a compressed version of them using program such as 7zip and
save them in the .gz format.
In the css folder
3. Copy the 4 .gz files to the "data" folder created in step 1 above.
alternatively, you could just download the project which contains the
main Arduino sketch and the 5 files shown below from the link below.
index.html.gz contains the web page that will be served by the
webserver running on ESP8266. The content of this file is shown below.
4. Connect ESP8266 to the
computer, launch Arduino IDE. In Arduino IDE, click on "Tools", then
click on "ESP8266 Sketch Data Upload" to upload the files in the "data"
directory to the SPIFFS disk of ESP8266.
The upload progress will be displayed through the message window of the Arduino IDE.
Compile and upload the sketch below to ESP8266. Be sure to put the
credential of your wifi network in the "ssid" and "password" fields.
6. Launch the Serial Monitor of the Arduino IDE to find the IP assigned to the ESP8266. Here, the IP assigned is 192.168.31.9.
7. Launch a web browser then enter the IP address obtained from above in the URL field to connect to the ESP8266.
Reference - UI Design:
Bootstrap: create a beautiful Web Interface for your projects ESP8266
Using ESP8266 SPIFFS
Embed bootstrap into ESP8266
Bootstrap Tutorial for Beginners
Bootstrap Glyphicon Components
Icons and symbols that could be used for artworks
A library of precisely prepared monochromatic icons and symbols,
created with an emphasis to simplicity and easy orientation.