Bootstrap ဆောင်ပုဒ် "ကုမ္ပဏီ"

Theme တစ်ခုဖန်တီးပါ- "ကုမ္ပဏီ"

ဤစာမျက်နှာသည် သင့်အား Bootstrap အပြင်အဆင်ကို အစမှနေ၍ မည်သို့တည်ဆောက်ရမည်ကို ပြသပါမည်။

ကျွန်ုပ်တို့သည် ရိုးရှင်းသော HTML စာမျက်နှာတစ်ခုဖြင့် စတင်မည်ဖြစ်ပြီး၊ ကျွန်ုပ်တို့တွင် အပြည့်အဝလုပ်ဆောင်နိုင်သော၊ ကိုယ်ရေးကိုယ်တာနှင့် တုံ့ပြန်မှုရှိသော ဝဘ်ဆိုက်တစ်ခုမရရှိမချင်း အစိတ်အပိုင်းများကို များများထည့်ပါ။

ရလဒ်သည် ဤကဲ့သို့ဖြစ်နေမည်ဖြစ်ပြီး သင်သည် အခမဲ့ပြင်ဆင်ခြင်း၊ သိမ်းဆည်းခြင်း၊ မျှဝေခြင်း၊ အသုံးပြုခြင်း သို့မဟုတ် သင်အလိုရှိသမျှကို ၎င်းနှင့်ပြုလုပ်နိုင်သည်-

HTML စတင်စာမျက်နှာ

အောက်ပါ HTML စာမျက်နှာဖြင့် စတင်ပါမည်။

Bootstrap CDN ထည့်ပြီး Jumbotron တစ်ခုထည့်ပါ။

Bootstrap CDN နှင့် jQuery သို့ လင့်ခ်တစ်ခုကို ပေါင်းထည့်ကာ HTML အစိတ်အပိုင်းများကို တစ်ခုအတွင်း ထည့်သွင်းပါ .jumbotron:

နောက်ခံအရောင်နှင့် စာသားဗဟိုချက်ထည့်ပါ။

1. လိမ္မော်ရောင်နောက်ခံအရောင်ကို jumbotron သို့ထည့်ပါ။

2. .text-centerjumbotron အတွင်းရှိ စာသားကို ဗဟိုပြုရန် အတန်းကို ထည့်ပါ-

ဖောင်ထည့်ပါ။

ထည့်သွင်းမှုအကွက်နှင့် ခလုတ်တစ်ခုပါရှိသော ဖောင်ပုံစံတစ်ခုကို ထည့်ပါ-

ကွန်တိန်နာများထည့်ပါ။

ကွန်တိန်နာနှစ်ခု ( .container-fluid) ကိုထည့်ကာ ဒုတိယကွန်တိန်နာသို့ စိတ်ကြိုက်အတန်းတစ်ခုထည့်ပါ ( .bg-grey - မီးခိုးရောင်နောက်ခံအရောင်ကို ပေါင်းထည့်သည် ) ။

Padding ထည့်ပါ။

padding အချို့ကို ထည့်ခြင်းဖြင့် jumbotron နှင့် container များကို ကြည့်ကောင်းအောင် ပြုလုပ်ကြပါစို့။

Grid တစ်ခုထည့်ပါ။

1. ကွန်တိန်နာတစ်ခုစီတွင် အိုင်ကွန်တစ်ခု (သို့မဟုတ် ကုမ္ပဏီ၏လိုဂို) ကိုထည့်ပါ။

2. ကော်လံနှစ်ခု ( .col-sm-8 နှင့် .col-sm-4) ဖန်တီးခြင်းဖြင့် အိုင်ကွန်နှင့် "စာသားအကြောင်း" ကို ပိုင်းခြားပါ။

3. ကျယ်ဝန်းသော 768 ပစ်ဇယ်ထက်သေးငယ်သော စခရင်များရှိ "လိုဂိုကော်လံ" ကို ဗဟိုပြုရန်အတွက် မီဒီယာမေးမြန်းချက်များကို ပေါင်းထည့်ပါ။

ဝန်ဆောင်မှုကွန်တိန်နာကို ထည့်ပါ။

အနံ 2x3 ကော်လံ ( .col-sm-4):

ပုံသဏ္ဍာန်ပုံများ

.logo-small"ဝန်ဆောင်မှုများ" ကွန်တိန်နာရှိ glyphicon တစ်ခုစီသို့ စိတ်ကြိုက်အတန်း ( ) ကို ထည့်ပါ။ ၎င်းတို့ကို ပုံစံဖော်ရန် CSS ကိုသုံးပါ

Portfolio Container ထည့်ပါ။

အကျယ်အဝန်း ( .col-sm-4):

Inside each column, add an image.

Then, use the .img-thumbnail class to shape the image to a thumbnail.

Normally, you would add the .img-thumbnail class directly to the <img> element. In this example, we have placed a thumbnail container around the image, so that we can specify an image text as well.

Example

<div class="container-fluid text-center bg-grey">
  <h2>Portfolio</h2>
  <h4>What we have created</h4>
  <div class="row text-center">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="paris.jpg" alt="Paris">
        <p><strong>Paris</strong></p>
        <p>Yes, we built Paris</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="newyork.jpg" alt="New York">
        <p><strong>New York</strong></p>
        <p>We built New York</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="sanfran.jpg" alt="San Francisco">
        <p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>
      </div>
    </div>
</div>

Result:

Portfolio

What we have created

Paris

Yes, we built Paris

New York

We built New York

San Francisco

Yes, San Fran is ours

Styling Thumbnail Images

Use CSS to style the images. In our example, we have tried to make them look like cards, by removing their border, and set a 100% width on each image.

Example

.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}

Result:

Portfolio

What we have created

Paris

Yes, we built Paris

New York

We built New York

San Francisco

Yes, San Fran is ours

Add a Carousel

Add a carousel:

Style The Carousel

Use CSS to style the carousel:

Add Pricing Container

Create a full width container, with three columns of equal width (.col-sm-4):

Inside each column, add a panel:

Styling Panels

Use CSS to style the panels:

Add Contact Container

Add a new container with contact information:

Add Map/Location Image

Add a location image or a map (read our Google Maps Tutorial for google maps):

Example

<!-- Image of location/map -->
<img src="map.jpg" style="width:100%">

Result:

Add a Navbar

Add a navbar at the top of the page that collapses on smaller screens:

Style The Navbar

Use CSS to customize the navigation bar:

Add Scrollspy

Add scrollspy to automatically update navbar links when scrolling:

Add a Footer

Add an "Up Arrow" icon to the footer, which will take the user to the top of the page when clicked on:

Adding Smooth Scrolling

Use jQuery to add smooth scrolling (when clicking on the links in the navbar):

Final Touch

Personalize your Theme by adding a font that you like. We have used "Montserrat" and "Lato" from Google's Font Library.

Link to the font in the <head> section:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

Then you can use them in the page:

We have also added some extra style to some elements:

Slide In Elements

We have also created an animation effect which will slide in elements on scroll. If you want to use it, just add the .slideanim class to the element you want to slide in, and add the following to your CSS and jQuery (feel free to modify the duration, opacity, where to start, when to slide in, and so on):

Complete "Company" Theme