梅問題．教學網

♣梅問題‧教學網【Minwt】♣

Posted: 25 Jan 2016 02:00 PM PST

　　雖然說WordPress架設已相當的簡單，但還是得具備一些網站的基本觀念，這也讓許多想架設自己網站的朋友感到卻步，同時WordPress官方也有推出BSP的方案，只需要註冊為會員，就能開始使用WordPress，完全不用自己架設，雖然很簡易，但相對的限制也很多，使用WordPress官方的平台，除了無法任意的安裝外掛、佈景主題外，甚至也無法綁定自己的網域。　　但最近梅干發現國外一個免費的WordPress平台，一樣只需註冊會員，立即就能享用WordPress，同時與官方所提供平台最大不同的地方就在於，這個平台不但可任意的安裝外掛、套件，甚至當付費升級為專業版時，不但可綁定網域，還有FTP與無限流量，因此想架設一個屬於自己網站的朋友，這個Tap WordPress免費空間也一塊來體驗看看囉!

Tap：

網站名稱：Tap | Managed WordPress Hosting
網站連結：https://thisistap.com/

Step1
進入網站後，點一下Pricing選項，就會跳到此畫面，可看到免費版與PRO間的差異，再點FREE下方的GET STARTED鈕。
梅問題－Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

Step2
輸入姓名、Email與密碼。
梅問題－Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

Step3
接著再輸入網址名稱，以及WordPress網站名稱與管理者帳密。
梅問題－Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

Step4
這時系統就會開始進行安裝與設定。
梅問題－Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

Step5
當設定完畢後，在MySites的面板下，就會看到剛所建立好的網站。
梅問題－Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

Step6
接著登入WordPress後台，在Settings的面板下，將語系改為繁體中文，這樣WordPress就會變成中文啦!
梅問題－Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

Step7
這時就可任意的安裝外掛、佈景主題，相當的方便完全不受限制。
梅問題－Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

Step8
這樣就可任何的替換佈景主題，這個Tap平台，無論是使用還是速度，都相當的不錯，因此想自行架站的朋友，這平台不坊可考慮看看囉!
梅問題－Tap 免費WordPres虛擬主機，可任意安裝外掛與佈景

示範網站：http://minwt.thisistap.com/

Bootstrap教學－左右滑出導覽列選單

Posted: 24 Jan 2016 02:00 PM PST

　　這次總統選舉，三大候選人的官網都有支援RWD自適應網頁，讓支持者無論是使用桌機、平板、手機，都能正常的瀏覽網站，並時時觀注候選人的動態，而在這三大候選人之中，小英除了官網外，還有一個CI的設計規範網頁，一樣也是支援RWD自適應網頁，但比較特別的是，一般都是在手機模式下，才會顯示選單鈕，按一下後才將選單推出，但這個功能則是放在桌機版，直接點上方的目錄，立即就會推出選單，但它則是在上面蓋一層圖層，並將選單滑出，而梅干上網爬了一下文，找到一個類似的效果，唯一的差別則在於，當選單滑出時，內容也會一併被推出去，但網路上這範例只限左選單，梅干作了小修改，讓選單無論在左還右都能滑出，同時一樣架構於Bootstrap下使用。

Step1
將html標籤加入class="easy-sidebar-active"。

^?View Code JAVASCRIPT

1	<html class="easy-sidebar-active">

Step2
在body加入下方的html標籤。

^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<html class="easy-sidebar-active">
<nav class="navbar navbar-inverse easy-sidebar">
  <div class="container-fluid"> 
    <div class="navbar-header">
       <!--easy-sidebar-toggle-right -->
      <button type="button" class="navbar-toggle easy-sidebar-toggle" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a> 
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
  <!-- /.container-fluid --> 
</nav>
 
<div class="container">
  <h1>Bootstrap Easy Sidebar Example</h1>
  <!--easy-sidebar-toggle-right -->
  <button class="btn btn-danger easy-sidebar-toggle">Toggle Sidebar</button>
</div>

Step3
在/body加入下方的script。

^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12

<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script>
//easy-sidebar-toggle-right
$('.easy-sidebar-toggle').click(function(e) {
    e.preventDefault();
   //$('body').toggleClass('toggled-right');
    $('body').toggleClass('toggled');
   //$('.navbar.easy-sidebar-right').removeClass('toggled-right');
    $('.navbar.easy-sidebar').removeClass('toggled');
});
</script>

Step4
加入easy-sidebar.css。

^?View Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193

