原创 Bootstrap 表單和圖片
表單Bootstrap 提供了一些豐富的表單樣式供開發者使用。1.基本格式//實現基本的表單樣式<form><div class="form-group"><label>電子郵件</label><input type="email" cla
2019-02-22 20:21:28
1
原创 巨幕頁頭縮略圖和警告框組件
一．巨幕組件巨幕組件主要是展示網站的關鍵性區域。//在固定的範圍內，有圓角<div class="container"><div class="jumbotron"><h2>網站標題</h2><p>這是一個學習性的網站！</p><p><a
2018-09-11 08:31:18
1
原创 柵格系統
移動設備優先在 HTML5 的項目中，我們做了移動端的項目。它有一份非常重要的 meta，用於設置屏幕和設備等寬以及是否運行用戶縮放，及縮放比例的問題。//分別爲：屏幕寬度和設備一致、初始縮放比例、最大縮放比例和禁止用戶縮放<meta na
2018-09-11 08:31:18
原创 CSS3 彈性伸縮佈局
CSS3 提供一種嶄新的佈局方式：Flexbox 佈局，即彈性伸縮佈局模型(Flexible Box)。用來提供一個更加有效的方式實現響應式佈局。但是用於這個佈局方式還處於 W3C 的草案階段，並且它還分爲舊版本、新版本以及混合過渡版本三種
2018-09-11 08:31:18
原创 Bootstrap 標籤頁和工具提示插件
一．標籤頁 標籤頁也就是通常所說的選項卡功能。 //基本用法 <ul class="nav nav-tabs"> <li class="active"><a href="#html5" data-toggle="tab">HTML5</a>
2018-09-11 08:31:18
原创 輔組類和響應式工具
一．輔助類Bootstrap 在佈局方面提供了一些細小的輔組樣式，用於文字顏色以及背景色的設置、顯示關閉圖標等等。1.情景文本顏色//各種色調的字體<p class="text-muted">Bootstrap 視頻教程</p><p cla
2018-09-11 08:31:18
原创 bootstrap 表格
<table class="table table-striped table-hover table-responsive"><tr class="info"><th>編號</th><th>姓名</th><th>性別</th><th>年齡
2018-09-11 08:31:18
原创 Bootstrap 輪播插件
一．輪播 輪播插件就是將幾張同等大小的大圖，按照順序依次播放。 //基本實例。 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <l
2018-09-11 08:31:18
原创 Bootstrap排版樣式
頁面排版Bootstrap 提供了一些常規設計好的頁面排版的樣式供開發者使用。1.頁面主體Bootstrap 將全局 font-size 設置爲 14px，line-height 行高設置爲 1.428(即20px)；<p>段落元素被設置等
2018-09-11 08:31:17
原创 Bootstrap 列表組面板和嵌入組件
一．列表組組件列表組組件用於顯示一組列表的組件。//基本實例<ul class="list-group"><li class="list-group-item">1.這是起始</li><li class="list-group-item">
2018-09-11 08:31:17
原创 媒體查詢
/媒體查詢，參考部分Bootstrap 框架//當頁面大於1200px 時，大屏幕，主要是PC 端/@media (min-width: 1200px) { }/在992 和1199 像素之間的屏幕裏，中等屏幕，分辨率低的PC/@media
2018-09-11 08:31:17
4
原创 輸入框和導航組件
一．輸入框組件文本輸入框就是可以在<input>元素前後加上文字或按鈕，可以實現對錶單控件的擴展。//在左側添加文字<div class="input-group"><span class="input-group-addon">@</sp
2018-09-11 08:31:17
原创 Bootstrap 進度條媒體對象和 Well 組件
一．Well 組件這個組件可以實現簡單的嵌入效果。//嵌入效果<div class="well"> Bootstrap</div> //有 lg 和 sm 兩種可選值<div class="well well-lg"> Bootstrap<
2018-09-11 08:31:17
原创 Bootstrap 表單和圖片
表單Bootstrap 提供了一些豐富的表單樣式供開發者使用。1.基本格式//實現基本的表單樣式<form><div class="form-group"><label>電子郵件</label><input type="email" cla
2018-09-11 08:31:16
原创 Bootstrap 按鈕和摺疊插件
一．按鈕 可以通過按鈕插件創建不同狀態的按鈕。 //單個切換。 <button class="btn btn-primary" data-toggle="button" autocomplete="off">單個切換</button> 注
2018-09-11 08:31:16