Bootsrtap學習之一：如何使用Bootstrap

時間 2019-11-13

標籤 bootsrtap 學習之一如何使用 bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

#Bootsrtap學習之一：如何使用Bootstrap @(Bootstrap)[網頁] ##導言筆者自學了html和css,正在學習javascript中，一直想要開發一個我的網站，瞭解到前端有不少框架能夠幫助快速開發網頁，從網上各類前端框架中選擇了Bootstrap，目前將一步步學習此框架，並編寫Bootstrap教程，幫助更多的人學習bootstrap.javascript

Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它便是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。國內一些移動開發者較爲熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。 --摘自百度百科css

[TOC]html

##1.Bootstrap框架的下載 只涉及Windows平臺的安裝使用 網頁打開bootstrap中文網，選擇用於生產環境的Bootstrap，下載bootstrap框架。注意：在解壓獲得文件夾中寫html文件，與css,font,js,位於同一目錄下前端

2.框架的使用

而後開始編寫html文件，這裏給出整個測試源碼html5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>text</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
</head>
<body>
	<h1>Hello,World!</h1>
	</body>
	<script src="js/jquery.js"></script>
	<script stc="js/bootstrap.min.js"></script>
</html>

1.咱們將bootstrap的樣式文件引入網頁java

<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">

2.將js文件引入網頁，因爲js通常依賴於JQuery庫，因此咱們要引入JQuery庫jquery

<script src="js/jquery.js"></script>
<script stc="js/bootstrap.min.js"></script>

3.viewport的標籤能夠修改大部分移動設備上面的顯示，爲確保適當繪製和觸屏縮放bootstrap

<meta name="viewport" content="width=device-width,initial-scale=1.0">

4.使用html5新的標籤，在IE9如下瀏覽器並不支持這些標籤，修復這個問題引用以下瀏覽器

<!--[if lt IE 9]>
    <script src="http://labfile.oss.aliyuncs.com/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="http://labfile.oss.aliyuncs.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

意思就是說若是用戶 IE 瀏覽器的版本小於 IE9，那麼就會加載這兩個 js 文件庫，如今就可使用這些新的標籤，而且能夠在這些標籤上添加樣式了。性能優化

參考實驗樓Bootstrap3.0入門學習