学习笔记,Bootstrap学习笔记之css组件

是因为连串须求,所以筹划好好学习下bootstrap框架,以前了然一些,框架总体轻便,但涉及到的东西照旧广大,想要熟知通晓它,依旧要多练练。

先是,很谢谢各位朋友对本身的帮忙,关于bootstrap的就学计算,作者会持续立异,若是有写的难堪的地点,麻烦各位给笔者指正出来哈。关于上篇文章,固定布局和流式布局很要紧,假若还不太驾驭的能够再看看小编写的:Bootstrap学习笔记之css样式设计(1)

      从CSS
样式代码插入的款型来看基本得以分为以下3种:内联式、嵌入式和外界式三种,各有其特点。

今天我们来看看css组件效果以及中间比较主要的类,那几个类都不难,关键要熟悉通晓,搭配使用,灵活运用。关于前两篇中,css样式和布局的篇章,我们能够在前头的篇章中阅读。

一、bootstrap是什么?

此番我们来看看bootstrap中有关体制的片段有血有肉关键的类以及如何利用这么些类,类与类之间的差距,别的涉及到的一对连锁类,举列子的时候解释。

一 内联式

内联式css样式表正是把css代码直接写在存活的HTML标签中,如上边代码:

<span style=”color:blue”>银灰的书体</span> 

亟待留心的是css代码要求写在要素的起来标签中,不可以写在终止标签中,如:

<span>深紫的书体</span style=”color:blue”>

而且css样式代码要写在style=””双引号中,假如有多条css样式代码设置能够写在一齐,中间用分号隔开。如下:

<span style=”color:red;font-size:12px”>乌紫的书体</span>

 一、导航组件

bs是怎么着?
即前端页面搭建的原则框架工具,已经写好了css.js样式,只必要拿来用就能够。

一、表单

二 嵌入式

嵌入式css样式嵌入式css样式,正是能够把css样式代码写在<style
type=”text/css”></style>标签之间。如上边代码完毕把五个<span>标签中的文字设置为绿蓝:

<style type=”text/css”>

span{color:red;}

</style>

嵌入式css样式必得写在里面,况兼一般情状下嵌入式css样式写在中间。外界式css样式(也可称为外联式)正是把css代码写三个独门的外界文件中,这几个css样式文件以“.css”为增加名,在内(不是在标签内)使用标签将css样式文件链接到HTML文件内,如上边代码:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

学习笔记,Bootstrap学习笔记之css组件。留神:1、css样式文件名称以有含义的意大利共和国语字母命名,如
main.css。2、rel=”stylesheet” type=”text/css”
是定点写法不可修改。3、标签地方一般写在标签之内。

      
本人做了个导航,近年来独有一级菜单,下一篇小说中,将付出二级菜单,涉及到js的插件,所以这里不在描述。

怎么用bs呢?首倘使透过利用不相同的类扩充效果,每一样类,对应的效应差别。

1.form-control类:包含此类的<input><select><textarea>标签宽度都将变为width:100%,且在表单中家常便饭是将控件合营label标签一同饱含在form-group中利用。 

三 外部式

外部式css样式(也可称之为外联式)正是把css代码写三个独门的外表文件中,那个css样式文件以“.css”为扩大名,在内(不是在标签内)使用标签将css样式文件链接到HTML文件内,如上边代码:

<link rel=”stylesheet” type=”text/css”  href=”style.css”>

只顾:1、css样式文件名称以有含义的斯洛伐克语字母命名,如
main.css。2、rel=”stylesheet” type=”text/css”
是永世写法不可修改。3、标签地点一般写在标签之内。

<!DOCTYPE html> 
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>二级菜单</title>
<style>
 .sideBar-menu{margin:20px auto;width: 180px;}
 /*重写鼠标滑过的样式*/
.nav-pills li a:hover 
{
 background-color: #337ab7;
 color: #fff;
}
</style>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- bootstrap制作导航菜单 -->
<div class="sideBar-menu ">
 <ul class="nav nav-pills nav-stacked">
 <li role="presentation" class="active"><a href="#">  首页</a></li>
 <li role="presentation" class=""><a href="#">  关于我</a></li>
 <li role="presentation" class=""><a href="#">  那些年</a></li> 
 <li role="presentation" class=""><a href="#">  碎碎念</a></li>
 <li role="presentation" class=""><a href="#">  留言板</a></li>
 <li role="presentation" class=""><a href="#">  情感语</a></li>   
 </ul>
