Category Archives: bootstrap

Boostrap Navbar Example

Include jQuery
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
Include boostrap
http://getbootstrap.com/getting-started/#download

HTML Example:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
		<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="#">RIMBI</a>
	</div>
	<div id="navbar" class="collapse navbar-collapse">
	  <ul class="nav navbar-nav">
		<!--li class="active"><a href="#">Home</a></li-->
		<li><a href="#about">85%覆膜酵母</a></li>
		<li><a href="#contact">堅持把簡單的事做到最好</a></li>
		<li><a href="#contact">專業醫美醫師的建議</a></li>
		<li><a href="#contact">FB社團連三高</a></li>
		<li><a href="#contact">時尚美妝部落客強力推薦</a></li>
		<li><a href="#contact">萬名網友見證</a></li>
		<li><a href="#contact">韓妞蛋白肌的秘密</a></li>
		<li><a href="#contact">超值優惠</a></li>
	  </ul>
	</div><!--/.nav-collapse -->
  </div>
</nav>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">RIMBI</a>

</div>

<li><a href="#contact">堅持把簡單的事做到最好</a></li>

<li><a href="#contact">專業醫美醫師的建議</a></li>

<li><a href="#contact">FB社團連三高</a></li>

<li><a href="#contact">時尚美妝部落客強力推薦</a></li>

<li><a href="#contact">萬名網友見證</a></li>

<li><a href="#contact">韓妞蛋白肌的秘密</a></li>

</ul>

</div>

</div>

</nav>

Keep navbar as collapsed for all screen sizes.

