深入理解Bootstrap-----读书笔记 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>深入理解bootstrap笔记</title>
	<style type="text/css">
	</style>
</head>
<body>
    <!-- 
      1、写在前面
      a、Bootstrap的强大之处在于他对常见的css布局小组件和javascript插件的都进行了完整且完善的封装。
      b、Bootstrap默认提供了大量的插件和集合，代码非常简洁，并且易于修改，你完全可以再起基础之上修改成任何自己想要的样子
      c、所谓的@font-face，其实是通过css里面的@font-face语法，将安全的web字体即时下载到客户端，从进行引用和显示。
        通过这种技术我显示图标的好处就是，图标可以任意放缩，改变颜色，你需要做的只是像修改文字样式那样修改图标样式即可


       2.<meta name = 'viewport' content = 'width=device-width,initial-scale=1,maxinum-scale=1,user-scalable =no'>
         强制让文档的宽度和设备的宽度保持1:1，文档最大的宽度比例是1，且不允许用户单击屏幕放大浏览


        3、媒体查询
        @media(max-width:767px){

		}
		@media(min-width: 768px) and (max-width: 991){

		}
		@media(min-width: 992px) and (max-width: 1199px){

		}
		@media(min-width: 1200){

		}

		4、立即调用的函数表达式
		(function(){
	
		})()

		(function(){
	
		}())

		5、响应式设计
		   页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的相应和调整

		6、响应式栅格尺寸标准以及实现设置
		超小屏幕设备手机
		<768
		小平设备平板
		768<x<992
		中等屏幕设备桌面
		992<x<1200
		大屏幕设备桌面
		x>1200

		7、禁用响应式
		a、删除meta标签的viewport标签
		b、.container设定笃定宽度的值
		c、导航条组件溢出搜优折叠行为和展开行为
		d、替换col-lg-等类


		8、图片自适应宽高
		.img-responsive{
	       display:block;
	       max-width: 100%;
	       height: auto;
		}

        9、居中
        .container{
	        padding-left: 15px;
	        padding-right: 15px;
	        margin-left: auto;
	        margin-right: auto;
        }
        
        10、清楚浮动
        不加类名，直接在父元素添加一个伪类
        &:after{
	       dispaly:block;
	       content: "";
	       clear: both;
        }
        添加类名，给富集元素添加一个雷
        .clearfix{
	        dispaly:block;
	        content: "";
	        clear: both;
        }
        在浮动元素后面加一个div
        div设置样式 clear: both;



   
     -->
       


</body>
</html>

　　

posted @ 2017-08-19 15:01  SunLike阿理旺旺  阅读(140)  评论(0)    收藏  举报