美文网首页
简单的Bootstrap使用

简单的Bootstrap使用

作者: 留下的是物离开的是人 | 来源:发表于2017-12-16 16:40 被阅读0次

    1使用bootstorp 必须先下载引用  里面有 css img js类库  然后导入工程

    2.如果想搭出什么样的样式。。就到http://www.bootcss.com上面查看,找到你想要的效果,然后记住类名,然后再工程里面引用类名就可以了

    *****  因为有两个版本  一旧一新   所有有时候出不来效果时把版本换一下  ******

    3.图标:必须把图片导入工程img 里面  -->直接在图片获取所用图片的位置    。可直接根据类名获取到图片上的任意图标

    搭页面:注意JS的类库必须在bootstrap的前面

    先导入类库  三个

    <link rel ="stylesheet" href="css/bootstrap.min.css" />

    <script type="text/javascript" src="js/juqery-1.11.0.min.js"></script>

    <script  type="js/bootstrap.min.js"></script>

    然后就可以开始打页面效果了;

    小练习:现代浏览器博物馆     整体效果可直接在现代浏览器博物馆官方查看

    1:效果图:

    参考代码


    2:效果图(5张图片轮播)

    参考代码

    3:效果图

    参考代码:

    4:效果图:

    参考代码:

    然后用一个大的div 标签把这些代码都框住。快速简单美观的一个页面就搭出来了

    相关文章

      网友评论

          本文标题:简单的Bootstrap使用

          本文链接:https://www.haomeiwen.com/subject/tngswxtx.html