1、要建立响应式网站的布局,这个时候bootstrap的高级就能体现出来了。

2、先来了解一下bootstrap提供了哪些响应式工具供我们使用:

  (1)屏幕宽度尺寸的概念:

     <768px                         xs  超小屏幕(手机)

      768px>=   <992px        sm  小屏幕(平板)

     992px>=    <1200px      md  中等屏幕(桌面)

     >=1200px                      lg  大屏幕(桌面)

  (2)通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容

    隐藏的时候和面没有带*号,显示的时候带一个*号。这是因为,显示分为block、inline-block和inline三种情况。隐藏就是none,所以不带*号。

3、头部通栏——topbar

  (1)字体图标

    声明:  @font-face{undefined

            font-family:"这个名字是你这些字体图标的代号";

            src: url(../font/MiFie-Web-Font.eot) format('embedded-opentype'), url(../font/MiFie-Web-Font.svg) format('svg'), url(../font/MiFie-Web-Font.ttf) format('truetype'), url(../font/MiFie-Web-Font.woff) format('woff');

            //src:url() format();  如上所示

         }

    使用:      [class^="icon-"],[class*=" icon-"] {//字体图标类名一般用   icon-   开头

            font-family: "与声明的名字保持一致才可以使用";
         }

    特定的类就要用特定的字符:    .icon-mobile::before {

                    content: "\e908";//字体图标的编码
                    font-size: 13px;//设置字体图标的大小
                  }

  (2)栅格系统

    这个是bootstrap提前给你写好的分列系统。咱们只需要拿过来用就好了。

转载于:https://www.cnblogs.com/sylz/p/5793234.html


暂无留言,赶快评论吧

欢迎留言