zoukankan      html  css  js  c++  java
  • 对于Bootstrap的介绍以及如何使用

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

    可以自动适配任何设备,解决了响应式实现的繁琐问题,可以修改其中的各种样式,同样,其内部功能的强大包含了整个HTML,CSS,JS的各个方面。

    通过Bootstrap制作的网站,极大地节省了代码,而且网页的整洁度有明显提高,熟练掌握使用可以更快更好的完成网站的制作。

     

    http://v3.bootcss.com/getting-started/这是Bootstrap3.3.7的下载地址

     

    如何使用:

    如上,如果要插入自己的css文件,要将自己的css文件插入在之后




    JS文件则必须将JQuery文件放在Bootstrap文件之前,否则运行会出错。

    在head中要记住写入这段代码,虽然是注释体,但是会生效:第一个js让ie8能支持HTML5的新标签
                                第二个js让ie8能支持CSS3媒体查询

    那么到底如何在代码中应用,需要从Bootstrap的官方网站了解各个样式的组名
    Bootstrap是通过不同的组名来判别各个标签应有哪种效果

     

    例如一个table上有了这些class,那么出现的table样式为:

    而不是传统的table样式

    通过对每个标签不同的分组,可以实现各种不同的效果,并不需要css样式或js的设置改动,只需要在自己的css文件中改变需要的文字样式或颜色等即可快速做出框架网站。

     

    栅格系统是Bootstrap制作响应式的重要系统,通过使用栅格,可以快速的完成响应式

    栅格系统有这几种宽度适配,具体应用为:

    表现出的效果为:全屏

    宽度逐步减少:

     宽度再次减少:

     变为一列显示的效果。栅格系统熟练应用,可以使响应式布局迅速完成,只需在内部设置好相应的内容即可。

     
  • 相关阅读:
    rest_framework学习之路
    jQuery操作cookie
    Cookie和Session
    HTTP之Content-Type
    HTTP协议
    Python之random模块
    HTML5(FileRdeader)
    Python之re模块
    LINQ基础 之 LINQ TO SQL (二)
    LINQ基础(一)
  • 原文地址:https://www.cnblogs.com/Lmey/p/6782609.html
Copyright © 2011-2022 走看看