Category Archives: bootstrap

Order Box Layout in Modal

HTML

<div id="md_member_info" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Member Info</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="modal-container">
          <!-- Personal Information -->
          <div class="order-info-box">
            <div class="row order-info-header">
              <h5>Personal Information</h5>
              <hr>
            </div>
            <div class="row">
              
                <div class="col-xs-6">
                  <label class="pw-capitalize">
                    First Name
                  </label>
                  Chen
                </div>
              
              
                <div class="col-xs-6">
                  <label class="pw-capitalize">
                    Last Name
                  </label>
                  Dant
                </div>
              
            </div>
            <div class="row">
              
                <div class="col-xs-6">
                  <label>
                    Phone Number
                  </label>
                  969612648
                </div>
              
              
                <div class="col-xs-6">
                  <label class="pw-capitalize">
                    Email
                  </label>
                  a0956276177@gmail.com
                </div>
              
            </div>
          </div>

          <!-- Purchase Details -->
          <div class="order-info-box margin-top-15">
            <div class="row order-info-header">
              <h5>Purchase Details</h5>
              <hr>
            </div>
            <div class="col s12">
              
                  <table class="table table-bordered">
                    <thead>
                    <tr>
                      <th>
                        Amount
                      </th>
                      
                      

                      <th>
                        <span class="pw-capitalize">Total price</span>
                      </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>
                        
                            2.10
                            USD
                          
                      </td>
                      
                      
                      <td>
                        
                            <b>
                              2.10
                              USD
                            </b>
                          
                      </td>
                    </tr>
                    </tbody>
                  </table>
                
            </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-xsm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

100

101

102

103

104

105

106

107

108

109

110

<h5 class="modal-title">Member Info</h5>

</button>

</div>

<h5>Personal Information</h5>

<hr>

</div>

First Name

</label>

Chen

</div>

Last Name

</label>

Dant

</div>

<label>

Phone Number

</label>

969612648

</div>

</label>

a0956276177@gmail.com

</div>

<h5>Purchase Details</h5>

<hr>

</div>

<thead>

<tr>

<th>

Amount

</th>

<th>

<span class="pw-capitalize">Total price</span>

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

2.10

USD

</td>

<td>

<b>

2.10

USD

</b>

</td>

</tr>

</tbody>

</table>

</div>

<button type="button" class="btn btn-secondary btn-xsm" data-dismiss="modal">Close</button>

</div>

SCSS

.modal-container{
    padding: 20px;
}
.pw-capitalize{
    text-transform: capitalize;
}
.order-info-box{
    width: 100%;
    font-size: 1.2em;
    .row{
        margin-bottom: 20px;
        &:after{
            content: "";
            display: table;
            clear: both;
        }
        label{
            display: block;
            font-size: 0.9rem;
            color: #9e9e9e;
            line-height: 1rem;
            margin-bottom: 0;
        }
    }
    .order-info-header{
        position: relative;
        margin-bottom: 10px;
        box-sizing: border-box;
        h5{
            position: relative;
            z-index: 1;
            background: white;
            font-size: 14px;
            font-weight: 600;
            color: #4a4a4a;
            margin: 0;
            padding: 0 4px 0 10px;
            float: left;
        }
        hr{
            position: absolute;
            z-index: 0;
            width: 98%;
            background-color: #ccc7c7;
            height: 2px;
            border: 0;
            opacity: 0.5;
            margin: 10px;
        }
    }
}

.modal-container{

padding: 20px;

}

.pw-capitalize{

text-transform: capitalize;

}

.order-info-box{

width: 100%;

font-size: 1.2em;

.row{

margin-bottom: 20px;

&:after{

content: "";

display: table;

clear: both;

}

label{

display: block;

font-size: 0.9rem;

color: #9e9e9e;

line-height: 1rem;

margin-bottom: 0;

}

.order-info-header{

position: relative;

margin-bottom: 10px;

box-sizing: border-box;

h5{

position: relative;

z-index: 1;

background: white;

font-size: 14px;

font-weight: 600;

color: #4a4a4a;

margin: 0;

padding: 0 4px 0 10px;

float: left;

}

hr{

position: absolute;

z-index: 0;

width: 98%;

background-color: #ccc7c7;

height: 2px;

border: 0;

opacity: 0.5;

margin: 10px;

}

Popper.js with Bootstrap

popper.js v2.0 not compatible with bootstrap v4. Use v1.0 instead.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.map

Popper.js official

https://popper.js.org/

HTML

<!-- Popper must included before bootstrap.min.js -->
<script src="{{ASSETS_FRONT}}js/jquery-1.12.4.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.map"></script>
<script src="{{ASSETS_FRONT}}js/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});
</script>

$(document).ready(function() {

$('[data-toggle="popover"]').popover();

});

</script>

Customize Bootstrap SCSS

Install bootstrap source

npm install bootstrap

1	npm install bootstrap

Import bootstrap in SCSS

// Your variable overrides
$blue:    #3c8dbc;

@import "../../node_modules/bootstrap/scss/bootstrap";

// Your variable overrides

$blue: #3c8dbc;

@import "../../node_modules/bootstrap/scss/bootstrap";

Reference:

Select2 doesn’t work in bootstrap modal

You can type anything in search box if you put a select2 element in modal.

Solution: Remove tabindex=”-1″ from modal HTML.

Reference:

https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal

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;}

Rex's Personal Site

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

Category Archives: bootstrap

Order Box Layout in Modal

Popper.js with Bootstrap

Customize Bootstrap SCSS

Select2 doesn’t work in bootstrap modal

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:

September 2020
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