溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了Bootstrap學習總匯，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
Bootstrap4特點：1.兼容IE10+ 2.使用flexbox 布局 3.拋棄Nomalize.css 4.提供布局和 reboot 版本
Bootstrap組成：1.基礎樣式 2.常用組件 3.JS插件
常見問題：
1.Bootstrap 的優缺點
優點：CSS 代碼結構合理 ，現成的樣式可以直接用
缺點：定制較為繁瑣，體積大
2.Bootstrap 如何實現響應式布局
原理：通過 media query 設置不同分辨率的class
使用：為不同分辨率選擇不同的網格class
3.如何基于 Bootstrap 定制自己的樣式
1.使用 css 同名類覆蓋（簡單場景使用）
2.修改源碼重新構建
3.引用 scss 源文件，修改變量
知識點：
1.基本用法
制作簡單登錄頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<title>Bootstrap</title>
<style>
#result{
display: none;
}
.title{
margin-top: 50px;
margin-bottom: 50px;
}
.operate button{
margin: 0 auto;
}
</style>
</head>
<body>
<h3 class="title col-6 offset-3">注冊</h2>
<form id="myForm" class="col-6 offset-3">
<div class="form-group row">
<label class="col-2 col-form-label">姓名</label>
<div>
<input name="name" type="text" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">密碼</label>
<div>
<input name="password" type="password" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">電話</label>
<div>
<input name="cellphone" type="text" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">地址</label>
<div>
<input name="address" type="text" />
</div>
</div>
<div id="result" class="alert alert-danger">
</div>
<div class="operate form-group row">
<button class="btn btn-primary" type="submit">提交</button>
</div>
</form>
<script>
var form = document.querySelector('#myForm');
var result = document.querySelector('#result');
form.addEventListener('submit', function(e){
if(!document.querySelector('[name=password]').value){
result.style.display = 'block';
result.innerHTML = '密碼為空';
}else{
result.style.display = 'none';
}
e.preventDefault();
});
</script>
</body>
</html>效果圖：
2.Bootstrap JS 組件
基于 jQuery 寫的，可以完成很多交互效果，所以需要引入 jQuery ,還需要引入 Popper.js (庫）和 bootstrap.js
使用方式：1.基于 HTML 的 data-** 屬性 2.基于 JS API
效果圖：
3.Bootstrap 響應式布局
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<title>Bootstrap</title>
<style>
.content > div{
height: 100px;
line-height: 100px;
text-align: center;
color: #333;
background:#cccccc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>
<div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
</div>
</div>
</body>
</html>總共12個，屏幕尺寸 < 576px時，每行12個；768px>=屏幕尺寸>=576px時，每行6個；992px>=屏幕尺寸>=768px時，每行4個；屏幕尺寸>=992px時，為每行3個；
效果圖：
4.Bootstrap 定制方法
方法：1.使用 css 同名類覆蓋（簡單場景使用） 2.修改源碼重新構建 3.引用 scss 源文件，修改變量
上述內容就是Bootstrap學習總匯，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
