• 一:前端框架Bootstrap
  • 1.BOOtstrap框架介绍
  • 2.下载Bootstrap链接
• 二:响应式布局
  • 1.什么是响应式布局？
• 三:实战初体验(C V大法 轮播图)
• 四:CV大法(博客)
• 五:布局容器
  • 1.什么是布局容器？
  • 2.左右两侧有留白
  • 3.左右两侧没有留白
  • 4.总结:
• 六:栅格系统
  • 1.什么是栅格系统？
  • 2.简介:
  • 4.写一个row就是将所在的区域划分成12份
  • 5.在使用bootstrap的时候 脑子里面一定要做12的加减法
  • 6.栅格系统应用
• 七:响应式布局
  • 1.响应式布局
  • 2.实时监测浏览器屏幕大小
  • 3.实验结果
  • 4.解决方法:

一:前端框架Bootstrap

1.BOOtstrap框架介绍

1.该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

2.使用框架调整页面样式一般都是操作标签的class属性即可
bootstrap需要依赖于jQuery才能正常执行(动态效果)

2.下载Bootstrap链接

下载链接:

二:响应式布局

1.什么是响应式布局？

响应式布局，根据浏览器窗口的大小来自动调整个个标签，所占的比例 如:
pc端与手机端！

扩展:
Google支持同时开发pc端与手机端页面
左下角

三:实战初体验(C V大法 轮播图)

1.需求将网页下面的轮播图Ctrl+V，复制到自己的HTML文档中使用。

2.打开检查，左标头选择轮播图，确定所在div标签，右键点击，选择Copy，选择Copy HTML代码，复制到Pycharm中HTML文件。

3.复制到HTML文件

4.成功

四:CV大法(博客)

1.选择你中意的博客，帖子，进行Copy。

2.选择HTML源码编辑器

五:布局容器

1.什么是布局容器？

布局容器就是左右两侧留白，只在中间使用bootstrap显示页面，在视觉上会显得更加美观，简洁，给用户一种清晰，简洁美的感觉，包括现在主流大型网站页面都在使用，布局容器。

container			:左右留白
container-fluid  	 :左右不留白

2.左右两侧有留白

  // 类用于固定宽度并支持响应式布局的容器。
    			// 在左右两边留白 div网页内写内容

3.左右两侧没有留白

  // 类用于100%宽度，占据全部视口（viewport）的器。
    

4.总结:

后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面

六:栅格系统

1.什么是栅格系统？

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

2.简介:

row作用:
1.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2.一个row就是一行,这一行会均分成12份。
最小1份 最多12份

3.占份
row			行  	: 一个row就是一行 一行是固定的12份
col-md-1	占几份
col-sm-1	占几份
col-xs-1	占几份
col-lg-1	占几份

4.写一个row就是将所在的区域划分成12份

5.在使用bootstrap的时候 脑子里面一定要做12的加减法

  // 获取你所要的份数

6.栅格系统应用

七:响应式布局

1.响应式布局

目前页面只是能左右布局，但是，当我们切换到手机显示器，或其他屏幕时，会出现页面整体样式变形，打乱了，所以目前该页面没有加入响应式布局。

2.实时监测浏览器屏幕大小

3.实验结果

实时检查浏览器屏幕大小变化，一旦浏览器窗口小于600px，就执行以下代码
将页面变成绿色。

附加:
	后期可以进行相应更改，按照需求，但目前还有更好的解决方法，以下内容，解决屏幕兼容性问题。

所以我们要解决pc端到手机端页面布局的比例不能打乱。

4.解决方法:

? 便世道bootstrap中的栅格参数(响应式布局)

八:栅格参数(响应式布局)

1.响应式布局

针对不同的显示器 bootstrap会自动选择对应的参数
如果你想要兼容所有的显示器，你就将四个类全部加上即可
会自动做响应式布局，解决显示器的兼容性。


.col-xs-    .col-sm-    .col-md-    .col-lg-

将以上四个类都添加上，响应式布局，该页面就可以兼容所有的显示器，都是正常显示。

2.响应式布局(使用格栅参数)

3.实现row只有8份居中展示

在一行如何移动位置
参数(类):
    col-md-offset-

4.8份左右居中展示

解析:
    默认是从左往右移动的 12-8 = 4  8%4 = 2 所有可以实现8份左右居中
    所有就是掌握12以内的 加减乘除 即可，按情况进行处理。

九:实战样式

    

我知道你 在我世界最重要！ 你记得我的最好 


你懂你 再见!


小朋友 你是否有问号?



  
在这个世界上 我在此遥望诗和远方!
  

    

十:表单

1.针对表单标签 加样式就用form-control
	class="form-control"
	
2.checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
222
333

3.针对报错信息 可以加has-error（input的父标签加）

	username:
  

    

        
登录页面
        
 
  
            
username: 
            
password: 
            
偶像:
                
                苍某空
                三某悠亚
                小某幼
                
            
            
hobby:
                快餐
                西餐
                游泳
            
            
textarea:
                
            
            
        
    

十:按钮

1.可作为按钮使用的标签或元素

为 ``、`` 或 `` 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

a标签添加按钮属性
点我

button按钮
按我     // 红色
按我   // 白色
按我   // 绿色
按我  	 // 蓝色
按我  // 黄色 

注意:
	按钮组只有六种颜色

3.预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

针对组件的注意事项
虽然按钮类可以应用到  和  元素上，但是，导航和导航条组件只支持  元素。

链接被作为按钮使用时的注意事项
如果  元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role="button" 属性。

跨浏览器展现
我们总结的最佳实践是：强烈建议尽可能使用  元素来获得在各个浏览器上获得相匹配的绘制效果。

另外，我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug，其表现是：阻止我们为基于  元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

按我  // 大按钮
按我  // 小按钮
按我  // 超小尺寸

  

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

使用图标,将图标类复制粘贴到指定标签内位置，填写类。

登陆页面 

注意:
    图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的  标签，并将图标类应用到这个  标签上。

默认为白色导航条

  
Hello, world!
  
...
  
Learn more