Bootstrap responsive project sharing

Time:2021-5-13

The main use of this page are
1.Global CSS style grid system
2.Global CSS style button
3.Global CSS Style — auxiliary class
4.Component — button drop down menu
5.Component — navigation bar
6.Component – paging
7.Component — media object
8.JavaScript plug in — tab
9.JavaScript plug-in carousel

1. Top logo and login section

Bootstrap responsive project sharing

Bootstrap responsive project sharing

Using the grid system, the logo and login are divided into two columns, and the contents of the login part can be aligned to the right. There is not much to say.

2. Top navigation search bar

Bootstrap responsive project sharing

Bootstrap responsive project sharing

a. First of all, the grid system is used for layout. The navigation part takes up 7 copies at the PC end and 2 copies at the mobile end; The search column is divided into three columns: the pull-down button column, the search box column and the text column, which account for four, five and three copies respectively.
b. The navigation part uses the navigation bar component (see bootstrap API – component – navigation bar for details). When the navigation bar component is moving, the navigation is hidden and three horizontal line icons are displayed. Click this button to display or hide the navigation accordingly. The adaptive navigation HTML code is shown below
c. The left side of the search bar uses the button type drop-down menu (see bootstrap API component button type drop-down menu for details). The HTML code of button type drop-down menu is shown below

Adaptive navigation HTML code:
<div class="hd_navbtn col-md-7 col-xs-2">
    <button type="button" class="navbar-toggle collapsed si si-list fa-2x" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"></button>
    <div class="hd_navbox collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="hd_navlist">
            <li><a class="on" href="index.html">HOME</a></li>
            <li><a href="proinfo.html">CHEMICAL</a></li>
            <li><a href="chemists.html">CHEMISTS</a></li>
            <li><a href="qa.html">Q&A</a></li>
            <li><a href="user.html">USER CENTER</a></li>
        </ul>
    </div>
</div>
Button drop down menu HTML code:
<div class="col-xs-4 col-sm-offset-3 col-sm-3 col-md-offset-0 col-md-4">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> please select <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Chemical</a></li>
            <li><a href="#">Chemists</a></li>
            <li><a href="#">Reference</a></li>
        </ul>
    </div>
</div>
3. Banner carousel

Bootstrap responsive project sharing

The carousel.js plug-in is used in the banner carousel diagram (see bootstrap API – Javascript plug-in – carousel for details), and it is set to be hidden at the mobile end. Carousel plug-in in bootstrap is the effect of left and right carousel, but what we want to achieve is a gradual effect, so we can modify the carousel effect by modifying CSS. The CSS code for the gradient effect of banner carousel is shown below

Banner carousel map gradient effect CSS code:
.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}
.carousel-inner > .item{
    height: 180px;
    background: url(../images/banner01.jpg) no-repeat center center;
}
.carousel-inner > .item:nth-child(2){
    background-image: url(../images/banner02.jpg);
}
.carousel-inner > .item:nth-child(3){
    background-image: url(../images/banner03.jpg);
}
.carousel-inner > .item:nth-child(4){
    background-image: url(../images/banner04.jpg);
}
JS code call:
    $('.carousel').carousel({
        interval: 3000
    });
4. Left side of content section

Bootstrap responsive project sharing

Bootstrap responsive project sharing

① (2) use the tab (see bootstrap API – Javascript plug-in – tab for details), which is the button part of the tab.
③ Part 4 shows the corresponding content area when the tab is switched.
② At the mobile end, the display state of this part is changed by CSS position attribute combined with JS, which is displayed or hidden by clicking the drop-down. ③ When moving the terminal, set the height of the area to be fixed, and slide left and right when there are too many contents. ④ On the PC side, move the mouse to show the big picture; At the mobile end, it supports the finger to slide left and right to switch the displayed content, which is completed by using the jquery.touchswipe.js plug-in.

5. Right side of content section

Bootstrap responsive project sharing

Bootstrap responsive project sharing

① When the PC side scrolls up and down, the display can also be switched from left to right, and when the mobile side is hidden.
② The mobile terminal uses CSS position: fixed; The setting is fixed at the bottom, and the content can slide left and right. Slide the CSS code left and right, see below

Slide CSS code left and right:
.subtopicbox{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 65px;
    border-top: 1px solid #dbdbdb;
    background-color: #fff;
    padding: 5px 10px 10px;
}
.subtopicbox .subtopiccont {
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
6. Bottom

Bootstrap responsive project sharing

Bootstrap responsive project sharing

Using grid system, PC end is divided into two columns; The mobile terminal is displayed in two lines.

Overall display of the website

Bootstrap responsive project sharing

Bootstrap responsive project sharing