bootstrap布局实例

1.路径导航

成都创新互联公司2013年至今，是专业互联网技术服务公司，拥有项目成都网站制作、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元通道做网站,已为上家服务,为通道各地企业和个人服务,联系电话:18982081108

    

        

            
首页
            
产品
            
售后
        
    

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;
}

}

网页名称：bootstrap布局实例
分享网址：http://dzwzjz.com/article/gecceo.html