您的位置：首页 > Web前端 > BootStrap

初识bootstrap框架，以及sass (CSS预处理器)

2017-03-07 00:00 274 查看
刚开始接触bootstrap框架，虽然之前看过但还是云里雾里，每一种框架都需要不断地练习才能掌握；

总结下今天学的一些内容其实不单单了解了bootstrap，还了解了何为条件注释判断，sass(CSS预处理器).

条件注释

条件注释是一种安全的区分IE浏览器版本的语法，且被认为是取代针对IE css hack的首选办法。

利用条件注释判断浏览器版本

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

SASS

sass依赖于ruby环境，需要装sass之前先确认装了ruby。先导官网下载个ruby。

sass使用指令安装

在cmd窗口中输入：

gem install sass

如安装失败详见sass教程http://www.w3cplus.com/sassguide/install.html

sass CSS预处理器是用来写css的一种方式，用习惯了还是挺好用的；

bootstrap

bootstrap框架帮我们写好了很多常用的样式与js代码，直接用bootstrap class类名就可以实现效果；

.container 表示一个定宽居中的容器，在bootstrap中是响应式的；

.container-fluid 表示一个充满屏幕的容器即（width：100%）

bootstrap采用了一个全新的布局方式，栅栏系统；

栅栏系统

将一行可以分成12格

.row 表示行 , .col-xs-* / .col-sm-* / .col-md-* /.col-lg-* 表示不同设备上的列数

栅栏参数

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container
最大宽度		None （自动）750px970px1170px
类前缀
.col-xs-
.col-sm-
.col-md-
.col-lg-
列（column）数12
最大列（column）宽自动~62px~81px~97px
槽（gutter）宽30px （每列左右均有 15px）
可嵌套是
偏移（Offsets）是
列排序是
列偏移

.col-xs-offset-* / .col-sm-offset-* / .col-md-offset-* /.col-lg-offset-* 表示列偏移量

嵌套列

<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>


列排序

通过使用 
.col-md-push-*
和 
.col-md-pull-*
类就可以很容易的改变列（column）的顺序。

<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

排版 内容

.h1 ~ .h6 可以使内联标签有标题的样式，.small 可以使字体更小，用于描述.......还有更多的关于版面的类我就不一一列举啦！详情见官网哟~传送门：http://v3.bootcss.com/css/#type

关于表格的class类

.table给予基本表格基本的样式；

.table-striped 条纹状表格样式；

.table-bordered 带边框的表格样式；

通过添加 
.table-hover
类可以让 
<tbody>
中的每一行对鼠标悬停状态作出响应。

.table-condensed 紧缩的表格样式；

.table-responsive 响应式表格样式，加上此样式之后表格即变成响应式表格；

关于表单的类

所有设置了 
.form-control
类的 
<input>
、
<textarea>
和 
<select>
元素都将被默认设置宽度属性为 
width: 100%;


表单中的每一块写在.form-group类的div中

<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>


内联表单

为 
<form>
元素添加 
.form-inline
类可使其内容左对齐并且表现为 
inline-block
级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

水平排列的表单

通过为表单添加 
.form-horizontal
类，并联合使用 Bootstrap 预置的栅格类，可以将 
label
标签和控件组水平并排布局。这样做将改变 
.form-group
的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 
.row
了。

内联单选和多选框

通过将 
.checkbox-inline
或 
.radio-inline
类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

按钮

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

.btn 样式式标签具有按钮的特性；

.btn-default / .btn-primary / .btn-success / .btn-info / .btn-warning / .btn-danger / .btn-link 定义不同颜色的button样式；

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

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

图片

在 Bootstrap 版本 3 中，通过为图片添加 
.img-responsive
类可以让图片支持响应式布局。其实质是为图片设置了 
max-width: 100%;
、 
height: auto;
和 
display: block;
属性，从而让图片在其父元素中更好的缩放。

img-round 方形图片 img-circle 圆形图片 img-thumbnail 方框 图片

各类情景背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Bootstrap组件

Glyphicons 字体图标

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

下拉菜单

将下拉菜单触发器和下拉菜单都包裹在 
.dropdown
里

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

将父元素的类名改为 
.dropup
,可以让菜单向上弹出（默认是向下弹出的）。

对齐

.dropdown-menu-right 类可以让菜单右对齐。

.dropdown-header下拉框中的标题

.disable 类 在bootstrap中都是展现禁用元素的功能,.active 表示被操作的元素；

按钮组

.btn-group 可以使一组按钮紧密排列

.btn-group可以相互嵌套

尺寸

-lg，-sm，-xs 表示不同的尺寸

按钮组的垂直排列

.btn-group-vertical 类 可以使按钮组垂直排列

.btn-group-justified类 使两端对齐

单按钮下拉菜单

<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

还有多种组合方式......

输入框组 .input-group

<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

导航

Bootstrap 中的导航组件都依赖同一个 
.nav
类，状态类也是共用的。改变修饰类可以改变样式。

标签页：
.nav-tabs
类依赖 
.nav
基类

胶囊式标签页：.nav-pills类

两端对齐标签页：.nav-justified 类

导航条

导航条的可访问性

务必使用 
<nav>
元素，或者，如果使用的是通用的 
<div>
元素的话，务必为导航条设置 
role="navigation"
属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。



<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

这是一个响应式导航栏；

组件排列：通过添加 
.navbar-left
和 
.navbar-right
工具类让导航链接、表单、按钮或文本对齐。

固定在顶部：添加 
.navbar-fixed-top
类可以让导航条固定在顶部；

固定在底部：添加 
.navbar-fixed-bottom
类可以让导航条固定在底部；

静止在顶部：通过添加 
.navbar-static-top
类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。

反色的导航条：通过添加 
.navbar-inverse
类可以改变导航条的外观。

路径导航

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>


分页

//pagination
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航