Subscribed unsubscribe Subscribe Subscribe

Send email from codeigniter

Environment Codeigniter 3.0.1 PHP5.5 HTML <form method="post" action="/questionnaire/mail_sender"> <div class="form-group"> <label for="lastname" class="col-sm-offset-1 col-xs-4 control-label">lastname</label> <div class="col-md-3 col-xs-7"> </div></div></form>

bootstrapで基本的な固定サイドメニューを作成する

<html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/css/bootstrap.min.css" /> <link rel="stylesheet" href="/css/general.css" /> </link></link></meta></meta></head></html>

Bootstrapでのformの基本的な書き方と注意点

<div class="form-horizontal"> <form method="post" action=""> <div class="form-group"> <label for="lastname" class="col-xs-3 control-label">姓</label> <div class="col-md-3 col-xs-7"> <input type="text" class="form-control input-sm" name="lastname" id="lastname" placeholder="姓"> </div> </div> </form></div>

Twitter Bootstrap Grid systemの分割参考サイト

以下のサイトで、px数と分割の割合を参照できます。 http://jsfiddle.net/opengl_8080/2ZC24/show/ Bootstrap の Grid system サンプル2 - JSFiddle Bootstrap の Grid system サンプル2 - JSFiddle

ツールチップ ポップオーバー カルーセル bootstrap

<html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </link></meta></meta></meta></head></html>

ナビゲーションバー bootstrap

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">toggle nav</span> <span class="icon-bar"></span> <span class="icon-bar"><…</span></button></div></div></nav>

ボタンやドロップダウン bootstrap

<div class="btn-group"> <button class="btn btn-primary"><i class="glyphicon glyphicon-heart">about</i></button> <button class="btn btn-success"><i class="glyphicon glyphicon-heart">main</i></button> <button class="btn btn-info"><i class="glyphicon glyphicon-heart">sub</i></button> </div>

offsetでカラムの間に空間を入れる

<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="postcode">郵便番号</label> <div class="col-sm-4"> <input type="text" id="postcode" class="form-control" placeholder="郵便番号"> </div> </div> <div class="form-group"></div></form>

sr-only Bootstrap

sr-onlyクラス (screen reader-only) 音声読み上げのみで、画面には表示しないクラスです。 <form class="form-inline"> // フォーム全体をインラインに <div class="form-group"> // フォームをグループに <label class="sr-only control-label" for="postcode">ここが表示されない</label> <input type="text" id="postcode" class="form-control" placeholder="郵便番号"> </div> </form>

画面幅が変わった際、カラムを表示したり消したりする Bootstrap

<html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </link></meta></meta></meta></head></html>

画面幅が変わる度、カラム構成を変える Bootstrap

smの時は3:9、xsの時は5:7という風にレイアウト構成を画面の大きさによって変えられます。 <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> </meta></meta></meta></head></html>

画面幅に合わせてカラムの幅を調節する Bootstrap

横幅を全部で12のカラムに分割し、col-sm-3,col-sm-9などとクラスで指定してそれぞれの横幅が全部で12になるよう調節する。 xs:extra small ~ 767px sm:small 768 ~ 992px md:medium 992 ~ 1200px lg:large 1200 ~ CSS · Bootstrap CSS · Bootstrap smと…

ボタンの結合 bootstrap

<div class="btn-group"> <button class="btn btn-success"><i class="glyphicon glyphicon-heart">Top</i></button> <button class="btn btn-info"><i class="glyphicon glyphicon-heart">Info</i></button> </div> i 要素でアイコンを指定できます。 Components · Bootstrap Components · Bootstrap btn-groupクラスでボタンをグループ化できます。