Bootstrap 教程

最新推荐文章于 2024-07-20 15:49:14 发布

王竹根

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量884

点赞数

分类专栏：前端文章标签： Bootstrap

本文链接：https://blog.csdn.net/dianziagen/article/details/79760465

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

来自 Twitter，前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。

教程地址： Bootstrap 教程 | 菜鸟教程

基本的HTML模板

<!DOCTYPE html>
<html lang="en">
    <head>
<!--一句话解决了我的移动端配适问题-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title> <!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet">
    </head> 
    <body> <h1>Hello, world!</h1> 
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --> 
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script> 
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　--> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

细节：

把JS文件引用放入body的最下面，是为了使js在网页全部加载完后才起作用，比如你的js里面有个alert，如果放在头部会因为弹出窗口等待用户确认而导致整个页面加载受影响。所以，通常做法，样式表通常放在head里而最先加载完毕，而js在body后。

Bootastrap的一大特点：

将css样式定义在特定的类中（.className）,使用时只需调用类名即可（class = "className"）.

Bootstrap 控件使用查询：

https://www.imooc.com/search/course?words=bootstrap

Bootstrap实现button按钮的点击事件

*代码

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <h1>Hello, world!</h1>
 <button class="btn btn-default" id="saveButton" type="button" data-loading-text="Loading..." onclick="saveToModal();">我是一个基本按钮</button>
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js">
	  </script>
      <!-- 包括所有已编译的插件 -->
       <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	   
	   <script type="text/javascript">
		function saveToModal(){  
              // alert("111");
        var btn = $("#saveButton");  
            btn.button('loading');  
            setTimeout(function () { btn.button('reset');   alert("hello bootstrap"); },1500); 
		}
		</script>
   </body>
   
</html>

效果：