textarea placeholder样式设置_Web前端开发(19)——Bootstrap样式

Bootstrap样式

Bootstrap的样式有很多，在使用文档里介绍的非常的详细，我在这里介绍几个比较常见的供大家参考：

全局样式

①按钮

有关按钮Bootstrap定义了许多常用的样式，我们可以通过设置class的属性值进行调用，比如：

<button type="button" class="btn btn-default">(默认样式)Defaultbutton><button type="button" class="btn btn-primary">(首选项)Primarybutton><button type="button" class="btn btn-success">(成功)Successbutton> <button type="button" class="btn btn-info">(一般信息)Infobutton> <button type="button" class="btn btn-warning">(警告)Warningbutton><button type="button" class="btn btn-danger">(危险)Dangerbutton>

页面效果如图所示：

②图片

关于图片，我们可以设置class="img-responsive"，让图片在任意窗口大小都占100%。

还可以设置图片显示的形状：

• class="img-rounded"：方形

• class="img-circle"：圆形

• class="img-thumbnail"：相框

效果如图所示：

③表格

为任意

table类可以为其赋予基本的样式：少量的内补(padding)和水平方向的分隔线。

通过table-striped类可以给

之内的每一行增加斑马条纹样式。

添加table-bordered类为表格和其中的每个单元格增加边框。

通过添加table-hover类可以让

中的每一行对鼠标悬停状态作出响应。

比如增加斑马条纹样式如图所示：

④表单

单独的表单控件会被自动赋予一些全局样式。所有设置了form-control类的、和元素都将被默认设置宽度属性为width: 100%。将label元素和前面提到的控件包裹在form-group中可以获得最好的排列。

比如：

<form>    <div class="form-group">        <label for="exampleInputEmail1">Email addresslabel>        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">    div>    <div class="form-group">        <label for="exampleInputPassword1">Passwordlabel>        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">    div>    <div class="form-group">        <label for="exampleInputFile">File inputlabel>        <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 outlabel>    div>    <button type="submit" class="btn btn-default">Submitbutton>form>

效果如图所示：

组件

组件我只介绍两种最常用的：头部导航条和尾部分页条。

①导航条

导航条是在应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关)，且在视口(viewport)宽度增加时逐渐变为水平展开模式。

最常用的导航条如下所示：

它包含了链接、下拉菜单、搜索框等元素。代码如下所示，初学者能够读懂，知道如何修改代码即可。

class=    <div class="container-fluid">        <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 navigationspan>                <span class="icon-bar">span>                <span class="icon-bar">span>                <span class="icon-bar">span>            button>            <a class="navbar-brand" href="#">Branda>        div>        <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="#">Linka>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="#">Actiona>li>                        <li><a href="#">Another actiona>li>                        <li><a href="#">Something else herea>li>                        <li role="separator" class="divider">li>                        <li><a href="#">Separated linka>li>                        <li role="separator" class="divider">li>                        <li><a href="#">One more separated linka>li>                    ul>                li>            ul>            <form class="navbar-form navbar-left" role="search">                <div class="form-group">                    <input type="text" class="form-control" placeholder="Search">                div>                <button type="submit" class="btn btn-default">Submitbutton>            form>            <ul class="nav navbar-nav navbar-right">                <li><a href="#">Linka>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="#">Actiona>li>                        <li><a href="#">Another actiona>li>                        <li><a href="#">Something else herea>li>                        <li role="separator" class="divider">li>                        <li><a href="#">Separated linka>li>                    ul>                li>            ul>        div>    div>nav>

②分页条

这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，有点事容易点击、易缩放、点击区域大。

链接在不同情况下可以定制。你可以给不能点击的链接添加disabled类、给当前页添加active类。

最简单的分页条如图所示：

代码如下所示：

<nav>    <ul class="pagination">        <li class="disabled">             <a href="#" aria-label="Previous"> <span aria-hidden="true">«span> a>        li>        <li class="active"><a href="#">1a>li>        <li><a href="#">2a>li>        <li><a href="#">3a>li>        <li><a href="#">4a>li>        <li><a href="#">5a>li>        <li>             <a href="#" aria-label="Next"> <span aria-hidden="true">»span> a>        li>    ul>nav>

JS插件

JS插件我只介绍一个最简单的轮播图，先上代码：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">        <ol class="carousel-indicators">        <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>        <li data-target="#carousel-example-generic" data-slide-to="1">li>        <li data-target="#carousel-example-generic" data-slide-to="2">li>    ol>        <div class="carousel-inner" role="listbox">        <div class="item active">            <img src="img/banner_1.jpg" alt="...">        div>        <div class="item">            <img src="img/banner_2.jpg" alt="...">        div>        <div class="item">            <img src="img/banner_3.jpg" alt="...">        div>    div>        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>        <span class="sr-only">Previousspan>    a>    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>        <span class="sr-only">Nextspan>    a>div>

这个代码主要分成三个部分：第一部分是无序列表，点击即可跳到对应的图片，具体实现不重要；第二部分是设置相应的图片，更改src属性即可；第三部分是左右的两个翻页，具体实现也不用管，会用这段代码就行。