Bootstrap基本使用

最新推荐文章于 2025-05-06 09:21:52 发布

原创最新推荐文章于 2025-05-06 09:21:52 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #HTML5 #CSS3 #jQuery #meta

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Bootstrap进行前端开发，包括创建HTML5文档、兼容不同浏览器的方法及必要的文件引入。此外，还详细解释了如何利用免费的CDN加速服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习bootstrap，发现其中的默认样式真的很好看，那学习bootstrap的时候总要学会基础的使用的吧，我使用的是dreamweaver来编写代码的，由于bootstrap是基于HTML5和CSS3的，所以我们创建HTML文件的时候就应该使用HTML5的文档声明模式啊，而且bootstrap3 是放弃了IE7的兼容的，但是IE8版本的我们还是要兼容一些的，因为HTML5支持的是IE9以上的浏览器。而我正好看到慕课网上有一份可以直接拿来使用的模板，而且还兼容了IE8，对于那些不兼容CSS3的浏览器，该模板还另外引进了其他的文件来兼容。



    
        
  
        
  
        
  
        Bootstrap的HTML标准模板   
        
  
         href="css/bootstrap.min.css" rel="stylesheet">
        
  
         href="css/your-style.css" rel="stylesheet">        
        
  
        
  
    
    
        Hello, world!
        
        
  
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

需要注意的是，如果我们想要使用bootstrap这个前端的开发框架的话，就需要去bootstrap网下载一些必须的文件，但是如果我们不想下载的话，该网页提供了免费的CDN加速服务，支持Http和Https的协议。

以上的文件都是必须的，如果我们想要实现bootstrap框架的话。

关于 <meta http-equiv="X-UA-Compatible" content="IE=edge">

X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，因为bootstrap是不支持IE7的，但是支持IE9，其中IE是需要被兼容的部分，所以这个标签在html的<head>标签中使用。使用上面这段代码使用的是Edge 。模式Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。

关于meta name="viewport" content="width=device-width,initial-scale=1.0" ，这个语句的意思。

这条语句是适用于移动端的界面的，毕竟移动端的界面比电脑屏幕小很多，如果我们没有设定这个的话，移动端上就会出现横的滚动条，这样子其实也不利于用户的浏览。

width:可视区域的宽度，值可为数字或关键词device-width

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。