What are the meanings of the files in Bootstrap and their reference methods respectively?
The official website did not provide a clear explanation of the meaning of the Bootstrap package files. I checked some information on the Internet and summarized the total price as follows:
Bootstrap/<! -- Main directory --> ├ ── css/<! -- CSS style file --> │ ├ ── bootstrap.css <! -- Bootstrap core CSS file --> │ ├ ── bootstrap.css. map <! -- Source map file --> │ ├ ── bootstrap.min.css <! -- Bootstrap core CSS file compression version --> │ ├ ── bootstrap.min.css. map │ ── bootstrap-theme.css <! -- Optional Bootstrap topic files (generally do not need to introduce) --> │ ── bootstrap-theme.css.map │ ── bootstrap-theme.min.css <! -- Optional Bootstrap topic files (generally do not need to introduce) compressed version --> │ ── bootstrap-theme.min.css.map ── js/<! -- JavaScript file --> │ ├ ── bootstrap. js <! -- Bootstrap core JavaScript file --> │ ── bootstrap. min. js <! -- Bootstrap core JavaScript file compression version --> └ ── fonts/<! -- Font icons --> glyphicons-halflings-regular.eot -- glyphicons-halflings-regular.svg -- glyphicons-halflings-regular.ttf -- glyphicons-halflings-regular.woff -- glyphicons-halflings-regular.woff2 --
* Bootstrap.css is a complete bootstrap style table that has not been compressed and can be used for debugging during development.
* Bootstrap.min.css failed. The following files are the same.
The bootstrap environment requires at least three files: bootstrap.min.css, jQuery. min. js, and bootstrap. min. js. The specific code is as follows:
<! -- New Bootstrap core CSS file --> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <! -- Optional Bootstrap topic file (generally not introduced) --> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <! -- JQuery file, which must be introduced before bootstrap. min. js --> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <! -- The latest Bootstrap core JavaScript file --> <script src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
Note that:
Bootstrap.min.css, jquery. min. js, bootstrap. min. the introduction sequence of js files must not be disordered. min. js, bootstrap. min. js files are placed at the bottom of the HTML webpage. This is done to prevent unnecessary problems arising from loading these two files before the webpage is loaded.
Description of the font file:
The Font types used in Web pages also support different types of Font types in browsers. There are several main types of font formats: TrueType, Embedded Open Type, OpenType, WOFF, and SVG.
TrueType
The most common font format for Windows and Mac systems is that it is a font defined by a mathematical model based on the contour technology, this makes them easier to process than vector-based fonts, ensuring the consistency between the screen and the print output. At the same time, these fonts can be scaled and rotated at will, just like the Vector Fonts, without having to worry about the appearance of serrations.
EOT-Embedded Open Type (. eot)
EOT is an embedded font and is developed by Microsoft. The OpenType font can be embedded into a web page with @ font-face and downloaded to the browser for rendering. It is stored in the temporary installation folder.
OpenType (. otf)
OpenType is a font jointly developed by Microsoft and Adobe. All Microsoft's ie browsers use this font. It is designed to replace TrueType fonts.
WOFF-Web Open Font Format (. woff)
WOFF (Web development font format) is a specialized font format standard designed for the Web. It is actually an encapsulation of TrueType/OpenType and other font formats, each font file contains the font and Metadata (Metadata) for the font. The font file is compressed for network transmission.
SVG (Scalable Vector Graphics) Fonts (. svg)
SVG is an open standard graphic format developed by W3C. The SVG font uses the SVG technology to present the font. There is also a gzip compression format SVG font. Usage: using the @ font-face attribute of CSS3, You can embed any font in a webpage. However, IE only supports the EOT font of Microsoft. You need to use a font conversion tool to convert it to the EOT format, which is not supported by other browsers, other browsers can set TTF (TrueType) and OTF (OpenType) fonts as custom fonts.