Form:
<! DOCTYPE html>Operating effect:
Responsive navigation Menu:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <!--introduction of jquery and Bootstrap class libraries - <Linkrel= "stylesheet"href= "Css/bootstrap.min.css" /> </Head> <Body> <!--bootstarp navigation Bar Default height is 50px class= "Nav navbar-inverse" set the navigation bar style (currently Beijing is black) can also be written class= "Nav Navbar-default" role= "navigation" means that the current div is set to the navigation bar class= "Container-fluid" that is to tell the navigation bar to use the flow layout method navbar-fixed-to P Sets the navigation bar to always appear at the top of the page, and the corresponding Navbar-fixed-bottom is always displayed below - <Divclass= "Nav navbar-inverse navbar-fixed-top"role= "Navigation"> <Divclass= "Container-fluid"> <Divclass= "Navbar-header"> <!--Hide button when the page is smaller than the default of 768 pixels, the content in the responsive layout is hidden, and the button data-target= ". Nav-collapse" is looking for the following div that sets the response layout - <Buttonclass= "Navbar-toggle"Data-toggle= "Collapse"Data-target= ". Navbar-collapse"> <spanclass= "Icon-bar"></span> <!--each "span tag is a small horizontal line" the button here is made up of 3 small horizontal lines " - <spanclass= "Icon-bar"></span> <spanclass= "Icon-bar"></span> </Button> <!--Add a logo because the height of the navigation bar defaults to 50pk in case the outside of the logo is set to a height of 50px - <ahref="#"class= "Navbar-brand"> <imgsrc= "img/{1y (FB52 ' 7) zkn (0eyquzy.jpg"style= "height:50px; margin-top:-15px;"/> </a> </Div> <!--class= "Collapse Nav-collapse" turns the module in the current div into a responsive layout - <Divclass= "Collapse Navbar-collapse"> <!--Navigation list - <ulclass= "Nav navbar-nav"> <!--class= "Active" is the default selected menu - <Liclass= "Active"><ahref="#">Home</a></Li> <Li><ahref="#">Navigation One</a></Li> <Li><ahref="#">Navigation II</a></Li> </ul> <!--Navigation search Box class= "Navbar-form navbar-right" first class tag labeled Search bar The second "Navbar-right" is set to display on the right - <Divclass= "Navbar-form navbar-right"> <inputtype= "text"class= "Form-control"placeholder= "Please enter keywords"/> <Buttonclass= "Btn btn-primary">Search</Button> <ahref="#"class= "Navbar-link"style= "font-size:18px; color: #FFFFFF">Landing</a> <ahref="#"class= "Navbar-link"style= "font-size:18px; color: #FFFFFF">Registry</a> </Div> </Div> </Div> </Div> <!--when using the bootstrap frame, the JS file can be introduced under the leaf to improve the load efficiency of the page because the bootstrap framework relies on jquery so before introducing JS file Bring in the Jquery.js . - <Scripttype= "Text/javascript"src= "Js/jquery-1.11.2.min.js" ></Script> <Scripttype= "Text/javascript"src= "Js/bootstrap.js" ></Script> </Body></HTML>Operating effect:
Adjust the page width to less than the default width:
You can click the button (the top right corner of the 3 small white bar) to show and hide
Front-end frame bootstrap form and navigation menu Demo (second article)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
