Bootstrap使用基础教程详解

一:Bootstrap简介

  Boostrap是一个非常受欢迎的前端开发框架,该框架极大的提高前端团队的开发效率。 Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装,使开发人员可以轻松使用。 使用Bootstrap可以快速制作精美的响应式页面,并且兼容移动端。

二:Bootstrap特性

  提供一套完整的CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件表 灵活的响应式删格系统 移动先行 基于Less和Sass开发。

三:使用Bootstrap

 1. 第一步:

  到http://www.bootcss.com/下载最新的bootstrap。 解压后有三个文件夹,分别放置css,js和字体。 CSS和JavaScript文件分别有一个压缩版,可以根据需要选择一个版本。开发时使用未压缩版,在发布时使用压缩版本。

 

2.固定模板代码展示

rush:js;"> <Meta charset="utf-8">   <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <Meta name="viewport" content="width=device-width,initial-scale=1"> Bootstrap模板样式

<link href="css/bootstrap.min.css" rel="stylesheet">

你好,世界!

3.基本用法

  3.1整体框架-12栅格系统

  bootstrap的核心是12栅格系统。 12栅格系统就是把网页的内容区域按照宽度平分为12份,网页开发人员可以自由按份组合,方便网页的布局,使排版看起来整齐规范。

  bootstarp提供了一个名为container的样式容器 .container是一个自动居中,高度自适应的样式。用.container作为网页内容最外层的div样式,可以轻松的实现12栅格的网页布局。 并且,这种12栅格系统是根据屏幕大小自适应的,.container会自动根据屏幕大小调整总宽度和栅格的平均宽度。

  col-lg-n 最大列宽95px 在>=1200px像素的情况下将.container12等分 每份宽度95px 其余情况宽度为100%

  col-md-n 最大宽度78px; 在>=992px像素的情况下将.container12等分 其余情况100%

  col-sm-n 最大列宽60px 在>=768px像素的情况下将.container12等分 其余情况100%

  col-xs-n 列宽根据视口大小12等分 在任何尺寸的屏幕下都将.container 12等分

  

3.2基础样式

    (1)Bootstrap的h1-h6样式取消了加粗,重新定义了上下外边距 h1-h3 margin-top:20px; margin-bottom-10px; H3-h6 margin-top:10px; margin-bottom-10px;

    (2)定义了4个对齐方式的样式,分别是.text-left,.text-center,.text-right,.text-justify .text-justify 英文字母的两端对齐

    (3)Bootstrap提供了五种认的颜色样式,-primary 重点蓝, -success成功绿,-info信息蓝 -warning 警告橙,-danger危险红

 

 3.3btn组件+btn-group

  

rush:js;"> alert组件
危险警告

    一般的组件都有四种尺寸,超小xs,小型sm,普通,大型lg 使用方法是 组件名-尺寸 同一组件不同类型的按钮可以结合使用 

rush:js;">
首页

 

3.4table表格样式:

    给table元素添加一个div父元素,给这个div添加class=”table-responsive” 创建相应式表格,当视口像素小于768px时候,会出现水平滚动条

rush:js;">

  

3.5Badge徽章

rush:js;">
特别关心

  

3.6导航条

(1)胶囊式导航条

rush:js;">

(2)标签式导航条

  

3.7 input-group

 

 3.8轮播

 

 3.9面板panel-group

rush:js;"> <Meta charset="utf-8"> Bootstrap 实例 - <a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>页(Tab)<a href="https://www.jb51.cc/tag/chajian/" target="_blank" class="keywords">插件</a>

四:注意事项

1.container,col - - (栅格),需要用单独的div包裹,之后再里面定义其他的内容

2.如果要对元素设置媒体查询不能定义的class或id不能和定义col - - (栅格)的class 或id写到一个div里,

medio为定义媒体查询的class错误的写法

aa

正确的写法是

aa

3.如果用container实现高度自适应时,就不能给元素添加高度,应对其父元素设置overflow-hidden。

4.当给元素设置Position定位之后,元素的宽度为0,如果想让元素居中需要对其添加width:100%;text-align:center;

5.再使用input标签时,如果对其父类定义了col - - (栅格),可以对input添加form-control设置input的大小和父类一样大。

相关文章

Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...