</div>
</body>
</html>

bs好处:扩张了开支成效,页面设计更为美观,协理响应式开拓。下载地址:

<form role="form">
 <!-- 所有设置了form-control类的input,textarea,select,元素都将被默认为width:100% -->
 <div class="form-group"> --form-group:一般讲标签和空间包裹在form-group中使用
 <label for="exampleInputEmail">Email address</label>
 <input type="email" class="form-control" id="exampleInputEmail" placeholder="input">
 </div>


 <div class="form-group">
 <label for="exampleInputEmail">Email name</label>
 <textarea class="form-control">11111</textarea>
 </div>


 <div class="form-group">
 <label for="select">select form</label>
 <select class="form-control">
 <option>111</option>
 <option>222</option>
 </select>
 </div>
</form>

四 三者之间的初期级

纪事他们的事先级:

内联式 > 嵌入式 > 外界式,(一般遵照就近原则)

<span
style=”color:green”>的预先级高于嵌入式和外界式,而嵌入式和外部式何人更近乎主体,什么人的早期级就能够高级中学一年级些

图片 1

效用如下:

学习文书档案:

 根据地方代码引申出区别的类,大家一行行的来看。给form增加form-inline类(将控件放在一行)
|  form-horizontal类(标签在左,控件在右),后面一个借助标签。

图片 2

二、css样式设计

<!-- form-inline类使表单水平呈现-->
<form class="form-inline"> --其次还有check-inline,radio-inline等
 <div class="form-group">
 <label class="src-only" for="exampleInputAmount">Amount</label>
 <div class="input-group"> --input-group:输入组
 <div class="input-group-addon">@</div> --addon:指添加的文本或按钮
 <input type="text" class="form-control " id="exampleInputAmount" placeholder="Amount">
 <div class="input-group-addon">@</div>
 </div>
 </div>
 <button type="submit" class="btn btn-primary">search</button>

</form>

导航类要求小心以下几点:

1.基于Html文档

成效如下:

     1:导航组件依赖于nav类。(即利用任何类时,都不能够不写上这么些类)

bootstrap引用了部分html成分,所以底部需写成下边所示的样列。

图片 3

     2:确认保障导航组件的可访谈性(加多role属性)

<!DOCTYPE html> ---包含HTML5文档声明,所有浏览器均开启标准模式
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后!确保支持响应式布局 -->
<title>Bootstrap</title>
[/code][code]<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件(一般不用引入) --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

如果不加的话,button将被挤到下一行。这里不再贴图,可自行贴码测量试验。

     3:涉及到的类包涵nav-tabs
,nav-pills(使导航展现胶囊状),nav-stacked(使水平导航变为竖直导航),nav-justified(达成导航均等上升的幅度排列)

2.栅格类别布局

<!--水平排列的表单 control-label:表示文本采用右对齐 -->
<form class="form-horizontal" >
 <div class="form-group">
 <label for="inputEmail" class="col-sm-2 control-label">Email:</label>
 <div class="col-sm-10">
 <input type="email" class="form-control" id="inputEmail" placeholder="email">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword" class="col-sm-2 control-label">Password:</label>
 <div class="col-sm-10">
 <input type="password" class="form-control" id="inputPassword" placeholder="password">
 </div>
 </div>
</form>

    
4:对于disabled类,增加在导航页中的链接时(饱含标签页和导航页),只是使其外表上被剥夺(颜色变灰,鼠标形状改造),实效依然还存在。

透过设置行和列来开展内容的布局。bootstrap把页面设置为12列。通过转移列的数字来张开布局,举例设置多少个等宽的列:

效能如下:

     5:黄疸拉菜单的导航应用。

