BootStrap 之 使用方法

BootStrap官网

http://www.bootcss.com

下载bootstrap源码

https://github-production-release-asset-2e65be.s3.amazonaws.com/2126244/9c5b6db6-5245-11e6-800b-b1e5008b1179?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190408%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190408T112201Z&X-Amz-Expires=300&X-Amz-Signature=5a1bcd0f0fe3f09bada9baea90a2413339fbe7586102e403d3608c3c51cc8bdb&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20filename%3Dbootstrap-3.3.7-dist.zip&response-content-type=application%2Foctet-stream

下载jQuery源码

在新建的HTML里面引用BootStrap与jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        //bootstrap引用位置
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
    <script src="jquery3.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
        //从bootstrap官网复制过来的代码
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
</body>
</html>

展示

原文地址:https://blog.51cto.com/12965094/2375557

时间: 2024-10-11 06:41:45

BootStrap 之 使用方法的相关文章

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法转

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOC

转载------让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

本文是转载及收藏 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面

Bootstrap Button 使用方法

Getting Started <!-- basic button --> <com.beardedhen.androidbootstrap.BootstrapButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="Success&

Bootstrap Edit 使用方法

Getting Started <!-- rounded edit text --> <com.beardedhen.androidbootstrap.BootstrapEditText android:id="@+id/txtOne" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_margin="10d

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

如有雷同,不胜荣幸,若转载,请注明 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的

免费获取Bootstrap模板的方法

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,其中中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮.功能完备的网站. 最近通过了Bootstrap中文网学习了其中的一些的用法,深深被他简易用法,逻辑清晰,优雅界面所吸引.但是通过教程只能简单地理解其中的基本用法,但对于构建一些商业级的应用还是有一定距离.尤其对于我们这些开发人员来说,我们可能更需要的是获得更多的完整案例来作为参考,构建自己的所需要的模板. 网上有很多基于很多Bootstrap的模板与主题,但

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 --转载

最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bootstrap3,在chrome,firefox,safari,opera,360浏览器(极速模式).搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,也参考了 千寻学习网 的资料,先将解决方法总结如下: 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTM

django搭建Bootstrap常用问题解决方法

1.进入页面,提示Creating a ModelForm without either the 'fields' attribute or the 'exclude'时 解决方法:打开forms.py文件,修改如下: class TestModelForm(forms.ModelForm):    class Meta:        model = User        #model = Author        fields = "__all__"

bootstrap插件实用方法

完全通过js來配置 <p><a id="YOUR_BUTTON_FOR_POPOVER" class="btn btn-primary" role="button" href="#">Click me</a>, then click somewhere else afterwards !</p> $('#YOUR_BUTTON_FOR_POPOVER').popover({ an