Bootstrap官网样式party_1-全局css样式

访问http://v3.bootcss.com

下载用于生产环境的Bootstrap

 

常用的文件

1、对于ie版本的设置2、移动视角设置3、link引入bootstrap文件

为了方便创建文件可以在pycharm中设置默认创建文件格式

打开settings：

 

 Bootstrap的应用：

做页面先参考实例精选

栅格系统：栅格参数，堆叠到水平排列，流式布局格式（在pc屏幕和在移动端显示），列的偏移，列嵌套，列排序，

排版：标题，主体，对齐，大小写，缩略语（悬浮显示的内容），地址，引用（名人名言）

代码：内联代码，形象化提示用户输入内容，代码块，

表格：表格样式，设置边框，悬浮的状态，背景颜色状态，响应式表格（能控制滚动条）

表单：水平排列的表单，单个输入框或者文本框单选多选框，静态控件（上面账号下面密码，只能修改密码）、只读样式、校验的状态，改变输入框的大小

按钮：设置大小、颜色、位置（a,button,input）

图片：1、响应式图片，为了在父级更好的缩放2、图片的形状

辅助类：设置字体颜色，背景颜色，三角符号，让标签快速浮动，让内容块居中，清除浮动，显示或者隐藏，将文本内容替换成背景图。

 

研究完模板首先要先布局

页面的布局

通常会先写一个行，然后后面紧跟一个列。列支持嵌套，每一个列内都可以分成12列

横行站满屏

 

 

栅格系统：

　　　　

每个格的类前缀

数字代表占用每个栅格的比例（1/12）

一行总格12列 

在style中设置 

显示器最大宽度大于600px的时候变化样式c1.{中写各种样式}

 

col-md-push-3是向右推3个格

col-md-pull-9是向左拉9个格

 

 

 

 

form表单

 

 

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

设置成一个内联的标签

 水平排列的表单

 

 

 

按钮可以设置大小、颜色、位置

 

a\button\input