Home > Developer > Web Develop
<body>
<navclass= "NavBar navbar-default navbar-fixed-top"> <!--navbar-default refers to the default style of the navigation bar Navbar-fixed-top the navigation bar is anchored at the top <Divclass=container> <!--Place the Contianer in the Nav tab to ensure that the navigation bar covers the entire window in the left and right direction. <Divclass= "Navbar-header"> <ahref="#"class= "Navbar-brand"><imgsrc= "Img/zhihulogo.png" /></a> <!--logo should be placed in a DIV element with the class name Navbar-header -- </Div> <formclass= "Navbar-form navbar-left"> <!--navbar-left refers to the left-floating element <Divclass= "Input-group"> <inputtype= "text"class= "Form-control"style= "320px"placeholder= "Search your xxx"/> <spanclass= "Input-group-addon"><ahref="#"><spanclass= "Glyphicon glyphicon-search"></span></a></span> </Div> </form> <ulclass= "Nav navbar-nav navbar-left"> <Li><ahref="#">Home</a></Li> <Li><ahref="#">Topic</a></Li> <Li><ahref="#">Found</a></Li> </ul> <ulclass= "Nav navbar-nav navbar-right"> <Li><ahref="#"><spanclass= "Glyphicon glyphicon-user"></span>Register to know</a></Li> <Li><ahref="#">Login</a></Li> </ul> <Buttonclass= "btn btn-primary navbar-btn navbar-right">Questions</Button> </Div> </nav></Body>
<style>
body{margin-top:50px;}
. Mybtnstyle. Dropdown-menu span{
margin:5px;
}
. Mybtnstyle. Dropdown-menu {
Animation:0.5s linear fadeIn;
}
@keyframes FadeIn {
0%{opacity:0;transform:translatey (-20);}
100%{opacity:1;transform:translatey (0);}
}
tab-content {
border:1px solid #999; border-top:none;border-radius:0 0 5px 5px;
}
. container {
width:960px
}
. navbar-default{
Background:linear-gradient (to bottom, #086ed5, #055db5)!important;
}
. navbar-header{
Margin-top: -3px;
}
. Navbar-nav a {
Color:snow!important;
}
</style>
styleMaking site navigation using bootstrap
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
