Bootstrap——Bootstrap学习笔记以及案例分享

文章目录

• 前言
• 一、关于Bootstrap
• 二、如何下载、使用
  • 1.下载（以版本 v3.4.1为例）
  • 2.使用以及基本模板
• 三、案例分享
• 总结

---

一、关于Bootstrap

   Bootstrap   是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

二、如何下载、使用

1.下载（以版本 v3.4.1为例）

官网——https://v3.bootcss.com/

1.1  用于生产环境的 Bootstrap

编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

1.2  Bootstrap 源码

Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作

2.使用以及基本模板

拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。你可以对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

——不要忘记引入jQuery   bootstrap.js 以及 bootstrap.css   哦！！（bootstrap3依赖jQuery）

  
    
    
    
    
    

    
    

    
    
    
  
  
    
你好，世界！

    
    
    
    
  

三、案例分享

1. 示例图

已经初步了解Bootstrap，接下来就让我们通过下面这个案例进一步学习关于Bootstrap 的使用吧！——由于文章篇幅的关系，在这里就以一个页面的实现为例吧

---

2.导航条的实现

bootstrap组件的使用

Bootstrap 自带了大量可复用的组件，如下图所示，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。以导航条的制作为例，bootstrap中的组件(在组件页面中)只需要直接复制保留需要的结构即可使用。    （下文较为复杂的页面结构在Bootstrap中都可找到并直接使用。）

2.1 HTML结构

 
    

        

            
            

                
                    Toggle navigation
                    
                    
                    
                
                
                    
                
            

            
            

                

                    

                        
                            
                            首页
                        
                    
                    

                        
                            
                            资讯
                        
                    
                    

                        
                            
                            案例
                        
                    
                    

                        
                            
                            关于
                        
                    
                
            

        

    

2.2  CSS样式

/* 导航栏区域样式设置 */
.navbar {
    margin-bottom: 0px;
}

.navbar-brand {
    padding: 0;
}

3. 新闻列表以及底部区域的实现

3.1 HTML 结构

 
    

        

            

                

                

                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            

                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            
                            admin 15 / 10 / 11
                        
                    
                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            

                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            
                            admin 15 / 10 / 11
                        
                    
                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            

                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            
                            admin 15 / 10 / 11
                        
                    
                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            

                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            
                            admin 15 / 10 / 11
                        
                    
                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            

                                TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
                            
                            admin 15 / 10 / 11
                        
                    
                
                
                

                    
热门资讯
                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            admin 15 / 10 / 11
                        
                    
                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            admin 15 / 10 / 11
                        
                    
                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            admin 15 / 10 / 11
                        
                    
                    

                        

                            
                                
                            
                        
                        

                            
广电总局发布TVOS2.0 华为阿里参与研发
                            admin 15 / 10 / 11
                        
                    
                
            
        
    

 
    

        

            
企业培训 | 合作事宜 | 版权投诉
            
皖ICP 备12345678. © 2009-2016 艾特企训网. Powered by Bootstrap.
        
    

3.2 CSS样式

* 主体——新闻列表区域样式设置 */
main {
    background: rgb(238, 238, 238);
}

.row {
    margin: 40px 0px;
}

.media {
    padding: 15px;
    background: #fff;
}

.media img {
    height: 70px;
}

.media-body>h4 {
    margin-bottom: 5px;
    color: #333;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 14px;
}

.media-body>p {
    line-height: 26px;
    padding-top: 10px;
}

.hot {
    font-size: 18px;
    padding-bottom: 0px;
    border-left: 5px solid #000;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    margin-left: 15px;
    margin-top: 15px;
}

.row .hidden-xs {
    padding-left: 0;
}

.row .hidden-xs .media-body {
    padding-left: 0px;
}

.row .hidden-xs h4 {
    font-size: 16px;
    line-height: 26px;
}

#special {
    height: 85px;
}

/* 底部区域样式设置 */
.footer {
    background: #666666;
    color: #eee;
    padding: 25px 0 10px 0;
}

.footer a {
    color: #eee;
}

.footer p {
    margin-bottom: 10px;
}
@media (max-width: 1000px){
    .hidden-xs{
        display: none;
    }
}
@media (min-width: 1200px) {
    .container{
        width: 1700px;
    }

    .media img {
        height: 170px;
    }

    .col-md-4 {
        width: 33.33333333%;
    }

    .left {
        padding-left: 15px;
    }

    .media-body>h4 {
        font-size: 20px;
    }

    .container {
        width: 1170px;
    }

    .outer {
        padding: 50px 0px;
    }

    ;

    .container {
        width: 1170px;
    }

    .eight {
        width: 66.66666667%;
    }

    .four {
        width: 33.33333333%;
    }

    .news>.news-right {
        width: 58%;

        padding-left: 15px;

    }

    .news-left img {
        height: 170px;
    }

    .news-right h4 {
        font-size: 20px;
    }

    .news-right p {
        line-height: 26px;
        padding-top: 10px;
    }

    .news-right span {
        font-size: 14px;
    }
}