html.easy-sidebar-active {
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0;
	padding: 0;
}
 
body {
	transition: 0.2s ease;
	min-height: 100%;
	margin: 0;
	padding: 0;
}
body.toggled {
	-webkit-transform: translateX(250px);
	transform: translateX(250px);
}
 
.navbar.easy-sidebar {
	transition: 0.2s ease;
	position: absolute;
	width: 250px;
	top: 0;
	left: -250px;
	min-height: 100%;
	border-radius: 0;
	margin: 0;
	z-index: 9999;
}
 
.navbar.easy-sidebar.toggled {
	-webkit-transform: translateX(250px);
	transform: translateX(250px);
}
 
 
body.toggled-right {
	-webkit-transform: translateX(-250px);
	transform: translateX(-250px);
}
 
.navbar.easy-sidebar-right {
	transition: 0.2s ease;
	position: absolute;
	width: 250px;
	top: 0;
	right: -250px;
	min-height: 100%;
	border-radius: 0;
	margin: 0;
	z-index: 9999;
}
 
.navbar.easy-sidebar-right.toggled-right {
	-webkit-transform: translateX(-250px);
	transform: translateX(-250px);
}
 
.easy-sidebar .btn {
	width: 100%;
}
 
.navbar.easy-sidebar .navbar-header {
	margin: 0 -15px;
	float: none;
}
 
.navbar.easy-sidebar .navbar-brand {
	margin: 0;
}
 
.navbar.easy-sidebar .navbar-toggle {
	display: inline-block;
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(2) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, -5px) rotate(45deg);
	transform: translate(2px, -5px) rotate(45deg)
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(3) {
	display: none;
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(4) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, 4.5px) rotate(-45deg);
	transform: translate(2px, 4.5px) rotate(-45deg);
}
 
.navbar.easy-sidebar .nav.navbar-nav {
	margin: 7.5px -15px;
	float: none;
}
.navbar.easy-sidebar .nav.navbar-nav>li {
	float: none;
}
.navbar.easy-sidebar .nav.navbar-nav>li>a {
	padding: 10px 15px;
}
 
.navbar.easy-sidebar .navbar-nav .open .dropdown-menu .divider {
	box-shadow: 0 1px 0 rgba(255,255,255, 0.1);
}
 
 
.navbar.easy-sidebar .navbar-form {
	padding: 10px 15px;
	margin: 8px -15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}
.navbar.easy-sidebar .navbar-form .form-group {
	margin-bottom: 5px;
	display: block;
}
.navbar.easy-sidebar .navbar-form .form-group .form-control {
	display: block;
	width: 100%;
}
 
 
/**/
.navbar.easy-sidebar-right .navbar-header {
	margin: 0 -15px;
	float: none;
}
 
.navbar.easy-sidebar-right .navbar-brand {
	margin: 0;
}
 
.navbar.easy-sidebar-right .navbar-toggle {
	display: inline-block;
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(2) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, -5px) rotate(45deg);
	transform: translate(2px, -5px) rotate(45deg)
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(3) {
	display: none;
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(4) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, 4.5px) rotate(-45deg);
	transform: translate(2px, 4.5px) rotate(-45deg);
}
 
.navbar.easy-sidebar-right .nav.navbar-nav {
	margin: 7.5px -15px;
	float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav>li {
	float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav>li>a {
	padding: 10px 15px;
}
 
.navbar.easy-sidebar-right .navbar-nav .open .dropdown-menu .divider {
	box-shadow: 0 1px 0 rgba(255,255,255, 0.1);
}
 
 
.navbar.easy-sidebar-right .navbar-form {
	padding: 10px 15px;
	margin: 8px -15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}
.navbar.easy-sidebar-right .navbar-form .form-group {
	margin-bottom: 5px;
	display: block;
}
.navbar.easy-sidebar-right .navbar-form .form-group .form-control {
	display: block;
	width: 100%;
}
@media (max-width:  768px) {
	body.toggled {
		position: fixed;
	}
}

Step5
完成後，可看到一個按鈕，當按一下就可將左選單的導覽開啟。

Step6
而梅干作了小調整，只要把註解中的替換後，就可變成右選單，可看下方的範例預覽，或下載原檔比較容易理解。

[範例預覽-右選單] [範例預覽-左選單] [範例下載]

knoledge

討論

knoledge 發表在痞客邦留言(0) 人氣()

E-mail轉寄

討論

歡迎光臨



公告:此網頁已搬移至



熱門知識庫



進入



如未跳轉請點此