@media (max-width: 2000px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

@media (max-width: 2000px) {

.navbar-header {

float: none;

}

.navbar-left,.navbar-right {

float: none !important;

}

.navbar-toggle {

display: block;

}

.navbar-collapse {

border-top: 1px solid transparent;

box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

}

.navbar-fixed-top {

top: 0;

border-width: 0 0 1px;

}

.navbar-collapse.collapse {

display: none!important;

}

.navbar-nav {

float: none!important;

margin-top: 7.5px;

}

.navbar-nav>li {

float: none;

}

.navbar-nav>li>a {

padding-top: 10px;

padding-bottom: 10px;

}

.collapse.in{

display:block !important;

}

Reference:
http://stackoverflow.com/questions/22462142/how-to-keep-bootstrap-3-navbar-as-collapsed-for-all-screen-sizes

Customization:

//Nav
$nav-blue: #00AFCC;
$nav-dark-blue: #00A9C5;
.navbar-inverse{
	background-image: linear-gradient(to bottom,$nav-blue 0,$nav-blue 100%);
	background-color: $nav-dark-blue;
    border-color: $nav-dark-blue;
	.container{
		padding-right: 15px;
    	padding-left: 15px;
    	.navbar-toggle{
    		border-color: #FFF;
    		&:focus, &:hover{
    			background-color: $blue;
    		}
    	}
    	.navbar-brand{
    		color: #FFF;
    	}
    	.navbar-collapse, .navbar-form{
    		border-color: #FFF;
    	}
    	.navbar-nav>li>a{
    		color: #FFF;
    	}
    	.navbar-nav>.active>a, .navbar-nav>.open>a{
    		background-image: linear-gradient(to bottom,$nav-blue 0,$nav-blue 100%);
    	}
	}
}

//Nav

$nav-blue: #00AFCC;

$nav-dark-blue: #00A9C5;

.navbar-inverse{

background-image: linear-gradient(to bottom,$nav-blue 0,$nav-blue 100%);

background-color: $nav-dark-blue;

border-color: $nav-dark-blue;

.container{

padding-right: 15px;

padding-left: 15px;

.navbar-toggle{

border-color: #FFF;

&:focus, &:hover{

background-color: $blue;

}

.navbar-brand{

color: #FFF;

}

.navbar-collapse, .navbar-form{

border-color: #FFF;

}

.navbar-nav>li>a{

color: #FFF;

}

.navbar-nav>.active>a, .navbar-nav>.open>a{

background-image: linear-gradient(to bottom,$nav-blue 0,$nav-blue 100%);

}

Bootbox – Easy to use modal in bootstrap

http://bootboxjs.com/#examples

$('#myModal').on('shown.bs.modal', function (e) {
	//Do something
});

$('#myModal').on('shown.bs.modal', function (e) {

//Do something

});

Remove All Effects from Input Text (Bootstrap3)

&nbsp;

.form-control:focus{outline: none;border-color:transparent;box-shadow:none;}

1	.form-control:focus{outline: none;border-color:transparent;box-shadow:none;}

Weird Space of list-inline

Set font-size of parent element 0 works.

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

viewport – page width in mobile devices

Basic:

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

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

Advance:

If you want pages are resized automatically basing on browser width and without (or few) RWD scripts, “viewport” is a good solution for this. The key is how to use attribute “maximum-scale”:

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

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

Reference:

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Related CSS:

#header .wrapper, #content .wrapper, #footer .wrapper{max-width:100%; width:1200px; min-width:1100px;}

1	#header .wrapper, #content .wrapper, #footer .wrapper{max-width:100%; width:1200px; min-width:1100px;}

References:

HTML5 Template

Bootstrap: http://getbootstrap.com

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Site title</title>
 
    <!-- Bootstrap -->
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
    <link rel=stylesheet type="text/css" href="<?=base_url()?>assets/css/bootstrap.min.css">
    <link rel=stylesheet type="text/css" href="<?=base_url()?>assets/css/bootstrap-theme.min.css">
    <link rel=stylesheet type="text/css" href="<?=base_url()?>assets/css/style.css">
    <!-- Layout -->
    <link href="<?=base_url()?>assets/css/style2.min.css" rel="stylesheet" media="screen">
 
  </head>
  <body>
 
 
    <header>
        <div class="container">
			<img src="<?=base_url()?>assets/images/post/logo.png" class="logo">
            <span>Discover Fun Places Thru New Friends</span>
            <img src="<?=base_url()?>assets/images/post/btn_app_download.png" class="apple-store">
        </div>
    </header><!-- End of header -->
     
     
    <div id="content">
        <div class="container">
            content
        </div><!-- End of Wrapper -->
    </div><!-- End of content -->
     
     
    <footer>
        <div class="container">
            footer
        </div>
    </footer><!-- End of footer -->
     

 <!-- JavaScript plugins (requires jQuery) -->
<script src="<?=base_url()?>assets/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
 
 
<script>
$(document).ready(function(){

});
</script>
 
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Site title</title>

</head>

<body>

<img src="<?=base_url()?>assets/images/post/logo.png" class="logo">

<span>Discover Fun Places Thru New Friends</span>

<img src="<?=base_url()?>assets/images/post/btn_app_download.png" class="apple-store">

</div>

</header>

content

</div>

</div>

footer

</div>

</footer>

$(document).ready(function(){

});

</script>

</body>

</html>

layout.css

body{font-family:Arial, Helvetica, sans-serif;}
#header > .wrapper, #content > .wrapper, #footer > .wrapper{width:860px; margin:0 auto;}


/* Header */
#header{height:191px;}
#header > .wrapper{}
#header > .wrapper > .top{height:53px;background:#dfdfdf;padding:0 58px;}
#header > .wrapper > .middle{height:84px;padding:0 58px;}
#header > .wrapper > .menu{height:47px; background:#d0000e;padding:0 58px;}


/* Content */
#content{}


/* Footer */
#footer{height:51px;}
#footer > .wrapper{background:#e2e2e2; height:100%;padding:15px 58px;}

body{font-family:Arial, Helvetica, sans-serif;}

#header > .wrapper, #content > .wrapper, #footer > .wrapper{width:860px; margin:0 auto;}

/* Header */

#header{height:191px;}

#header > .wrapper{}

#header > .wrapper > .top{height:53px;background:#dfdfdf;padding:0 58px;}

#header > .wrapper > .middle{height:84px;padding:0 58px;}

#header > .wrapper > .menu{height:47px; background:#d0000e;padding:0 58px;}

/* Content */

#content{}

/* Footer */

#footer{height:51px;}

#footer > .wrapper{background:#e2e2e2; height:100%;padding:15px 58px;}

Table Example

<table id="data_table" class="table">
	<thead>
		<tr>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: bootstrap

Boostrap Navbar Example

Bootbox – Easy to use modal in bootstrap

Popover Handling

Remove All Effects from Input Text (Bootstrap3)

Weird Space of list-inline

viewport – page width in mobile devices

Basic:

Advance:

Reference:

Related CSS:

References:

HTML5 Template

Table Example

Click Issue of popover

September 2018
M	T	W	T	F	S	S
« Aug
					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