Bootstrop基本语法

2018-08-19 阅读量 999+

× 文章目录

1. Bootdtrop框架的基本语法
1. 1.1. 一，基本模板
2. 1.2. 二，模块讲解

Bootdtrop框架的基本语法

一，基本模板

1.1 声明字符识别

1	<meta charset="utf-8">

1.2 声明文档兼容模式，表示使用IE浏览器的最新模式

1	<meta http-equiv="X-UA-Compatible" content="IE=edge">

1.3 设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>

1 2	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no ">

注释：viewport视窗口，content内容为宽度为设备的宽度(因为到手机上的可看的到页面是不一样的)
initial初始值的比例是1，user-scalable=no设置设备(手机)不能有缩放功能
1.4 引入Bootstrap核心样式文件

<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="../../js/jquery-1.11.3.min.js"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script src="../../js/bootstrap.min.js"></script>

二，模块讲解

一，最简导航栏

1.主要部分如下

导航整体书写

1	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

属性介绍：navbar导航属性，navbar-inverse样式（黑色），
navbar-fixed-top位置属性（在顶部）role=”navigation”为了兼容老版本的浏览器
（用户代理）增加可读性

头部

1
2
3

<div class="navbar-header">
       <a href="#" class="navbar-brand">项目</a>	
   </div>

头部介绍：排列在导航的最前部字体最大

头部后面的内容

<div id="navbar" class="collapse navbar-collapse">
      <!--ul中的class是为了产生间距-->
      <ul class="navbar-nav nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Connet</a></li>	
      </ul>	 			
  </div>

属性解释：class=”collapse（内容折叠） navbar-collapse（屏幕缩小时排列）”
一起有（屏幕缩小时折叠）class=”navbar-nav nav”为了产生间距

总的代码如下

<!--导航链接  navbar-inverse样式为黑色，位置在navbar-fixed-top-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!--loge部分-->
<div class="container">
    <!--头部-->
    <div class="navbar-header">
        <a href="#" class="navbar-brand">项目</a>	
    </div>
    <!--头部后面的内容-->
    <div id="navbar" class="collapse navbar-collapse">
        <!--ul中的class是为了产生间距-->
        <ul class="navbar-nav nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Connet</a></li>	
        </ul>	 			
    </div>

二，排版字体各种样式

1.code的用法

1	<code><selct></code>

输出为：<selct>
2.黑色按钮

1	<kbd>cmd</kbd><br />

输出为： cmd 黑色方框包裹
3.代码书写区域

<pre>
    代码块的书写
    代码块的上书写
</pre>

输出为：


    代码块的书写
    代码块的上书写

4.公式的书写(斜体)

1	<var>x</var>=<var>y+x</var>

输出为：x=y+x
5.代码输出

1	<samp>代码的输出</samp>

代码输出为：代码的输出
6.字体标记标签

1 2	<p>正在学习 <mark>请勿打扰</mark> </p> <p>正在学习 <small>请勿打扰</small> </p>

代码输出为：

正在学习请勿打扰

7.已删除字标签

1	<del>正在学习请勿打扰</del>

代码输出为：~~正在学习请勿打扰~~
8.字体位置标签

1
2
3

<p class="text-left">左边</p>
<p class="text-center">中间</p>
<p class="text-right">右边</p>

9.字符串大小写设置

1
2
3

<p class="text-uppercase">asdfadf转大写</p>
<p class="text-lowercase"> HSDFSDHGHL转小写</p>
<p class="text-capitalize">sadfsdhg首字母大写</p>

标签abbr属性适合所有浏览器
电话

三，栅格系统与屏幕适配

一，@media与@media screen区别

@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。
不过这只是笼统的做法，其实如果把“screen”换为“print”，写为@media print，那么该css就可用到打印设备上了，但要注意，@media print声明的css只能在打印设备上有效。
Media Queries工作方式:

1种是直接在link中判断设备的尺寸，然后引用不同的css文件：

1	<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">

解释：意思是当屏幕的宽度大于等于400px的时候，应用styleA.css

1	<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

解释：意思是当屏幕的宽度大于600小于800时，应用styleB.css

另一种方式，即是直接写在 style 标签里：

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}
@media screen and (min-width: 600px) { /*当屏幕尺寸大于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

如果需要用在打印设备上用@media即可

二，Bootstrap中的屏幕适应

col-sm- ,col-md-,col-lg-
col-sm-:@media (min-width: 768px){ //>=768的设备 }
col-md-:@media (min-width: 992px){ //>=992的设备 }
col-lg-:@media (min-width: 1200){ //>=1200的设备 }
注意：当用min时一定是从小拍到大，max时则相反,最大个数为12个
更多关于屏幕适配

栅格的右移动

1	<div class="col-md-4 col-md-offset-1">本框向右移动</div>

解释：在屏大于992px时占屏幕的12分之四向右移动1格

栅格的左右拖拉

1 2	<div class="col-md-9 col-md-push-3" >col-md-9</div> <div class="col-md-3 col-md-pull-9">col-md-3</div>

解释：占9格的向右推进3格占3格的向左拉3格

栅格的嵌套

<div class="row">
<div class="col-xs-10">
    第一个
    <div class="row">
    <div class="col-md-5">第二个</div>
    <div class="col-md-7">第三个</div>
    </div>		
</div>

解释：第一为大格，第二和第三是在第一格里分为12格

四，多种表格的创建

一，第一种样式

table标签的解释

1 2	<div class="table-responsive container"> <table class="table table-hover table-condensed table-bordered">

解释：table-responsive可以在屏幕小的时候可以滚动
table-hover鼠标停留在上面时背景颜色改变，table-condensed加边框，
table-bordered表格变的更加紧凑

单元格的第一种背景
如：
1
2
绿色
<tr class="success">

解释：此一行的背景颜色为绿色字颜色为黑色当鼠标在此行时颜色加深
颜色还有success:绿色，danger：红色，info：蓝色，warning：黄色，active：白色

单元格的第二种背景
1
<tr class="alert-success">

解释：此一行的背景颜色为绿色字颜色为绿色当鼠标在此行时背景颜色变白色
颜色还有alert-success:绿色，alert-danger：红色，alert-info：蓝色，alert-warning：黄色，active：白色

五，下拉表单

<div class="container">
<!--pull-right按钮向右移-->
<div class="dropdown pull-right">
    <!--dropdown-toggle下拉开关可多次点击-->
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        下拉菜单
        <!--添加小箭头-->
        <span class="caret"></span>
    </button>
    <!--下拉菜单内部内容-->
    <!--dropdown-menu-right菜单右移-->
    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">文字大写</li>
        <li><a href="#" role="menuitem">一 </a></li>
        <li><a href="#" role="menuitem">二 </a></li>
        <li><a href="#" role="menuitem">三 </a></li>
        <li><a href="#" role="menuitem">四</a></li>
        <!--分格线-->
        <li class="divider"></li>
        <li role="presentation" class="dropdown-header">文字小写</li>
        <li><a href="#" role="menuitem">1</a></li>
        <li><a href="#" role="menuitem">2 </a></li>
        <li><a href="#" role="menuitem">3 </a></li>
        <li><a href="#" role="menuitem">4</a></li>
    </ul> 
</div>
</div>