Bootstrap基本使用

古城微笑少年丶 2022-06-16 14:44 196阅读 0赞

最近在学习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>
            
       
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.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" ，这个语句的意思。][meta name_viewport_ content_width_device-width_initial-scale_1.0_]

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

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

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

[meta name_viewport_ content_width_device-width_initial-scale_1.0_]: http://www.cnblogs.com/yuzhongwusan/p/4184923.html