Responsive home Based on the bootstrap framework

This page has a homepage, Charm Fujian, university recommendation, international academic, foreign staff, cooperation and exchange, such as 6 column navigation, its under the two-level navigation Fujian culture, scholarship, talent Center. The main features of the front desk of the management platform are as follows:

1. The layout structure is reasonable, the content is full, the graphic expression is streamlined.

2. Tonal collocation harmony, make the whole interface have unity.

3. Navigation bar Plate Realization of the principle of intuitive, directory classification is reasonable, the title clear, eye-catching.

4. Use a multi-column layout to reduce the reliance on shapes and lines.

5. The interface is friendly and flexible, and can be adapted to different mobile devices.

3.1.3 Page implementation and effects

The first page of the overall use of bootstrap grid system layout, the left side of the header to display the welcome, the right side with Login registration button, user-friendly login. At the top of the page is a double-circle containing the "ffc[FFC: Fujian foreign cooperation English first letter combined with the" theme logo, simple and generous. Central content block is divided into three parts, the first is the site navigation bar, using the method of fine-tuning the blue transparency, highlighting the navigation title, and navigation title cut and theme, so that the browser at a glance; Finally, four iconic small icons highlight the central content of the platform once again. At the bottom of the page is a link to the Web site's copyright notice and external cooperation. The page is in blue and white as the main tone, with unity.

Homepage Interface Effect diagram:

PC-Side effects:

phone-side effects:

Main code:

Navigation General Frame Construction: Overall navigation layout--navigation layout--drop-down menu layout

--Small device on-screen menu layout

The general frame construction of the Carousel diagram: The overall adaptive layout of the Carousel diagram--picture switching

Implementing CODEBASE: <!--nav-<div class= "NavBar navbar-default" > <div class= "container-fluid" > <div class= " Collapse Navbar-collapse "id=" menu "> <ul class=" Nav navbar-nav "> <li><a href=" index.html "> First Page </a></li> </ul> </div> </div><!--/container-fluid--> </div> <!--  
    Small screen device navigation style--<div class= "Navbar-header" > <button class= "navbar-toggle collapsed" data-toggle= "collapse" data-target= "#menu" aria-expanded= "false" > <span class= "Icon-bar" ></span> <span class= "ico N-bar "></span> <span class=" Icon-bar "></span> </div> <!--Carousel Layout--> <div i D= "Slide-example" data-interval= "class=" Carousel Slide "data-ride=" Carousel "> <div class=" Carousel-inner "> <div class=" Item Active ">  <div class= "Carousel-caption" ></div> &Lt;/div> </div> <!--carousel Switch-> <ol class= "carousel-indicators" > <li data-target= "#slide-exam ple "data-slide-to=" 0 "></li> </ol>