Bootstrap开发响应式布局(1)

Bootstrap开发响应式布局(1

大家好我是东轩,前端狗一枚,很多人问我自己做的网页在电脑端兼容性很高,为什么到手机端就变形了?今天那我就带大家简单的做一下,网页如何在电脑端,手机端,平板都能正常显示。好了废话不多说。

Bootstrap是什么那?

Bootstraphtmlcssjs的一个框架,用于响应式布局,移动设备优先 ,简单,易懂。

一般是可以自学会的。

那么下面我们进行实战演练:Bootstrap是由他们自己的框架组成所以不用我们自己动手来编写剩下很多事。框架你们可以自行去他们官网下载。http://www.bootcss.com/我这里已经下载好。我们现在安装下。图片3.png

第一个就是,我们解压这个文档图片2.png

三个文件,然后我们自己新建一个文件夹把这些东西拷进去,然后新建一个html5的页面即可。然后开始引入,图片1.png

 

这就是基本模板这些代码在Bootstrap官网有的可以自行查找。

然后我们基本工作完成以后就开始今天的重点。

< div class= container>..</div>

container类用于固定宽度并支持响应式布局的容器。

< div class= container-fluid>..</div>

container-fluid:100%宽度,占据全部视口

还有重要的一点就是使用这个框架一定不能要记住宽短使用%,字体使用em   1em=16px

这些我们做完就开始学习栅格系统。

好了今天就到这里, 下期请关注我的博客www.dxblog.cn 或者关注微信公众号:白帽子社区。

欢迎加入白帽子社区群:298818545。我的微博东轩oba(有事留言欢迎关注)。

分享本文至:


发布时间:2017-11-4 23:10 Saturday
  • 版权声明:除非注明,文章均为【seo教程网】原创,欢迎转载!转载请注明本文地址,谢谢!

  • 作者:seo教程网

    东轩,IT专业,主攻网站前端设计制作方面以及seo,sem技术。要做就做最好的seo,sem博客

    返回列表
    上一篇:
    下一篇:

    发表评论

    快捷回复: