栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

bootstrap CSS篇(基础知识总结)

bootstrap CSS篇(基础知识总结)

bootstrap

一,概念:

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

2,在其官网上下载:www.getbootstrap.com

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

4,

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

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

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

二,bootstrap CSS:

一些基本用法:

1, 文本:

 加粗: 

 强调内容:.lead

 斜体: 

 强调相关的类:

    .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,代码:

 单行内联代码

 
多行块代码,超出340px时,出现滚动条

 用户输入代码 即从键盘上输入内容

4,表格

table.table----基础表格

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

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

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

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

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

5,表单

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

元素是使用类名“form-horizontal”。 配合Bootstrap框架的网格系统。

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

    设置表单控件padding和margin值。

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

c,表单高度处理:

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

d,表单宽度处理:

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

具体实例:





  

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)内,

   

  

     

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

     

  

     

     

     

     
转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号