Bootstrap 練習

Developer
Eric
Size
3,685 Kb
Views
6,072
  1. Bootstrap 練習 Previews
  2. Bootstrap 練習 HTML Codes
  3. Bootstrap 練習 CSS Codes

How do I make an bootstrap 練習?

What is a bootstrap 練習? How do you make a bootstrap 練習? This script and codes were developed by Eric on 07 December 2022, Wednesday.

Bootstrap 練習 Previews
IQ Test

Bootstrap 練習 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap 練習</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="jumbotron"> <div class="container"> <h1>Hello Bootstrap!</h1> <p>bootstrap是個很多人使用的網頁模板，裡面有很多別人寫好的現成css資源，也有用來排版很方便的網格系統。</p><a class="btn btn-primary" href="https://kkbruce.tw/bs3/" target="_blank">了解更多(中文說明文件)</a> </div>
</div>
<div class="container"> <h3 class="page-header">如果可以寫完html就刻完網頁的設計哲學</h3> <p>當時間很趕/或是原本對設計版面沒有什麼概念的時候，就會希望，如果元件都幫我刻 好好的是不是就可以刻完html網頁就做完了?</p><img class="img-responsive" src="https://www.gaslampmedia.com/media/bootstrap.png"/> <h3 class="page-header">按鈕的大小與調整</h3> <p> <div class="btn btn-default">前往報名</div> <div class="btn btn-primary">主要的按鈕</div> <div class="btn btn-danger btn-lg">警告危險</div> <div class="btn btn-warning">警告！</div> <div class="btn btn-success btn-xs">成功！</div> </p> <p> <div class="btn-group"> <div class="btn btn-default">設定</div> <div class="btn btn-primary">帳號</div> <div class="btn btn-default">課程</div> <div class="btn btn-default">購買資訊</div> </div> </p> <h3 class="page-header">麵包屑導覽列	</h3> <ul class="breadcrumb"> <li>動態網頁課程</li> <li>bootstrap介紹</li> <li>第一個範例</li> <li><a href="#">報名</a></li> </ul> <h3 class="page-header">清單練習</h3> <ul class="list-group"> <li class="list-group-item active">list-group 清單 <span class="badge">list-group-item 裡面的項目</span></li> <li class="list-group-item">btn btn-default 按鈕</li> <li class="list-group-item">breadcrumb 麵包屑導覽列</li> <li class="list-group-item disabled">breadcrumb 麵包屑導覽列</li> <li class="list-group-item list-group-item-success">breadcrumb 麵包屑導覽列</li> <li class="list-group-item list-group-item-info">breadcrumb 麵包屑導覽列</li> </ul> <h3 class="page-header">表格練習</h3> <table class="table table-striped table-bordered"> <thead> <tr> <th>項目</th> <th>優點</th> <th>缺點</th> </tr> </thead> <tr> <td>速度</td> <td>快速建立網頁</td> <td>樣式差不多</td> </tr> <tr> <td>速度</td> <td>快速建立網頁</td> <td>樣式差不多</td> </tr> <tr> <td>速度</td> <td>快速建立網頁</td> <td>樣式差不多	</td> </tr> </table>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

Bootstrap 練習 - Script Codes CSS Codes

@charset "UTF-8";
* { font-family: 微軟正黑體;
}
h1, h2, h3, h4, h5, h6 { font-weight: bold;
}
Bootstrap 練習 - Script Codes
Bootstrap 練習 - Script Codes
Home Page Home
Developer Eric
Username ericyericy
Uploaded December 07, 2022
Rating 3
Size 3,685 Kb
Views 6,072
Do you need developer help for Bootstrap 練習?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric (ericyericy) Script Codes
Name
Vue
Pen,pineapple,apple
CSS resume
Transition-duration
A Pen by Eric
V-on
Brand Guideline
Vue add del
NameCard
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!