bootstrap CSS篇（基础知识总结）

bootstrap

一，概念：

是一个简单，灵活的用于搭建web页面的html,css,javascript工具集

2，在其官网上下载：www.getbootstrap.com

3,它与h5相适应，即bootstrap是写在h5当中

4，<meta name="viewport" content="width=device-width, initial-scale=1.0">

窗口为可视化窗口，其宽度为设备的物理宽度，缩放比例为1，即不缩放

5，一般在使用bootstrap时，要加载其对应的文件

css样式文件，js文件，和一些字体设置

二，bootstrap CSS：

一些基本用法：

1， 文本：

 加粗：<b> <strong>

 强调内容：.lead

 斜体：<em> <i>

 强调相关的类：

    .text-muted：提示，使用浅灰色

.text-primary：主要，使用蓝色

.text-success：成功，使用浅绿色

.text-info：通知信息，使用浅蓝色

.text-warning：警告，使用黄色

.text-danger：危险，使用褐色 

文本对齐方式：

  .text-left：左对齐        .text-center：居中对齐

  .text-right：右对齐        .text-justify：两端对齐

2，列表

去点：list-unstyled    块变行：list-inline

3,代码：

 <code></code>单行内联代码

 <pre></pre>多行块代码，超出340px时，出现滚动条

 <kbd></kbd>用户输入代码 即从键盘上输入内容

4，表格

table.table----基础表格

.table-striped----斑马线表格

.table-bordered----带边框的表格

.table-hover----鼠标悬停高亮的表格

.table-condensed----紧凑型表格

.table-responsive----响应式表格

5，表单

a, 如何实现水平表单效果：

   在<form>元素是使用类名“form-horizontal”。

   配合Bootstrap框架的网格系统。

b, 在<form>元素上使用类名“form-horizontal”主要有以下几个作用：

    设置表单控件padding和margin值。

    改变“form-group”的表现形式，类似于网格系统的“row”。

c,表单高度处理：

input-lg(大) input-sm(小)  input-xs(超小) 

d,表单宽度处理：

col-xs-*(*表示数字) col-sm-* col-lg-*

具体实例：

<form class="form-horizontal" role="form">

<div class="form-group">

<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

<div class="col-sm-10">

  <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">

</div>

e,内联表单的实现：即让其显示在一行上

 form.form-inline>div.form-group>label.col-sm-xx>input.form-control

f,下拉框和多选框的实现：

form[role='form']>div.form-group>select/(textarea).form-control 

g,各种按钮：

btn ---普通按钮    btn-success  btn-info btn-warning  btn-danger btn-link

按钮的大小：

  btn-lg  btn-sm  btn-xs  不写为正常

块状按钮：btn-block 将其充满整个容器

禁用：disabled

6,图片

img.img-responsive//响应式图片，主要针对于响应式设计

img.img-rounded//圆角图片

img.img-circle//圆形图片

img.img-thumbnail//缩略图片

7，网格系统

div.container>div.row>div.col-md-*

工作原理：

 第一步：数据行(row)必须包含在容器(container)内,

   <div class="container">

         <div class="row"></div>

     </div>

 第二步：在行中可以添加列，但列数之和不能超过12

     <div class="container">

         <div class="row">

     <div class="col-md-4"></div>

     <div class="col-md-8"></div>

     </div>

     </div>