bootstrap布局实例-创新互联

1.路径导航

创新互联专业为企业提供广安网站建设、广安做网站、广安网站设计、广安网站制作等企业网站建设、网页设计与制作、广安企业网站模板建站服务，10多年广安做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

    

        

            
首页
            
产品
            
售后
        
    

2.bootstrap下拉菜单

（1）dropdown-toggle
（2）dropdown-menu

    

        

            
首页
            
产品
            
售后
        
    








    

    
    

        菜单目录
        
        
    
        
        

            
菜单1
  
            
菜单2
            
菜单3
        

实例：水果节

    

        
        

            
            
                
                
                
                
            
            
            
        
        
        


            
            

                
                
推荐商品
                
手机生鲜
                
抽奖
            
            
            

                
                

                    
                    

                        
                        
                        
                            
                                
                            
                        
                    
                
            
        

    



    


        

            
            

            
                
                
水果介绍
                
出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。
            
            


                
            
        
    



    


        
活动图片
        
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。
     
    


        

            
            

                
                
现场采摘活动
            
        

        

            

                
                
现场采摘活动
            
        

        

            

                
                
现场采摘活动
            
        

        

            

                
                
现场采摘活动
            
        
    
    


    


        

            

                
                
商品名称
                
￥ 25.00/500g
            
        
        

            

                
                
商品名称
                
￥ 25.00/500g
            
        
        

            

                
                
商品名称
                
￥ 25.00/500g
            
        
        

            

                
                
商品名称
                
￥ 25.00/500g
            
        
        

            

                
                
商品名称
                
￥ 25.00/500g
            
        
    

CSS文件：

/ CSS Document/
/调整logo位置/
.navbar-brand{
padding: 7px 15px;
}
/导航条背景色，边框色/
.navbar-inverse{
background-color: #ff722b;
border-color: #FF722B;
}
/导航条列表文字颜色/
.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
/列表首页选中状态，/
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #C45923;
}
/折叠按钮边框/
.navbar-inverse .navbar-toggle {
border-color: #FFFFFF;
}
/选中折叠按钮的背景色/
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
background-color: #C45923;
}
/导航条 下拉列表 表单的边框颜色/
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #FFFFFF;
}
/导航条的底部margin/
.navbar{
margin-bottom: 0;
}
/巨幕/
.jumbotron{
background: url("../images/banner_bg.jpg") center center no-repeat;
padding: 25px 0;
}
/标题位置/
.banner_title{
margin-top: 47px;

}
/标题位置随浏览器缩放调整/
@media (max-width:1200px){
.banner_title{
margin-top: 30px;
}
}

@media (max-width:992px){
.banner_title{
margin-top: 15px;
}
}
/二级标题文字大小，颜色/
.banner_detail_title{
font-size: 18px;
color: #FFFF00;
}
/文字内容，大小，颜色，行高/
.jumbotron .banner_detail{
font-size: 14px;
color: #FFFFFF;
line-height: 28px;
}
/第三部分标题位置，大小，颜色/
.innersty h4{
margin-top: 0px;
font-size: 30px;
color: #333;
}
/第三部分内容大小，颜色/
.innersty p{
font-size: 14px;
color: #333;
}
/第三部分图片样式，大图片宽度，适应浏览器缩放，位置调整/
.active_list .thumbnail{
max-width: 260px;
margin: 0 auto 20px;
}
/图片下的文字居中/
.active_list .thumbnail h5{
text-align: center;
}
/第四部分每张图片边框，大宽度，位置/
.goods_con{
border: 1px solid #ddd;
max-width: 260px;
margin: 0 auto 20px;
}
/图片占方框的百分比/
.goods_con img{
width: 100%;
}
/栅格占比/
.goods_list .col-lg-2{
width: 20%;
}
/浏览器缩栅格占比，流动对齐/
@media (max-width:1200px){
.goods_list .col-lg-2{
width: 20%;
float: left;
}

}
@media (max-width:992px){
.goods_list .col-lg-2{
width: 33.33%;
float: left;
}

}
@media (max-width:768px){
.goods_list .col-lg-2{
width: 100%;
float: left;
}

}

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：bootstrap布局实例-创新互联
标题来源：http://scjbc.cn/article/dedids.html