<!DOCTYPE html> 
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 设置栅栏式布局-->
<div class="container"><!--或者container-fluid-->
 <div class="row">  -- col-xs-4 : 指小于768px的小设备
  <div class="col-xs-4">11</div> -- col-sm-4 :指>=768px的设备
  <div class="col-xs-4">22</div> -- col-md-4 :指>=992px设备
  <div class="col-xs-4">33</div> -- col-lg-4 :值1200px设备
 </div>
 <div class="row">
  <div class="col-md-4">11</div>
  <div class="col-md-4">22</div>
  <div class="col-md-4">33</div>
 </div>
 <div class="row">
  <div class="col-sm-4">11</div>
  <div class="col-sm-4">22</div>
  <div class="col-sm-4">33</div>
 </div>
 <div class="row">
  <div class="col-lg-4">11</div>
  <div class="col-lg-4">22</div>
  <div class="col-lg-4">33</div>
 </div>

</div>
</body>
</html>

图片 4

咱俩来看下列子:可自动贴码测验,不再截图。

css网格式有各种写法,首要选用于不一致器械的分辨率。

(注意:此间的input文本框应该是占5/6的,我把它的小幅度自定义了下为百分之七十五)

<!-- 导航依赖于nav类nav-tabs类依赖nav类 -->
 <ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li> ---注意加上role属性
  <li role="presentation" class=""><a href="#">Profile</a></li>
  <li role="presentation" class=""><a href="#">Messages</a></li>
  </ul>
<!--胶囊式标签页 竖直排列nav-stacked-->
 <ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" class=""><a href="#">Profile</a></li>
  <li role="presentation" class=""><a href="#">Messages</a></li>
  </ul> 
<!--两端对齐导航nav-justified可实现导航均列对齐--> 
  <ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation" class=""><a href="#">Profile</a></li>
  <li role="presentation" class=""><a href="#">Messages</a></li>
  </ul> <br><br>

2:平移列

此地关于form-horizontal,要合作bootstrap的栅格系统开展。

再来看下水肿拉菜单的导航情形:

选取offset来张开移动。即移动的列数

在<form>成分上利用类名“form-horizontal”主要有以下多少个功用:
  1:设置表单控件padding和margin值。上边包车型大巴代码可在调整调控台里面来看,为padding-left:50px。
  2:改造“form-group”的表现情势,类似于网格系统的“row”。

<ul class="nav nav-pills">
   <li role="presentation" class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" 
    aria-expanded="false">
    Dropdown
   </a>
   <ul class="dropdown-menu">
     <li><a href="#">Action</a></li>
     <li><a href="#">Action 111</a></li>
     <li><a href="#">Action 222</a></li>
     <li><a href="#">Action 333</a></li>
   </ul>
   </li> 
  <li role="presentation" class="divider"></li> --divider表示添加分隔线,一般都是给空的li或者span进行使用
  <li role="presentation" class=""><a href="#">Profile</a></li>
  <li role="presentation" class=""><a href="#">Messages</a></li>

</ul>
<div class="container"><!--或者container-fluid-->
 <div class="row">
  <div class="col-xs-4">11</div>
  <div class="col-xs-4">22</div>
  <div class="col-xs-offset-2 col-xs-4">33</div>---指33向右平移了两列
 </div>
 <div class="row">
  <div class="col-md-4">11</div>
  <div class="col-md-4 col-md-offset-2">22</div>
  <div class="col-md-4">33</div>
 </div> 
 <div class="row">
 <div class="col-md-4">11</div>
 <div class="col-md-4 col-md-offset-2">22</div> 
 <div class="col-md-4">33</div> 
 </div> 
</div>
<!-- 平移列-->

2.label的作用

事实上对于使用下拉菜单类dropdown,基本格式都是像下边那样,也许您把链接a变为button等等等,灵活运用就能够。

效果与利益如下:

<label for="hello1">hello</label><input type="text" id="hello"><br> 

 ---产生蓝色光晕
<label for="1111">hello</label><input type="text" id="jiang"><br> 

---id不对应,没反应,只有当鼠标放在控件上时,才有蓝色光晕

二、导航条组件

图片 5

组成地点的代码看:label中的for属性,应该相应的是控件中的id。功效:保证当鼠标置于label上,相应的控件会发生淡黄光晕。

注意点:

33出于平移了两列,无法满足它占4列的供给,于是被挤到下一行起初占用4列。简单的说,也正是将总体div块右移。

3.role的作用

     1:导航条即把组件全体横向排列放置,包裹组件,类似于横向导航的花样

图片 6

   有没有认为很意外,为啥在写表单也许有个别控件的时候,要加上role?

     2:确认保证可访谈性。使用<nav>标签大概<div 
role=”navigation”>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图