I. Rotary sowing effect

<!— ****************** Implementing Rotary Sowing Effect ************************************* -->
<divid="carousel-example-generic"class="carousel slide"data-ride="carousel">
<!-- The circle below the picture -->
  <olclass="carousel-indicators">
    <lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li>
    <lidata-target="#carousel-example-generic"data-slide-to="1"></li>
    <lidata-target="#carousel-example-generic"data-slide-to="2"></li>
  </ol>

<!-- Content, where the content on the picture is carousel It will sort automatically. -->
  <divclass="carousel-inner"role="listbox">
      <divclass="item active">
      <imgsrc="Home/Game_Img/3.jpg"alt="..." >
      <divclass="carousel-caption"> 
       <h1>9.01 grand opening</h1> 
      </div> 
    </div>
      <divclass="item">
      <imgsrc="Home/Game_Img/4.jpg"alt="...">
      <divclass="carousel-caption">
          <h1>New clothes activities</h1>
         <a><h3>Click on the link to enter</h3></a>   
            </div>
       </div>   
    
  </div>
<!--   To achieve sliding control, character icons need to be added to the project. -->
  <aclass="left carousel-control"href="#carousel-example-generic"role="button"data-slide="prev">
    <spanclass="glyphicon glyphicon-chevron-left"aria-hidden="true"></span>
    <spanclass="sr-only">Previous</span>
  </a>
  <aclass="right carousel-control"href="#carousel-example-generic"role="button"data-slide="next">
    <spanclass="glyphicon glyphicon-chevron-right"aria-hidden="true"></span>
    <spanclass="sr-only">Next</span>
  </a>
</div>
<!-- ********************************************************************* -->

Two ways of using Bootstrap modal dialog box:

<scriptsrc="Lib/JS/bootstrap-dialog.min.js"></script>

1. Create by message directly:

 BootstrapDialog.show({
        title: 'Do you want to create a background account for the promoter?',
        message: '<div>Do you want to create a background account for the promoter??</div>',
        buttons: [{
            label: 'yes',
            action: function(dialog) {
        myfunction();
            dialog.close();
             
            }
        }, {
            label: 'no',
            action: function(dialog) {
                dialog.close();
            }
        }]
    });

2. Binding the display of modal dialog box to a button to realize the display and hiding automatically.

<buttontype="button" class="btn btn-info col-md-5 "data-toggle="modal"data-target="#MyModal "> Generate Channel Promotion Page </button>"

<divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
    <divclass="modal-dialog">
        <divclass="modal-content">
        
            <divclass="modal-header">
                <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
                <h4class="modal-title"id="myModalLabel">Creating Channels to Promote</h4>
            </div>
            <divclass="modal-body">
            <divclass="form-group"><label>Channel name</label>
                    <inputtype="text" name="name"id="nameval"class="form-control"placeholder="Channel name (not duplicated)">
                </div>
                
                    
            <divclass="form-group">
            <label>Promotion type</label>
                    <selectname="tType"id="typeval"class="form-control">
                        <optionvalue="1">Webpage promotion</option>
                        <optionvalue="2">WeChat promotion</option>
                        <optionvalue="100">All</option>
                    </select>
                    </div>     
            </div>
            <divclass="modal-footer">
                <buttontype="button"class="btn btn-default"data-dismiss="modal"onclick="new_build()">Submission</button>             
            </div>
        </div>
    </div>
    </div>

Lists and badges

List formats and badges are generally used to achieve unread news

• List: To Element < UL > Add class. list-group. To <li> Add class. list-group-item.
• Badges: Mainly used to highlight new or unread items. To use the badge, just add <span class="badge"> to the link, Bootstrap Navigation and other elements can be on.

4. bootstrap can realize different color progress bars.

• Add a <div> with class. progress.
• Then, above < div > Inside, add an empty <div> with class. progress-bar.
• Add a style with a percentage width Attributes, such as style="60%"; representing progress bars at 60% Location.

V. Portal navigation bar:

Bootstrap navigation bar can be positioned dynamically. By default, it is a block-level element based on HTML Located in the middle. With some helper classes, you can place it at the top or bottom of the page, or you can make it a static navigation bar that scrolls along with the page.

If you want the navigation bar to be fixed at the top of the page, add class. navbar-fixed-top to the. navbar class.

Affix plug-in allows for a < div > Fixed somewhere on the page. You can also switch between opening or closing the plug-in and using it. A common example is social icons. They will start somewhere, but when the page clicks on a tag, the < div > Lock in a location and don't scroll along with the rest of the page.

It is not implemented. Finally, it is implemented by position:fixed css.